CSS borking in IE

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

CSS borking in IE

Post 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?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

nevermind.

I set the left property on my horizontal divs to 0px and it fixed it.....stupid IE.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

Burrito wrote:stupid IE.
indeed.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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 ;) )
Post Reply