Float problem in IE [Archive] - Dynamic Drive Forums

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

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

<!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