Forum Moderators: not2easy
I've made a vertical menu, with images as the links, which displays text to the side of the image when hovered over (based on Eric Meyer's CSS pop-up ideas).
It works fine in Safari, but in Firefox (both Mac & PC) the exposed text appears next to the image below the one it's meant to.
From the HTML:
<ul class="navbar">
<li><a href="bar.html"><img src ="buttons/bar.jpg" border="0" alt="Bar/Restaurant" /><span>Blah blah blah blah blah.</span></a></li>
<li><a href="internet.html"><img src ="buttons/internet.jpg" border="0" alt="Internet" /><span>Waffle waffle waffle waffle waffle.</span></a></li>
</ul>
The CSS styling it is:
ul.navbar {list-style-type: none;width: 100px; padding: 0; margin: 0;}
ul.navbar li {margin: 0; padding: 0; width: 310px; overflow:visible;}
ul.navbar a {
padding: 0; margin: 0;
text-decoration: none;
}
ul.navbar a span {display: none;}
ul.navbar a:hover span {
display: block;
float: right;
width: 200px;
padding: 5px; margin: 0px;
color: #000;
font: 12px Verdana, sans-serif; text-align: center;
}
I don't expect IE to handle this, but I would have thought that Safari and Firefox should display it the same, but they don't.
Grateful for any ideas.
I don't expect IE to handle this, but I would have thought that Safari and Firefox should display it the same, but they don't.
Good News: IE can handle this technique perfectly fine (though there is some minor quirks [webmasterworld.com]..
Hint: If there's a difference between FF and Safari that's a good clue to the fact that there's something else wrong ;)
First off the best thing to do when building these Pop Out menus is to build them first without Hiding anything that way you can see what's going on IE too.. the IE quirk will not always be triggered and only appears when trying to activate the pop up so if you do come across it then the fixes are detailed in the link above.
Second the problem which I can't exactly see because I don't have safari and because I don't know the heights of your images, but I am presuming, is with the images themselves, these are inline elements and so are the spans. Inline text (like that in your spans) will align itself according to the line-height of the <li> the default is "baseline" which is somehwere near the bottom. Then the images are also inline element (inline-replaced actually but that's a by the by) images will align themselves to the baseline by default too, but then they'll stretch the line-height according to their explicit height (the replaced bit) so if you have an image that's 100px high the line-height of the whole <li> will become 100px then the text inside the span will align itself to the baseline of that too, in other words appearing to not be in alignment with the image beside it. That's an exaggerated example but what it all means is that you should deal with the images slightly differently in order to gain control of the line height of the span beside it.
Next bigger problem I see is with the overflow bit, IE can't handle overflow very well so if that list is supposed to be 100px wide with content next to it, and you intent the Pop Outs to appear over any content to the right of the list then this may not be the best way for you to do it. IE "thinks" the list is 310px wide :(
Good News again.. it is possible to do what you want!
first off I would make the list the same width as the images, then also input the image dimensions (I presume they're all the same?) into the css too, and float the images to the left, which then makes them into a block level element too and should make your list display evenly and fic the line-height vertical-alignment issue.
Then the spans themselves I would position absolutely, which then makes them block elements, but more importantly takes them out of the flow and makes them Pop-Up over the top of existing content rather then displacing it.
To do this you need to add
position: relative;Then the left position/co-ordinate of the positioned span should be the same as the width of the images so that it pops up perfectly to right of it's associated image.. if it's not positioned exactly (you might want to consider a 1px overlap of the 2) it may be difficult to keep the hover active when moving from the image to the span.. If you're not bothered about the hover being active on the span then this may not be a concern.
that should do it for most compliant browsers without having to combat any of IE's little quirks.. there are various little nuances you can add like making the lines of text match the image height for aesthetic reasons however the styling is up to you..
then though is where IE quirks start to be triggered:
here's some CSS for that same HTML you have (except I added a paragraph of content after the ul to make sure it wasn't displaced) which might help explain better.. I've colored and commented it and hopefully it covers all of the IE quirks you might run up against, like I said I haven't got safari so you may want to copy it as is first and make sure it's alright there too.
ul.navbar {
font: 12px/20px Verdana, sans-serif; /* optional: I added 20px line-height so lines of text are same height as images */
padding: 0;
margin: 0;
list-style: none;
width: 100px;
float: left; /* added to show what happens to content on the right side */
margin-right: 10px; /* added to create a margin between pretend content and list */
}ul.navbar li {
position: relative; /* for span to take it's position from */
}/* enter the image dimensions and float it */
ul.navbar li img {
width: 100px;
height: 20px;
float: left; /* this also makes it disply: block; */
}ul.navbar a {
display: block;
height: 20px; /* same height as image */
text-decoration: none;
color: #000;
}ul.navbar a:hover {
/* an a:hover rule has to be in place before the a:hover span will work but note that a color rule on it's own is not enough */
color: #f00; /* a color rule alone is not enough for IE */
text-indent: 0; /* so this makes it work in IE should the "no-popup" quirk be triggered */
}ul.navbar a span {
display: none;
/*position: absolute;*/ /* another IE quirk see note on rule below */
left: 100px; /* or 99px if you want a 1px overlap to ensure continuity */
width: 210px; /* whatever you want! */
background: #ddd;
}ul.navbar a:hover span {
display: block;
position: absolute; /* this needs to be on the :hover span or it triggers layout and you get sticky tooltips */
cursor: hand; /* another IE quirk where cursor doesn't show text is a link */
}
Tried to be gentle, and hope it is..
Suzy
Many, many thanks for taking the time to post such a comprehensive and detailed reply. :)
I'll try out your suggestions, and let you know how I get on.
Thanks again,
Tim
Thanks again; I've inherited a site that was incredibly badly written, and have been banging my head against the wall trying to get it compliant whilst preserving the existing look and feel. Thanks to you, all is now well.
I know where I'm coming for advice from now on... :)
