View Full Version : IE css spacing problem

11-29-2007, 04:21 AM
can anyone tell me what I need to adjust so that the last tab of my nav menu isn't pushed into an different line? It displays properly in FF but not in IE. There are already some IE hacks in the css but something must be off with widths?


/* 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 #949e7c; border-width:0 1px 1px 1px;}
/* style the second level hover */
.menuB ul ul a.drop:hover{background:#e2dfa8; color:#120e0f;}
.menuB ul ul :hover > a.drop {background:#e2dfa8;}
/* 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:#e2dfa8;}
.menuB ul ul ul :hover > a {background:#e2dfa8;}

/* 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;}

/* 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;}

/* CSS Document */

11-29-2007, 02:26 PM
Looks exactly the same for me in IE and FF.

11-29-2007, 02:35 PM
Yes it does on my other machine. I was looking at it thru a 'stand alone' version of IE which I think has issues with my css and doesn't display properly. Do you see anything that you dislike? Thanks,

11-29-2007, 03:01 PM
No, it looks prefect to me :)