Weird IE7 List Indent Problem

[mcahill]

For some reason, my first li in my nav is not responding to the negative margin I set for it. All the others are. I haven't been able to figure it out.

http://www.laserdocs.com/new/index.asp

#nav {
width: 170px;
height: 240px;
background-color: #9BD1EE;
margin-left: auto;
margin-right: auto;
}
#nav ul {
list-style-type: none;
padding-top: 8px;
}
#nav li {
width: 170px;
height: 39px;
list-style-image: none;
margin-left: -35px;
margin-bottom: -10px;
background-image:url(images/nav_button.gif);
background-repeat:no-repeat;
padding-left: 10px;
}
#nav li a, #nav li a:visited {
color: #000033;
font-size: 9pt;
text-decoration: none;
font-weight: bold;
}
#nav li a:hover {
color: #990000;
text-decoration: underline;
}
#navbottom {
height: 15px;
margin-left: -3px;
margin-top: -10px;
} 

 <ul>
            <li><a href="massachusetts_tattoo_removal.asp">Tattoo Removal</a></li>
            <li><a href="http://www.thesnoringcenter.org">Snoring Treatment</a></li>
            <li><a href="massachusetts_vein_treatment.html">Leg Vein Treatment</a></li>
            <li><a href="massachusetts_vein_treatment.html">Facial Vein Treatment</a></li>
            <li><a href="massachusetts_wrinkle_treatment.html">Wrinkle Treatment</a></li>
            <li><a href="massachusetts_cosmetic_surgery.html">Cosmetic Surgery</a></li>
           <li><a href="massachusetts_cosmetic_surgeons.html">Meet the Doctors</a></li>
           <li><a href="contact.asp">Contact Us</a></li>
 
        </ul> 

Can anyone see where I've gone wrong?

[Dan_A]

For IE7, set hasLayout by adding min-height:1% in #nav ul
Your layout is broken in ie6.

[mcahill]

That did the trick. Much appreciated.

Yeah, I'm working through the browsers now. I start with FF, then IE7 then move onto IE 6 - now it's IE6's turn. Usually by this point, IE6 isn't too bad...

[mcahill]

Hmmm...min-height didn't fix IE 6. Any suggestions?

[Paul O'B]

Hi,

You seem to have a lot of weird things going on there

Why are you setting a 39px height and then adding a minus 25px bottom margin?

Also you can't put breaks between the list tags as it is invalid. All content must go inside the li pair and no content can be in between the tags themselves. You don't need breaks anyway as you could simply use margins on the list anyway.

            <div id="nav">
                <ul>
                    <li><a href="massachusetts_tattoo_removal.asp">Tattoo Removal</a></li>
                    <li><a href="http://www.thesnoringcenter.org">Snoring Treatment</a></li>
                    <li><a href="massachusetts_vein_treatment.html">Leg Vein Treatment</a></li>
                    <li><a href="massachusetts_vein_treatment.html">Facial Vein Treatment</a></li>
                    <li><a href="massachusetts_wrinkle_treatment.html">Wrinkle Treatment</a></li>
                    <li><a href="massachusetts_cosmetic_surgery.html">Cosmetic Surgery</a></li>
                    <li><a href="massachusetts_cosmetic_surgeons.html">Meet the Doctors</a></li>
                    <li><a href="contact.asp">Contact Us</a></li>
                </ul>
            </div>

I'm not exactly sure where you were going with this but it looks like you don't need any of those ie hacks if you do it right first time.

#nav {
width: 170px;
height: 240px;
background-color:#9BD1EE;
margin:10px 0 0 15px;
}
#nav ul {
    list-style-type: none;
    padding: 8px 0 0 0;
    width:150px;
    margin:0 0 0 7px;
}
#nav li {
width: 150px;
height: 20px;
margin:2px 0;
list-style-image: none;
/*margin-bottom: -30px;*/
background-image:url(http://www.laserdocs.com/new/images/nav_button.gif);
background-repeat:no-repeat;
padding-left: 10px;
}

You will need to tweak that to suit but it should give you the general idea.

Remember to control the margins and padding on all the elements you use. For example mozilla usually has a default 1em top and bottom margin for most elements whereas IE only puts a bottom margin on them. On lists some browsers use default left padding for the bullet space and some use a default left margin. Therefore for all elements you need to control all 4 margin and padding settings explicitly.


Hope that helps

BTW min-height only forces IE7 into "haslayout" mode. IE6 and under are used forced into "haslayout" mode using the height:1% hack instead. See the FAQ on haslayout for more information.