CODEWITHSUNDEEP
htmlcsscross-browsercss-float
JMon
JMon

Reputation: 3447

different positioning between Chrome/Firefox and IE

I have the following layout:-

html:-

 <header>
    <div class="content-wrapper">
        <div id="headerContainer">
            <div class="headerProfileNotifications">
                <img src="Images/" alt="notification" />
            </div>
            <div class="headerProfilePhoto">
                <img src="Images/" alt="profile_photo" />
            </div>
            <div class="headerProfileDetails">
                <div class="headerProfileName">John Smith</div>
                <div class="headerProfileEmail">[email protected]</div>
            </div>
        </div>
    </div>
</header>

and css:-

    header {
    padding-bottom: 5px;
   }

    #headerContainer {
    height: 33px;
    background-position: 10px 2px;
    padding-top: 2px;
   }


    .headerProfileNotifications {
    float: right;
    height: 22px;
    width: 29px;
    padding-right: 4px;
    margin: 5px;
   }

    .headerProfilePhoto {
    float: right;
    height: 33px;
    width: 22px;
    margin: 5px;
   }


    .headerProfileDetails {
    float: right;
    padding-right: 4px;
    font-size: 11px;
   }

    .headerProfileName {
    margin-top: 2px;
    float: right;
   }


    .headerProfileEmail {
    margin-top: 0px;
   }

JSFiddle

however it looks the same in Chrome/Firefox, and its looking the way it should be, but in IE, its displaying differently.

What css do I have to apply to IE to look exactly the same like Chrome/Firefox?

Thanks for your help and time

Upvotes: 0

Views: 5242

Answers (1)

Sandro
Sandro

Reputation: 236

This will do the trick:

  .headerProfileEmail {
    clear:both;
    float:right;
    margin-top: 0px;
   }

Upvotes: 1

Related Questions