homepage Welcome to WebmasterWorld Guest from 54.167.238.60
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS popups and Navigation
frank_stahl




msg:1219422
 11:29 am on Oct 1, 2003 (gmt 0)

I have a problem with the following CSS: The small popups are displayed in Mozilla and Opera, but not in IE. Does anyone know how to fix this? Any help would be appreciated.

(This example combines two well known techniques: (1) navigation markup as a CSS formatted <ul> list and (2) formatting of <span>s inside of links in order to get CSS popups. The popups work in IE if you don't format the navigation as a list, i.e. if the <a> tags are not wrapped in <li> and <ul> tags, but combined these two techniques do not work well together in IE.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Navigation</title>
<style type="text/css">
body { font: 12px/15px Arial; margin: 0; padding: 0; }
#nav {
/*border: 1px solid blue;*/
margin: 20px;
width: 250px;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
display: inline;
margin: 0;
padding: 0;
}
#nav li a {
display: block;
margin: 0;
padding: 0;
padding-left: 15px;
padding-bottom: 5px;
text-decoration: none;
width: 90%;
}
#nav li a:link, #nav li a:visited {
color: #333;
background: transparent url(docbullet.gif) 0px 3px no-repeat;
}
#nav li a:hover {
color: #44F;
background: transparent url(docbullet2.gif) 0px 3px no-repeat;
}
#nav li a span { display: none; }
#nav li a:hover span {
display: block;
position: absolute;
top: 180px;
left: 20px;
width: 100px;
height: 30px;
padding: 5px;
border: 1px solid black;
background-color: #D0E0FF;
color: black;
}
</style>
</head>

<body>

<div id="nav">
<ul>
<li><a href="#">Document 1<span>PDF file for document 1.</span></a></li>
<li><a href="#">Document 2<span>A different text.</span></a></li>
<li><a href="#">Document 3<span>Yet something different.</span></a></li>
<li><a href="#">Document 4 has an extremely long link in order to make sure it wraps around<span>Popup text for document 4.</span></a></li>
<li><a href="#">Document 5<span>PDF file for document 5.</span></a></li>
</ul>
</div>

</body>
</html>

 

moonbiter




msg:1219423
 2:27 pm on Oct 1, 2003 (gmt 0)

Weirdly, if you explode the following rule:

#nav li a:link, #nav li a:visited {
color: #333;
background: transparent url(docbullet.gif) 0px 3px no-repeat;
}

like so:

#nav li a:link, #nav li a:visited {
color: #333333;
background-color: transparent;
background-image: url(docbullet.gif);
background-position: 0px 3px;
background-repeat: no-repeat;
}

and comment out either the background-color or the background-position properties, it seems to work. At least in MSIE 6 SP1. This smells like a bug to me.

p.s., if the links in your list are the only links in this div, you do not need the li in the above selectors. #nav a:link, #nav a:visited will work, since contextual selectors like this are based on ancestor-descendent relationship [w3.org], and not a parent-child relationship. You don't have to walk the element tree all the way down to the tag you want.

SuzyUK




msg:1219424
 2:51 pm on Oct 1, 2003 (gmt 0)

Yes it is a bug and has been documented here [webmasterworld.com]

Although you seem to have found another trigger combination.. or at least it seems it doesn't recognise the fact that the hover background-image is different.


#nav li a:hover {
color: #44F;
background: transparent url(docbullet2.gif) 0px 3px no-repeat;
}

I thought it was triggered on color alone, but this suggests that background-image will not be a workaround either.. I tried changing the background position by 1px and that was enough to bring the popup back.. also I changed transparent to white and that brought it back.. so IMAGE is not a workaround.. so you need to apply one of the other workarounds

So if you read that other thread, that is the cause, and adding a default property to the hover rule should fix it..

say: position: static; or text-indent: 0; something that it is effect by default, anyway..

Suzy

frank_stahl




msg:1219425
 7:23 am on Oct 2, 2003 (gmt 0)

moonbiter and SuzyUK,

thanks a lot. It works! You guys rock! :-)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved