PDA

View Full Version : IE css display issue


dsnyder
02-18-2008, 02:46 PM
I have just noticed that my nav drop down menu is not showing correctly in IE.
The 5th button 'SERVICES' should be to the far right. It is being bumped down to a new line. Didn't used to do this so I must have changed something in the CSS without realizing.

http://cellocelli.com/sheetmusic.solo.htm

Any help for you masters would be most appreciated! BTW, the nav menu is within a #wrapper with a width of 740px.

(from cssplay.com)

/* style the outer div to give it width */
.menuB {width:740px; font-size:0.85em;padding-bottom:100px;}
/* remove all the bullets, borders and padding from the default list styling */
.menuB ul {padding:0;margin:0;list-style-type:none;}
.menuB ul ul {width:148px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menuB li {float:left;width:148px;position:relative;}
/* style the links for the top level */
.menuB a, .menuB a:visited {display:block;font-size:11px;font-weight:bold;text-decoration:none; color:#E7E4BB; width:137px;
height:20px; border:1px solid #666; border-width:0 1px 1px 1px; background:#000; padding-left:10px; line-height:19px;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menuB a, * html .menuB a:visited {width:148px;width:137px;}

/* style the second level background */
.menuB ul ul a.drop, .menuB ul ul a.drop:visited {background:#e2dfa8; border:1px solid #666; border-width:0 1px 1px 1px; font-weight:bold;}
/* style the second level hover */
.menuB ul ul a.drop:hover{background:#fff; color:#120e0f;}
.menuB ul ul :hover > a.drop {background:#fff;}
/* style the third level background */
.menuB ul ul ul a, .menuB ul ul ul a:visited {background:#e2dfa8;}
/* style the third level hover */
.menuB ul ul ul a:hover {background:#fff;}
.menuB ul ul ul :hover > a {background:#fff;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menuB ul ul {visibility:hidden;position:absolute;height:0;top: 21px;left:0; width:148px;}
/* another hack for IE5.5 */
* html .menuB ul ul {top:20px;top:21px;}

/* position the third level flyout menu */
.menuB ul ul ul{left:148px;top:0;width:148px;}
/* position the third level flyout menu for a left flyout */
.menuB ul ul ul.left {left:-148px;}
/* position the third level flyout menu for a right flyout */
.menuB ul ul ul.right {right:-148px;}

/* style the table so that it takes no part in the layout - required for IE to work */
.menuB table {position:absolute; top:0; left:0;}

/* style the second level links */
.menuB ul ul a, .menuB ul ul a:visited {
background:#e2dfa8;font-weight:normal; color:#120e0f; height:auto; line-height:1em; padding:5px 10px; width:127px
/* yet another hack for IE5.5 */
}
* html .menuB ul ul a{width:148px;width:127px;}

/* style the top level hover */
.menuB a:hover, .menu ul ul a:hover{color:#120e0f; background:#e2dfa8;}
.menuB :hover > a, .menu ul ul :hover > a {color:#120e0f;background:#fff;}

/* make the second level visible when hover on first level list OR link */
.menuB ul li:hover ul,
.menuB ul a:hover ul{visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menuB ul :hover ul ul{visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menuB ul :hover ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menuB ul :hover ul :hover ul{ visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menuB ul :hover ul :hover ul :hover ul { visibility:visible;}
/* CSS Document */

domedia
02-18-2008, 02:50 PM
Did you get this solved? Looks great in my IE.

dsnyder
02-18-2008, 03:44 PM
thanks dmedia. No I haven't done anything. In my IE 6.0 and a buddies IE 6.0 it displays the SERVICES drop down below the STORE. When this happens, the STORE drop down and fly out don't work. IE 7 on my laptop show it fine. FF is always well behaved. My IE 6 may be a 'stand alone' version which I've heard has some display issues. But I don't think my buddies IE 6 is. Any ideas?

domedia
02-18-2008, 04:23 PM
Yes it showed fine in my IE7 as well. Contact the site/resource you got this from. It's using some CSS 'hacks' (well not real CSS hacks, but using techniques with limited browser support), so it's a custom made menu. Looking at the source it's it's not apparent which approach the developer chose.

kate
03-04-2008, 04:58 PM
Its out on my 1680x1050 WinXP .e6

This link may be helpful for floats etc:

http://www.gunlaug.no/contents/wd_example_01.html

Not that its not helpful at domedia just another take on the problem.

:mrgreen:

kate
03-04-2008, 05:13 PM
Please go to the W3C Validator,

Because you have 82 errors..oh my golly gosh even I only have 21...:( but I think mine is the way Wordpress is coded.

At the same time put in your fav search engine W3C CSS validator at least mine passed that.

Its so disheartening when Validator makes such reports.

http://validator.w3.org/

Have you also tried the site in Firefox?

:x