Grow your CSS skills. Land your dream job.

floated element position problem in ie6

  • # November 11, 2008 at 9:15 am

    Hello!
    Here’s my html:

    and here’s my css:

    Code:
    @charset “utf-8″;

    * {
    padding: 0;
    margin: 0;
    }

    body {
    font: 13px/1.9em Tahoma;
    }

    a {
    color: #639000;
    text-decoration: underline;
    }

    a:hover {
    text-decoration: none;
    }

    #header {
    width: 100%;
    background: url(images/header_bg.gif) repeat-x;
    height: 76px;
    }

    #top_nav {
    float: right;
    }

    #top_nav ul {
    margin: 25px 30px 0 0;
    }

    #top_nav li {
    background: url(images/bullet.gif) no-repeat left center;
    float: right;
    margin-left: 10px;
    padding-left: 20px;
    list-style: none;
    }

    #top_nav li a {
    color: #FFF;
    text-decoration: none;
    font-size: 10px;
    }

    #header h1#logo {
    float: left;
    padding: 10px 0 0 20px;
    }

    #header h1#logo a {
    display: block;
    width: 196px; height: 46px;
    background: url(images/logo.gif) no-repeat;
    overflow: hidden;
    text-indent: -9999px;
    }

    .clear { clear: both; }

    in IE 6, it looks like this:
    [img]http://saheran.persiangig.com/ie6-screenshot.jpg[/img]
    well, in FF it looks nice.
    Why in IE the floated element shows out of the header?

    # November 12, 2008 at 6:19 am

    You’ve gotta add a with to the id of top_nav. The reason for this is because divs by default take up 100% of the screen unless specified.

    The top_nav div is taking up 100% so the other divs are being pushed below it.

    Eg. put this in a new html document.
    <div id="hello" style="background-color: #333;">Try</div>

    # November 12, 2008 at 8:42 am

    Thanks! Problem resolved! Still, it seems a bit odd to me. When you float elements, no matter how much is there width, they overlap together not push together away. Though, it rendered well in FF. Should I know it as an IE like-ever bug?! :D
    Thank you.

    # November 12, 2008 at 11:42 am

    :D I hmm not sure how it would really have to be either be elastic and "take the width it’s given" or 100% of the screen no matter what unless defined.

    Anyay no probs happy coding ^^

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".