Page 1 of 1

CSS borking in IE

Posted: Wed Dec 13, 2006 10:54 pm
by Burrito
I am creating a page using css and using some absolutely positioned divs as horizontal lines.

it works perfectly in FF but IE doesn't like it...it pushes the horizontal lines outside of my 'body' div even though it has relative positioning.

here's the code:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
<style>
body {
	margin:0px; text-align:center; position:relative;
}
#container {
	text-align:left; margin:0 auto; width: 760px;
}
#parent {
	border:1px #838371 solid;height:600px;width:760px;text-align:center
}
#head {
	width:760px;background-color:#b3b396;height:140px;background-image: url(images/top-background.gif);background-repeat:repeat-x;background-position: bottom; font-family:tahoma; font-size:10px; text-align:right; position:relative;
}
</style>
</head>

<body>
<div id="container">
	<div id="parent">
	  <div id="head">
	    <img src="images/logo-box.gif" style="float:left">
		GCU Mass Mailer v1.0.0
		<div style="background-color:#000000;width:760px;height:3px;position:absolute;top:90px"><img src="images/spacer.gif" height="3"></div>
		<div style="background-color:#42433d;width:760px;height:8px;position:absolute;top:93px"><img src="images/spacer.gif" height="8"></div>
		<div style="background-color:#000000;width:760px;height:1px;position:absolute;top:101px"><img src="images/spacer.gif" height="1"></div>
		
	  </div>
	</div>
</div>
</body>
</html>
no....I don't have this up publicly.

any css gurus care to lend a hand?

Posted: Wed Dec 13, 2006 11:00 pm
by Burrito
nevermind.

I set the left property on my horizontal divs to 0px and it fixed it.....stupid IE.

Posted: Wed Dec 13, 2006 11:11 pm
by Luke
Burrito wrote:stupid IE.
indeed.

Posted: Thu Dec 14, 2006 12:58 am
by matthijs
If you want to use CSS fully you can replace this:

Code: Select all

..
<div id="head">
            <img src="images/logo-box.gif" style="float:left">
                GCU Mass Mailer v1.0.0
                <div style="background-color:#000000;width:760px;height:3px;position:absolute;top:90px"><img src="images/spacer.gif" height="3"></div>
                <div style="background-color:#42433d;width:760px;height:8px;position:absolute;top:93px"><img src="images/spacer.gif" height="8"></div>
                <div style="background-color:#000000;width:760px;height:1px;position:absolute;top:101px"><img src="images/spacer.gif" height="1"></div>
</div>
with this:

Code: Select all

..
<h1 id="head">GCU Mass Mailer v1.0.0</h1>
..
saves 4 divs and 4 images in your HTML. And will simplify the design a lot (less IE headaches ;) )