Grow your CSS skills. Land your dream job.

Frustrating IE 6.0 problem – can anyone help?

  • # May 15, 2009 at 6:33 am

    Hey all – I’m new to this forum :)

    I’ve launched a website http://barryslaven.com that seems to load up fine in every browser except IE 4, 5 and 6

    The problem is with the navigation links at the top of the page – they seem to resize and align really awkwardly.

    I don’t have a pc or access to IE 5.5 so I’m trying to update this page using browsershots.org which takes a while to load.

    Are there any experienced CSSers out there who can point me in the right direction? Why is this happening?

    Thanks

    Gavin
    [attachment=0]MSIE 5.5.png[/attachment]

    # May 15, 2009 at 6:46 am

    try using a display:inline-block to all a in nav
    #navbar_div a { display:inline-block; float:left; }

    # May 16, 2009 at 4:45 am

    Hi Nickstr – thanks for the suggestion but it doesn’t seem to make a difference either way.

    :S

    It’s weird bacuse IE is also making the images appear much larger than they actually are!?

    # May 16, 2009 at 5:22 am

    You should really be using an unordered list for your navigation, with plain text links and then using css to replace the text with your images.

    That aside, give your images their proper dimensions.
    eg.

    Code:
    home

    about

    # May 17, 2009 at 7:26 pm

    Thanks for your reply apostrophe

    I’ve tried a couple of techniques here – I had originally used an unordered list but IE 6 doesn’t seem to acknowledge that the list items should be floated – instead they just stack vertically.

    Implicityly stating the dimensions of each image as attributes in the HTML has solved the problem of the image sizing.

    Anyone have any idea with the list items are not floating left?

    CSS
    #navbar_div{
    width: 912px;
    margin: 0 auto;
    height: 1.2em;
    clear: both;
    background: #F9F9F9;
    padding: 0.6em 0 0.6em;
    }
    #navlist>li{
    float:left;
    margin: 0 1em;
    }

    html
    <div id="navbar_div">
    <ul id=’navlist’>
    <li id="home_li">
    <a href="/">
    <img alt="Home" height="16px" src="/images/nav_images/home_hover.png?1242303421" width="72px" />
    </a>
    </li>


    </ul>
    </div>

    # May 17, 2009 at 7:59 pm
    Code:
    #navlist>li{

    That’s your problem.

    Don’t use the child designation, as IE doesn’t like them; just use spaces:

    Code:
    #navlist li{
    # May 17, 2009 at 10:40 pm

    You might also want to add:

    Code:
    ul#navlist li {
    float:left;
    margin:0 1em;
    display:inline;
    }
    # May 20, 2009 at 9:36 am

    Awesome!

    I didn’t realise IE doesn’t cope with child selectors!

    Page seems to look fine in most browsers now

    Thank you both for you help!

    :)

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

You must be logged in to reply to this topic.

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