Hi everybody,
the attached portion of code generates a classic rollover menu through
CSS.
The menu works normally.
I'd like to display a small 8x8 pixels icon nearby some menu items,
basically those referring to
external links. On Firefox and Konqueror everything works perfectly.
On IE (6, at the least) however, the menu options with the icon are
displayed with a "wrong"
height. I can't explain it better than this, just try the following
code by including a 8x8 icon
as menu_extlink.gif.
If I remove the icon (display:none), the height is correct again.
Any hints?
Thanks in advance
Claudio
================================================== ========================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<style type="text/css">
body {
margin:0; padding:0; width:100%;
font-family:Arial,Helvetica,sans-serif;
}
a { background-color:transparent; color:#B00;
text-decoration:underline; }
a img { border:none; }
#latosx {
vertical-align:top; margin:0; width:20%;
font:normal .75em Arial,Helvetica,sans-serif;
background-color:#EDF1FA; color:#000;
position:absolute; left:0; top:0;
}
#latosx ul { list-style:none; margin:0; padding:0; }
#latosx li { border-bottom:1px solid #CCC; margin:0; }
#latosx ul { background-color:#EDF1FA; color:#000; }
#latosx li { line-height:1.75em; padding:0; }
li.menusx-l1-cur { color:#447; background-color:#fff; font-weight:bold;
}
li.menusx-l1-no { color:#fff; background-color:#447; font-weight:bold;
}
span.menusx-l1-cur, span.menusx-l1-no { display:block; margin:0em 2%; }
li.menusx-l2-no { width:100%; background-color:#EDF1FA; color:#000;
display:block; }
li.menusx-l2-no a {
display:block; padding:0em 2%; text-decoration:none;
font-weight:normal;
width: 96% !important;
width /**/: 100%;
}
li.menusx-l2-no a:visited { background-color:#EDF1FA; color:#600; }
li.menusx-l2-no a:hover, li.menusx-l2-no a:active {
background-color:#FF6; color:#000; text-decoration:none; }
li.menusx-l2-no a img {
/*display:none;*/ margin-left:.5em;
}
</style>
</head>
<body>
<div id="latosx">
<ul>
<li class="menusx-l1-cur"><span
class="menusx-l1-cur">Home</span></li>
<li class="menusx-l2-no"><span><a
href="contacts.html">Contacts</a></span></li>
<li class="menusx-l2-no"><span><a
href="phonebook.html">Phonebook</a></span></li>
<li class="menusx-l2-no"><span><a href="http://www.w3c.org">W3C
site<img src="menu_extlink.gif" alt="External URL" width="8" height="8"
/></a></span></li>
<li class="menusx-l2-no"><span><a href="http://validator.w3.org">W3C
validator<img src="menu_extlink.gif" alt="External URL" width="8"
height="8" /></a></span></li>
</ul>
</div>
</body>
</html>
