Forum Moderators: not2easy
In FF there is some space between the buttons and the rest of the website, IE has the same problem.
Also, de menu doesn't work in IE6, I followed the instructions on the suckerfish menu website but I still seem to do something wrong :/
Can anyone help?
[code sample added]
HTML:
<body>
<table id="Table_01" width="850" border="0" cellpadding="0" cellspacing="0">
<tr><td>
<ul id="nav" class="style1">
<li><a href="#"><img src="home.gif" border="0"></a>
<ul>
<li><a href="#"><img src="overOnsDrop.gif" border="0"/></a></li>
<li><a href="#"><img src="agendaDrop.gif" border="0"/></a></li>
<li><a href="#"><img src="extraDrop.gif" border="0"/></a></li>
<li><a href="#"><img src="contactDrop.gif" border="0"/></a></li>
<li><a href="#"><img src="linksDrop.gif" border="0"/></a></li>
</ul>
</li>
</ul>
</td></tr>
<tr><td><img src="../belowNav.gif" width="850" height="12" alt=""></td></tr>
</table>
</body>CSS:
ul {
padding: 0;
margin: 0;
list-style: none;
width: auto;
}
li {
float: left;
position: relative;
width: auto;
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul{ display: block; clear: left;}script:
<script type="text/javascript"><!--//--><![CDATA[//>
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]>
</script>
[edited by: SuzyUK at 11:24 am (utc) on Jan. 29, 2007]
[edit reason] removed URL's and replaced with code [/edit]
I removed the URL's and screenshots as per the TOS [webmasterworld.com], but I added some sample code from your site, if you give that summarised code a try I think you might find what's happening menu in IE ;)
Often the act of simplifying the code HTML & CSS (though I only reduced the HTML to just one drop) helps diagnose problems, also when building menu's with images it might help to take the images out and just background colors for a start? that way if problems turn up at each stage you know what's caused it?
fwiw I also recommend when building drop menus that you do so do in a separate file until it's working as you like..
Give that a go and let us know
Cheers
Suzy
clear: left;then if you make the <img> itself into a block item -
li img {display: block;}Suzy
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}#nav a {
display: block;
width: 0em;
}
#nav li { /* all list items */
float: left;
width:4em; /* width needed or else Opera goes nuts */
}
#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
The width of the menu needs to be 850 px, but if I change the "width:4em;" into "width:850px;" something weird happens.
