Welcome to WebmasterWorld Guest from 54.221.9.6

Forum Moderators: not2easy

Message Too Old, No Replies

Css dropdown menu good in firefox, problem in IE

submenu aligned at right why?

     
8:19 pm on Feb 19, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 20, 2003
posts:1741
votes: 0


I have a pure css dropdown menu. Looks ok in firefox but in IE the subitems are shifted to the right...

I'm sure I must add something to make IE show it properly (just at bottom of main link as expected)

HTML partial code


<div id="navcontainer">
<ul id="navlist">
<li><a href="/xx.htm">XX</a></li>
<li id="active"><a href="/xx.htm" id="current">XY</a>
<ul id="subnavlist">
<li id="subactive"><a href="/yy.htm" id="subcurrent">YY</a></li>

Css code:


ul#navlist {
BORDER-TOP: #FFCC00 3px solid;
BORDER-bottom: #FFCC00 3px solid;
FONT-SIZE: 11px;
BACKGROUND: #009900;
WIDTH: 100%;
FONT-FAMILY: verdana, arial, sans-serif;
color: #FFFFFF;
line-height:19px;
height:20px;
}

ul#navlist a
{
text-decoration: none;
color: #FFFFFF;
width:auto;
padding-left:20px;
BORDER-right: #FFCC00 1px solid;

}

ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 0px;
padding: 0px;
list-style-type: none;

}

ul#navlist li { float: left; }

ul#navlist li a
{

width:auto;
padding:10px;
TEXT-DECORATION: none
color: #ffffff;
background-color: #009900;
padding: 3px;
/*border: 1px #ffffff outset;*/

}

ul#navlist li a:hover
{
color: #ffff00;
background-color: #669966;
}

ul#navlist li a:active
{
color: #cccccc;
background-color: #669966;
/*border: 1px #ffffff inset;*/
}

ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }

ul#subnavlist li a
{
padding: 0px;
margin: 0px;
}

ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}

ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 14em;
border: none;
padding: 2px;
}

/*ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }*/
ul#navlist li:hover ul#subnavlist li

9:15 pm on Feb 19, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts:1526
votes: 0


It doesn't even work for me in IE6/XP. No dropdown. In FF/Mac, only the second menu drops down.

I only modified the code by closing the lists and the div. I didn't change the CSS at all.

<div id="navcontainer">
<ul id="navlist">
<li><a href="/xx.htm">XX</a></li>
<li id="active"><a href="/xx.htm" id="current">XY</a>
<ul id="subnavlist">
<li id="subactive"><a href="/yy.htm" id="subcurrent">YY</a></li>
</ul>
</li>
</ul>
</div>
9:40 pm on Feb 19, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 20, 2003
posts:1741
votes: 0


Hi, yes, sorry I just copied first part of html, to avoid making the post so long. It does work for me but in IE shifts the items to the right...
4:18 pm on Feb 20, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


hi sb,

Yes you do need to add something for IE to fix its positioning - you need to make the ALL the <a>nchors into display block items throughout the navlist.

As it is just now you are taking the float off the drop list items in order to make the lists go vertical again and although you would think that that would make the second list go back to where it should be (under its parent li) - IE has other ideas it gets confused when postioning beside floats and it positions the child list to the right of the floated parent with a 3px jog included!

Making the <anchors> in the parent list

display: block;
fixes the positioning problem, BUT it then invokes some hasLayout errors which are different between IE6 and IE7 :(

IE7 is fine apart from a bit of stickiness I encountered which has a simple global fix, so I won't go into the rest as they may not apply for your needs - here's a working version of what you have above for IE7/FF etc. And this is your code from above I just tidied it removed duplicate/unnecessary rules etc.. the bits I've added are clearly marked in the source.

I'll stop here and let you play around with it, and I am aware that it might throw display/hasLayout errors when you add IE6 into the mix (I presume you're using a script to get hover to work for it?)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css" media="screen">
ul#navlist {
border-top: 3px solid #fc0;
border-bottom: 3px solid #fc0;
font-size: 11px;
background: #009900;
width: 100%;
font-family: verdana, arial, sans-serif;
color: #fff;
line-height:19px;
/* height:20px; this is not 'containing' the floats in FF/Opera and might add to positioning differences */

overflow: hidden; /* my added - this is */
float: left; /* my added - or so would this */
}

ul#navlist, ul#navlist ul, ul#navlist li {
margin: 0px;
padding: 0px;
list-style-type: none;
}

ul#navlist li a {
width:auto;
text-decoration: none;
color: #fff;
background-color: #090;
padding: 3px;
margin: 0;
border-right: 1px solid #fc0;

/* my added below */
display: block; /* this fixes IE's positioning */
}

ul#navlist ul li a {
padding: 2px;
width: 14em;
display: block;
border: 0;
}

ul#navlist li a:hover {
color: #ff0;
background-color: #696;
}

ul#navlist li a:active {
color: #ccc;
background-color: #696;
}

ul#navlist ul { display: none; }
ul#navlist li { float: left; }
ul#navlist ul li { float: none; }

/* added this hover rule before extended hover rule IE7 was 'sticky' in some tests */
/* as a rule you should always have a hover rule before expanding on it as it causes many different IE errors */
ul#navlist li:hover {text-indent: 0;}
ul#navlist li:hover ul {
display: block;
position: absolute;
/* padding-top: 5px; it should be 3px to match bottom border but don't use padding it causes more problems for IE */

/* use border instead of padding to get child to overlap parent with better connectivity */
border-top: 3px solid #000; /* should be same color as bottom border above but this is for visual */
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">top1</a>
<ul>
<li><a href="#">drop1:1</a></li>
<li><a href="#">drop1:2 long</a></li>
</ul>
</li>
<li><a href="#">top2</a>
<ul>
<li><a href="#">drop2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Once you have your desired widths/formats if you are still having problems or new ones with IE6 give us a shout back

Suzy

6:39 pm on Feb 20, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 20, 2003
posts:1741
votes: 0


Thank you. Tried that. works ok in IE7 only...

It doesnt' work in IE6 any version (menu don't drops down)

It doesn't work in firefox. The result: moves the whole page content to the right of menu, causing the browser to scroll some 1000 px to the right!
This bug can be fixed adding in html this: <div style="clear:both"></div> (is it possible to add that to css to make things easier?)

BTW noticed that 90% of my visitors uses IE 6.x sadly and 10% are firefox or IE7...

11:44 pm on Feb 20, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


It doesnt' work in IE6 any version (menu don't drops down)

I did make mention in an earlier post about scripts, but perhaps I thought you just knew [webmasterworld.com] sorry ..

li:hover
will not work in IE 6 or below without some form of script, the
:hover
pseudo class is just not supported on any element other than an <a> in IE6 and below. There are various methods, a javascript (like suckerfish) or a behaviour file (like csshover.htc) however even getting the hover to work via a script doesn't make IE's CSS differences disappear. First you need to choose a method to force the hovers to work in IE6 then the CSS can be picked over and you need to use the right doctype

re: it not working in FF then that means there's something else on the page that is wrong or positioning is not set properly. Is it working for FF on a standalone page?

I alway recommend geting an "fancy" menu working off page first if you then move into a page with other content and encounter problems it is down to something else on the page (other positiong co-ordinates may have to be taken into account?) but at least the menu code itself doesn't have to be debugged too.

[edited by: SuzyUK at 11:50 pm (utc) on Feb. 20, 2007]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members