Float problem in IE

**Lizz10403** · 12-12-2006, 08:40 PM

In Mozilla my website looks the way I want it too but in IE/AOL the div (sidebar) that I'm floating left is moved right 10px and 5px down more than it should be. I've tried to change the code and realized it has something to do with the

float: left

being different in IE/AOL. Is there any way to fix/change this?

This is my style.css

Code:

body { 
  background-color: #396679;
  color:            #f4f4f4;
  font-family:      Georgia, "Times New Roman", Times, serif;
  font-size:        small;
  margin:           0px;
}

#main {
  background-color: #396679;
  font-size:        105%;
  padding:          20px;
  margin:           480px 10px 10px 210px;
}

#sidebar {
  background-color: #396679;
  font-size:        105%;
  padding:          15px;
  margin:           480px 10px 10px 10px;
  width:            150px;
  float:            left;
}

#footer {
  background-color: #396679;
  color:            #efe5d0;
  text-align:       center;
  padding:          15px;
  margin:           10px;
  font-size:        90%;
  clear:            left;
}

h1 {
  font-size:        120%;
  color:            #efe5d0;
}

h2 { font-size: 110%; }

a:link {
  color:            #efe5d0;
  text-decoration:  none;
  border-bottom:    thin dotted #efe5d0;
}
a:visited {
  color:            #efe5d0;
  text-decoration:  none;
  border-bottom:    thin dotted #efe5d0;
}

#allcontent {
  width:            800px;
  padding-top:      5px;
  padding-bottom:   5px;
  background:       #f4f4f4 url(/Images/Tree.jpg) top left no-repeat;
  margin-left:      auto;
  margin-right:     auto;
}

#right {
  font-size:        100%;
  color:            #efe5d0;
  text-align:       right;
}

#left (
  font-size:        100%;
  color:            #efe5d0;
  text-align:       left;
}

This is my index.php

Code:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>url</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head> 

  <body>
   <div id="allcontent">

    <div id="sidebar">
      <p>
         <h1>Navagation</h1>
         <a href="/">Home</a><br />
         <a href="/Me.html">WebMiss</a><br />
      </p>
      <p>
         <h1>Pictures</h1>
         <a href="/Pets.html">Pets</a><br />
         <a href="/Family.html">Family</a><br />
         <a href="/Vaca.html">Vacation</a><br />
      </p>
      <p>
         <h1>Other</h1>
         <a href="/Domain.html">Domain</a><br />
         <a href="/Links.html">Links</a><br />
      </p>
    </div>

    <div id="main">
      <p><center><?PHP include("cutenews/show_news.php");?><center></p>
    </div>

    <div id="footer">
      <p>© 2006 url.  All rights reserved.</p>
    </div>
     <center><iframe src="url/radio_blog/?autoplay=1" name="radio" scrolling="no" frameborder="0" width="220" height="320">
     </iframe></center>
   </div>
  </body>
</html>

**djr33** · 12-13-2006, 01:19 AM

Not sure, but odd, since AOL explorer is basically a more screwed up version of IE.

**jscheuer1** · 12-13-2006, 06:20 AM

I see that you are using both margin and padding with the sidebar selector. I'd experiment with using only one and then using only the other. I'd also try out using both but varying the amounts of pixels allocated among them, including breaking out to vary the padding through the different directions (top, right, bottom and left), as you are already doing for the margin.

**jbert** · 12-29-2006, 08:15 AM

I had the same problem. A forum GURU told me. If it looks all right in Mozilla, then I.E is lying to you. My center was a float with borders and margins. I.E does not like margins and borders. I finally wrote another CSS and re did the middle with no borders or margins. Site now works in both. Take a peek

http://home.comcast.net/~3jbert/index.html

Hope this helps you

jim

Thread: Float problem in IE

Thread Tools

Search Thread

Float problem in IE

Bookmarks

Bookmarks

Posting Permissions