7 replies [Last post]
Keith
Offline
newbie
Last seen: 16 years 15 weeks ago
Joined: 2003-07-09
Posts: 5
Points: 0

Hi. Long time listener, first time caller. Hope you can help!

Website (XHTML 1.1 Strict and validating. No tables used in the layout, just CSS).
Stylesheet
The specific code in question, from the stylesheet:

.menu span
{
display: none;
}
.menu a:hover span
{
display: block; position: absolute; top: 0%; right: 170px; width: 125px; padding: 5px; color: #000000; background: #ff9999; border: solid #000000; border-width: 2px;
}

When using Opera or Mozilla, the hidden spans within the menu on the right display as light red boxes with additional information. For some reason they don't display when using Internet Explorer 6.

Can anyone give me some pointers as to what I'm doing wrong?

---------------------
Additional
---------------------
Is there anyway to make the light red boxes horizontally relative to their individual links without causing further problems?

When I use position-relative it puts equivalent whitespace between the menu items, which obviously isn't what I want to achieve.

I suppose I could specify a class for each individual link, and position-absolute each one, but as that would require pixel-perfect positioning, I imagine it wouldn't be possible to achieve this cross-browser.

Thanks in advance for any help you can provide on either issue.

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 6 years 22 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Re: Displaying a hidden element on hover, problem in IE

Keith wrote:

When using Opera or Mozilla, the hidden spans within the menu on the right display as light red boxes with additional information. For some reason they don't display when using Internet Explorer 6.

ummm I don't see any light red boxes next to the menus on Opera 6.01 or Opera 7.11

Can u give us a screen shot ?

http//melbourne.ug.php.net

Keith
Offline
newbie
Last seen: 16 years 15 weeks ago
Joined: 2003-07-09
Posts: 5
Points: 0

Displaying a hidden element on hover, problem in IE

That's odd. It works for me in Opera 7.11 and Opera 7.2 beta. You did hover over the menu items?

Find attached a screenshot of the area in question.

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 6 years 22 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Displaying a hidden element on hover, problem in IE

ahh now I see it Smile HOVER was the key word I missed to look at in your code. But it doesn't work on Opera 6.01 as well. It works on 7.11 as you said.

I woudn't have a clue how to position it, but I am sure some of the experts here can help u.

http//melbourne.ug.php.net

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Displaying a hidden element on hover, problem in IE

Hi Keith,
try .menu li a:hover span which may get ithe span displaying in IE.
To position try giving each span an id and then seperatlly giving each of them a different top value remembering thet only the one you are hovering on exists in the page flow.

#one{top:0;}
#two{top:15px;}...

It's nice to mention where you get ideas from maybe in the source code you could put a comment that acknowleges Eric Meyer for those popups.

Keith
Offline
newbie
Last seen: 16 years 15 weeks ago
Joined: 2003-07-09
Posts: 5
Points: 0

Displaying a hidden element on hover, problem in IE

Thanks Tony. I tried adding li as suggested, but it didn't work in IE.

I also tried changing it to #right .menu li a: hover span, but no luck. I guess I'll try stripping it right down tomorrow and seeing at what stage I can get it to work in IE. I'll let you know how I get on.

The strange thing is that Eric Meyer's page, where I got the code from, DOES work in IE. I can't imagine why, but would the fact that his is HTML, and mine is XHTML make a difference? (And I was planning on crediting him, and here if I got help, don't worry! I was going to redo the page that explains and thanks the relevant site for the alternate style sheets, and give the credit there. I planned to get it working first, as I wasn't sure whether I'd keep the code or not).

Yeah, I did consider giving each span an individual id, and absolutely position each, but I decided against it, as pixel-perfect positioning is when things start looking skewed cross-browser and cross-platform.

Thanks again.

Keith
Offline
newbie
Last seen: 16 years 15 weeks ago
Joined: 2003-07-09
Posts: 5
Points: 0

Displaying a hidden element on hover, problem in IE

Well, I finally got it sussed. I added the following to the stylesheet

.menu a:hover
{
display: inline;
}
and it worked in IE.

(You can't see it in action though, cos it caused redraw problems with Opera 7.2 beta, but not with Opera 7.11. This redraw problem remained no matter what changes I made, such as adding "li" etc. Guess I'd better report it to Opera!)

KnightWolfJK
KnightWolfJK's picture
Offline
Enthusiast
Washington, DC
Last seen: 12 years 17 weeks ago
Washington, DC
Timezone: GMT-5
Joined: 2003-06-10
Posts: 210
Points: 0

Displaying a hidden element on hover, problem in IE

Sounds like you're making good progress Keith. I'm using css & list-based on one site at the moment; tonight or tomorrow night I'm converting another site's navigation from tables to lists, so I'll be tuning in on what you find out.

Good luck...

Diplomacy is the art of letting someone have your way