IE Min-Width Problems…

[Capt Otis]

Hello all,

I can’t find my way around this one, and google hasn’t been much help. Building a css menu using nested lists that is rendered dynamically from xml. All working like a charm. Problem is the width of the drop downs.

I have them set as a min-width of 14em. When I have a menu option that is bigger than that, the <ul> automatically resizes itself to fit the length. Working fine in every browser, except ie (of course). IE will only increase the size of the li’s that need it, not the entire ul.

Hover over an option on the Information tab (except for the first option, which is the one that forces the resize) to see what I mean… only part of the box becomes highlighted. Just and annoyance.

Menu CSS:

Code:

#menu {
width:940px;
height:30px;
text-align:left;
background-image:url(http://v2.harrisonhigh.org/_style/images/menubg.jpg);
background-repeat:repeat-x;
font-weight:bold;
font-family:Tahoma, serif, “Times New Roman”;
font-size:15px;
margin-bottom:5px;
z-index:1000;
}
#navT {
float: left;
width: 100%;
height:25px;
list-style:none;
font-weight: bold;
padding: 0px 0px 0px 10px;
margin: 0;
background: none;
text-align:left;
cursor:pointer;
border:none;
outline:none;
display:inline;
}
#navT ul {
margin:0;
padding:0;
list-style:none;
border:none;
}

#navT a {
display: block;
font-family:Tahoma, serif, “Times New Roman”;
font-size:13px;
color: #FFFFFF;
text-decoration: none;
padding: 0.3em 1.9em;
margin:0;
width:100%;
height:100%;
}

#navT li ul a {
height:100%;
}

#navT li .daddy {
background:url(http://v2.harrisonhigh.org/_style/images/rightarrow2.gif) right no-repeat;
width:78%;
}

#navT li {
float: left;
padding: 0;
border:none;
}

#navT li ul, #menu_last { /*entire and all drop downs 1st level*/
position: absolute;
left: -999em;
height: auto;
min-width:14em;
font-weight: normal;
margin: 0em;
padding:0;
display:block;
background-image:none;
background-color:#5381ac;
border: 1px solid #165487; /*dropdown menu border*/
z-index:1005;
overflow:visible;
}

#navT li ul li { /*each option of level 1 drop down*/
height:auto;
min-width:14em;
float:none;
margin:0;
padding:0em;
display:block;
}

#navT li ul a {
margin-left:.01em;
display:block;
width:100%;
}
#navT li ul li ul { /*entire drop down level 2*/
margin: -2.1em 0 0 14em;
z-index:1006;
margin-top:-1.6em;
min-width:14em;
}
#navT li ul li ul li { /*drop down level 2*/
width:auto;
}
#navT li:hover ul ul, #navT li:hover ul ul ul, #navT li:hover ul .daddy:hover ul {
left: -999em;
display:block;
}

#navT li:hover ul, #navT li li:hover ul, #navT li li li:hover ul {
left: auto;
display:block;
}

#navT li:hover {
background: #225588;
cursor:pointer;
}

#navT li#faculty {
position: relative;
z-index:1000;
}

#navT ul#menu_last {
position: absolute;
right: 0;
display:block;
width:10em;
}
#navT #menu_last li a {
width:10em;
left:0;
display:block;
}

Thanks for the help.

[TheDoc]

Hmmmmm… seems to be working fine for me in IE7 and IE8.

In IE6, it’s a bit of a tornado – the menu doesn’t show at all.

[birdrockdesigns]

If your issue is with IE6, ‘min-width’ has no effect – the browser doesn’t recognize this CSS property. You have to use ‘width’.

I don’t see any issues in IE7 or IE8.

[Capt Otis]

I’m working on a separate css file for IE 6, so don’t worry about that now.

Here’s a picture to describe my problem…

[img]http://v2.harrisonhigh.org/cssproblem.jpg[/img]

See how the dark highlight color doesn’t span the entire width? I know why this is happening, just not how to fix it. IE resizes the unordered list to fit the biggest list item. It doesn’t resize the other list items to fit that width though, like all other browsers. 100% doesn’t work because there is no defined width, only a min-width.

Thanks guys

[Author]

Posts