JavaScript and client side scripting.
Moderator: General Moderators
-
Burrito
- Spockulator
- Posts: 4715
- Joined: Wed Feb 04, 2004 8:15 pm
- Location: Eden, Utah
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?
-
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.
-
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

)