SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot mcahill's Avatar
    Join Date
    May 2002
    Location
    Manchaug, MA, USA
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird IE7 List Indent Problem

    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

    PHP Code:
    #nav {
    width170px;
    height240px;
    background-color#9BD1EE;
    margin-leftauto;
    margin-rightauto;
    }
    #nav ul {
    list-style-typenone;
    padding-top8px;
    }
    #nav li {
    width170px;
    height39px;
    list-
    style-imagenone;
    margin-left: -35px;
    margin-bottom: -10px;
    background-image:url(images/nav_button.gif);
    background-repeat:no-repeat;
    padding-left10px;
    }
    #nav li a, #nav li a:visited {
    color#000033;
    font-size9pt;
    text-decorationnone;
    font-weightbold;
    }
    #nav li a:hover {
    color#990000;
    text-decorationunderline;
    }
    #navbottom {
    height15px;
    margin-left: -3px;
    margin-top: -10px;

    PHP Code:
     <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?
    mcahill
    Reel-Time.com - Saltwater Fly Fishing
    The Vario Blog
    VarioCreative.com 1 2 3 4 5 6 7

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For IE7, set hasLayout by adding min-height:1% in #nav ul
    Your layout is broken in ie6.

  3. #3
    SitePoint Zealot mcahill's Avatar
    Join Date
    May 2002
    Location
    Manchaug, MA, USA
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks...

    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
    Reel-Time.com - Saltwater Fly Fishing
    The Vario Blog
    VarioCreative.com 1 2 3 4 5 6 7

  4. #4
    SitePoint Zealot mcahill's Avatar
    Join Date
    May 2002
    Location
    Manchaug, MA, USA
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Now IE 6 has the same problem...

    Hmmm...min-height didn't fix IE 6. Any suggestions?
    mcahill
    Reel-Time.com - Saltwater Fly Fishing
    The Vario Blog
    VarioCreative.com 1 2 3 4 5 6 7

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
                <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.

    Code:
    #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&#37; hack instead. See the FAQ on haslayout for more information.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •