Incorrect appearance in internet explorer

Question

I'm getting incorrect look in internet explorer 7,6, etc. It started when I added float: right; to #social-share div tag. I tried setting display: inline-block; to it and clear: both; but nothing worked for me.

You can see the issue live. Here is my code:

HTML

<header>
    <div id="inner-border">
            <div id="header-wrapper">
                <a href="index.php" alt="Bryuvers Majas Lapa" id="logo"></a>
                <div id="social-share">
                    <!-- AddThis Button BEGIN -->
                    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
                    <a class="addthis_button_preferred_1"></a>
                    <a class="addthis_button_preferred_2"></a>
                    <a class="addthis_button_preferred_3"></a>
                    <a class="addthis_button_preferred_4"></a>
                    <a class="addthis_button_preferred_5"></a>
                    <a class="addthis_button_compact"></a>
                    <a class="addthis_counter addthis_bubble_style"></a>
                    </div>
                    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4db8643a1c09a1ff"></script>
                    <!-- AddThis Button END -->
                </div>
            </div>
    </div>
</header>

CSS

header {
    width: 100%;
    height: 115px;
    background: #120c09;
    margin: 50px 0 0 0;
    border-top: 1px solid #100b07;
    border-bottom: 1px solid #100b07;
}

#inner-border {
    width: 100%;
    height: 103px;
    margin: 5px 0 0 0;
    border-top: 1px dashed #291a10;
    border-bottom: 1px dashed #291a10;
}

#header-wrapper {
    width: 900px;
    height: 103px;
    margin: 0 auto;
}

#logo {
    height: 230px;
    width: 205px;
    position: absolute;
    z-index: 99;
    margin: -57px 0 0 0;
    background: url("../images/logo.png") no-repeat;

    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s;
}

#logo:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
}

#logo:active {
    margin: -55px 0 0 0;
}

#social-share {
    width: 280px;
    float: right;
    margin: -47px 0 0 0;
    color: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    opacity: 0.2;

    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s;
}

#social-share:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    opacity: 0.8;
}

---

This is correct look:

This is inncorrect look (ie7, 6)

Ignore css3 related stuff, the problem is that in ie 7,6 everything is squeezed to the top and search bar appears in the middle instead of on the right.

Answer 1

Your top nav is breaking up in IE7 because it is not properly defined what goes where and how. First, your logo is sort of "floating" inside of your document, since it is positioned absolutely with no point of reference in its container, so lets start by fixing that;

Add position:relative to your #header-wrapper CSS rule so we can properly contain your logo within its boundaries:

#header-wrapper {
  position:relative;
}

Next, we have to rearrange your logo to properly sit in the middle of your #header-wrapper div. Previously you were using margin: -57px auto 0 auto; to align your logo but since you are already absolutely positioning it you don't really need margin at all (a miracle it was even working at all), so let's do some mathematics to absolutely position your logo in the middle of your header wrapper div:

First, we eliminate that margin declaration and replace it with the following:

#logo {
    left: 50%;
    top:-57px;
    margin-left: -102.5px;
}

Now, what did we do here? First we pushed your logo 50% from the left and then pushed it back with a negative margin by -102.5 pixels. Why did we do this? Because the left declaration pushes your element with width added to the calculation, so the push actually means "50% to the left + width of your element", so, we use the negative margin to compensate for the width, 50% - width/2. Here is a better explanation of the process.

After the two changes I listed are complete, you will find that the logo sits behind your slideshow area, this is due to the ie7 z-index bug and the fix is actually very simple:

header {
    position:relative;
    z-index:999; /* ie7 z-index bug fix */
}

We fix it by defining your header section as position:relative and give it a higher z-index than your slideshow area, this way your logo will be over your slideshow.

Now to fix your search bar from positioning itself to the left instead of the right we have to define your #social-share section as position:absolute and then push it to the right by using right:0, why? Because IE7 is positioning your search bar right next to the #social-share who is being pushed to the top by using a negative margin, and thus is not being removed from the stream as expected (was surprised it actually worked in modern browsers). So, define your #social-share section as absolute and the problem is solved:

#social-share {
   position:absolute;
   right:0;
}

And the final fix is a conditional class that we're going to use to target your #_atssh <div> tag to position it relatively to your document. IE7 is not taking it into account because it is absolutely positioned and so that long space is removed.

We can take advantage of your conditional classes added to your <html> tag by the boilerplate and target IE7 alone with a fix:

.ie7 #_atssh {
    position:relative;
}

Note: There is probably a billion typos and grammar errors, I wrote it during lunch so I'll comeback to this in the future and fix them.

Answer 2

Add the CSS property zoom: 1 to <div id="social-share">, header-wrapper, or inner-border.

I like how quirks mode explains the issue of hasLayout which is an IE6 & IE7 specific problem: http://www.satzansatz.de/cssd/onhavinglayout.html.

Answer 3

Based off what I can see (sorry, no IE6 or 7 available), you might be able to fix this by using position and top instead of using the negative margins like this:

1. Remove the margin: -57px 0 0 0; from #logo to be top: 0px;. Since you're already using position: absolute;, this should place the logo at the top edge of the screen for you.

2. Remove the margin: -47px 0 0 0; from #social-share and instead add position: relative; top: -47px;

Including the proper clear or "clearfix" mentioned by JKirchartz may also be required.

Answer 4

looks like you need a clearfix:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

add this to the element that contains your floated element