Grow your CSS skills. Land your dream job.

IE Min-Width Problems…

  • # June 16, 2010 at 4:41 pm

    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.

    # June 16, 2010 at 5:02 pm

    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.

    # June 17, 2010 at 3:54 am

    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.

    # June 17, 2010 at 10:16 am

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".