CODEWITHSUNDEEP
htmlcss
schenker
schenker

Reputation: 953

Float causes image to be run-out of alignment

I created a webpage in my mac. I tested it with the common browsers, like Chrome, FF and Safari. It is perfect. I just got the opportunity to test the website in IE. It looks disastrous- The logo has gone too much to the right. I believe its the floats that's causing this. I'm posting some codes here, hoping to get some help from the experts here. Pls help me. Thanks!

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>

   *{
margin:0px; padding:0px;
font-family: Tahoma, sans-serif;
font-size: 11px;
    }


    root { 
    display: block;
    }

    html, body, form, h1, h2, h3, h4, ul, li {
margin: 0;
padding: 0;
    }

    body {
    margin: 0 auto;
    text-align: center;
    width:780px;
    }

    #top_bkg {
    padding:0;
    margin:0 auto;
    background-color:#009933;
    width:780px;
    height:101px; 
    }

   #top_bkg2 {
   background-color:#009933;
   width:780px;
   height:99px; 
   }


   #logo {    
    float:left;   
    line-height: 1%;
    margin-top:-132px;              
background-color:red;
    width:569px;
    height:109px;
background-repeat:no-repeat;
background-position:bottom right;
    }

</style>



    </head>
    <body>

        <div id="top_bkg">
        </div> <!--end of top_bkg-->

        <div id="top_bkg2">
        </div> <!--end of top_bkg2-->


     <div id="logo">             
     </div> <!--end of logo-->


   </body>
  </html>

This is how it looks like in IE:

The red background is supposed to be the logo. Its out of alignment.

Upvotes: 0

Views: 106

Answers (1)

Shreedhar
Shreedhar

Reputation: 5640

instead of setting width to body, you can create a wrapper like

<div id="wrapper"></div> and set width for wrapper, and also its not good practice to give margin in minus values, and also you had set the width and height for each divs, thats why its looks like that in IE. and please make correction then will looks good in IE though you may need to make some correction with respect to margin and padding for IE.

Upvotes: 1

Related Questions