1

Context

In my header, I want to place my little login menu "LOGIN" and "Help" to the right of the page at the same height as the logo (red rectangle) on the left.

Problem

The layout is not working on IE8.

It works as intended on Chrome :

enter image description here

But it gives this on IE8 :

enter image description here

or this :

enter image description here

Code

HTML

<header class="header">
    <div class="Login">
        <a id="LB_GotoLogin" tabindex="30" href="javascript:__doPostBack('ctl00$MainContent$LB_GotoLogin','')">LOGIN</a>
        <br><br>
        <a id="LB_Help" tabindex="30" href="javascript:__doPostBack('ctl00$MainContent$LB_Help','')">Help</a>
    </div>
    <a href="/Default.aspx" style="text-decoration: none; display: inline-block; *display: inline; *zoom: 1;">
        <img src="Logo.jpg" style="height:64px;border: 0;">
    </a>
</header>

CSS

.header
{
    padding: 18px 50px;
    margin: 0px auto;
    text-align: left;
    line-height: normal;
    height: 64px;
}

.login
{
    float: right;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 100px;
}

What I tried

  1. I tried placing the floated-right element (login) before the logo, it gave the first IE8 image I included instead of the second. (As stated Here)
  2. I placed a width to the floated element as stated at multiple places.
  3. Every container are <div>s. As stated Here, IE8 doesn't recognise other tags.
  4. Tried making everything inline-blocks with the IE8 hack (`*dispay: inline; *zoom: 1;)

Nothing worked.

Question

How can I make my layout to work for IE8? (What have I missed?)

Community
  • 1
  • 1
Sifu
  • 1,082
  • 8
  • 26
  • 3
    Class `login` and class `Login` are two different classes. Some browsers may be tolerant of this (but they shouldn't be), IE8 is not. – Niet the Dark Absol Aug 05 '14 at 13:37
  • @Sifu Margin 0px auto doesn't work in IE8, which is dumb. Usually what I do is do percent width and margin for IE8. If you have an 80% with then you have a margin left and right of 10% each. Let me know if that helps. http://stackoverflow.com/questions/662341/using-margin-0-auto-in-internet-explorer-8 – Max Baldwin Aug 05 '14 at 13:37
  • @MaxBaldwin Thanks for the heads up, margins are also broken for IE8 but I can't afford having percentage margins for smaller screens. NiettheDarkAbsol found my problem (case sensitive classes). – Sifu Aug 05 '14 at 13:40

1 Answers1

0

As Niet the Dark Absol noted,

Class "login" and class "Login" are two different classes. Some browsers may be tolerant of this (but they shouldn't be), IE8 is not.

Internet Explorer 8 is case sensitive, while the other browsers are not.

Having the same exact class names fixed the problem.

Sifu
  • 1,082
  • 8
  • 26