div positioning in IE

turpentyne

02-12-2012, 05:29 PM

I'm trying to layout a page using divs with overflow and z-indexes. When I went to view it in IE9, it's not working at all. I don't know if its z-index or if it's the overflow that isn't working. All the images appear in the browser as if I hadn't styled a thing.

Here's the code - it's not in a stylesheet at the moment, so I can test and move things around:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Workshops for Youth and Families</title>
</head>

<body><div style="position:relative; width:100%; z-index:300;">
<div id="register1" style="z-index:5;line-height: 0;height:0px;height:0;width:200px;overflow:visible;position:relative; left:565px; top:12px;"><a href="register.php"><img src="test_images/register.gif" border=0/></a></div>
<div id="support1" style="z-index:5;height:0px;width:200px;overflow:visible;position:relative; left:690px; top:12px;"><a href="support.php"><img src="test_images/support.gif" border=0/></a></div>

<div id="logo1" style="z-index:5;line-height: 0; height:0px;height:0;width:0px;overflow:visible;position:relative; left:110px;top:10px;"><img src="test_images/logo1.gif" /></div>
<div id="orho1" style="z-index:3; line-height: 0;height:0px;height:0;width:0px;overflow:visible;position:relative; left:-100px;top:20px;"><img src="test_images/orho1.gif" width=400px /></div>
<div id="tear1" style="z-index:2; height:10px; width:600px; overflow:visible; position:relative; top:67px;" ><img src="test_images/tear1.gif" /></div>
<div id="textbox1" style="z-index:1; background-color:#d9e496;width:100%;height:280px;position:relative;top:264px;">

<div id="whathappens1" style="position:relative; left:285px;"><img src="test_images/whathappens.gif" /></div>
<div id="fb1" style="position:relative; top: 130px; left:25px;height:0px;overflow:visible;"><img src="test_images/fb.gif" /></div>
<div id="twitter1" style="position:relative; top:130px; left:85px;overflow:visible;"><img src="test_images/twitter.gif" /></div>
<div id="orange1" style="position:relative; height:0px;width:0px;overflow:visible;left:310px;top:-34px;"><img src="test_images/orange.gif" width=1px height=200px />

<div id="tear2" style="z-index:2; height:44px;width:0px;overflow:visible;position:relative; left:-310px; width:100%; top:14px;background-image: url(test_images/tear2.gif); background-repeat: repeat-x;"><img src="test_images/tear2.gif" /></div>
</div>
</div>

<div id="textbox2" style="z-index:2; background-color:#c4d359;width:100%;height:280px;position:relative;top:234px;">

</div>

</div>

</body>
</html>

Excavator

02-12-2012, 06:01 PM

Good morning turpentyne,
Those inline styles are a pretty tough way to make it "so I can test and move things around" :eek:

If you embed your styles like my example below, it's easy to move them to an attached stylesheet later.

I didn't make a lot of changes, I just added the bit that make your images display something for me on this end. It's hard to tell what you want to do with all these divs without being able to see your images.

The next thing I would suggest, after embedding your css, is not using so many div elements, see divitis here (http://www.apaddedcell.com/div-itis). An image can just be styled on it's own, you don't need to wrap each one in it's own div.

After that, you should check your code with the validators. See the links about validation in my signature line below.

Here's a start, this behaves the same in all the browsers I viewed it in...<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Workshops for Youth and Families</title>
<style type="text/css">
html, body {
margin: 0;
background: #fc6;
}
img { /*since I don't have your images*/
background: #f00;
display: block;
}
#wrap {
width: 1000px;
margin: 30px auto;
position:relative;
background: #ccc;
}
#register1 {
position:relative;
left:565px;
top:12px;
}
#support1 {
position:relative;
left:690px;
top:12px;
}
#logo1 {
position:relative;
left:110px;
top:10px;
}
#orho1 {
position:relative;
left:-100px;
top:20px;
}
#tear1 {
position:relative;
top:67px;
}
#textbox1 {
background: #d9e496;
width: 100%;
height: 280px;
position: relative;
top: 264px;
}
#whathappens1 {
position:relative;
left:285px;
}
#fb1 {
position:relative;
top: 130px;
left:25px;
}
#twitter1 {
position:relative;
top:130px;
left:85px;
}
#orange1 {
position:relative;
left:310px;
top:-34px;
}
#tear2 {
position:relative;
left:-310px;
top:14px;
}
#textbox2 {
background:#c4d359;
width:100%;
height:280px;
position:relative;
top:234px;
}
</style>
</head>
<body>
<div id="wrap">
<a href="register.php" id="register1"><img src="test_images/register.gif" alt="description" width="200px" height="50" /></a>
<a href="support.php" id="support1"><img src="test_images/support.gif" alt="description" width="200px" height="50" /></a>
<img src="test_images/logo1.gif" alt="description" width="400px" height="200" id="logo1" />
<img src="test_images/orho1.gif" alt="description" width="400px" height="200" id="orho1" />
<img src="test_images/tear1.gif" alt="description" width="600px" height="10" id="tear1" />
<div id="textbox1">
<img src="test_images/whathappens.gif" alt="description" width="50px" height="50" id="whathappens1" />
<img src="test_images/fb.gif" alt="description" width="50px" height="50" id="fb1" />
<img src="test_images/twitter.gif" alt="description" width="50px" height="50" id="twitter1" />
<img src="test_images/orange.gif" alt="description" width="1" height="200" id="orange1" />
<img src="test_images/tear2.gif" alt="description" width="50px" height="44" id="tear2" />
</div>
<div id="textbox2">
</div>
</div>
</body>
</html>

turpentyne

02-12-2012, 07:02 PM

Yeah... you're right. I was having a couple duh moments on this one. Thanks!