Absolute positioning difference: FireFox vs IE6

**meerimage** · Jul 2, 2006 20:52

I've got text absolute positioned over the top of images, the images are also absolute positioned. The images show correctly in both browsers, both horizontally and vertically. The text, however, shows correct horizontal position, but the vertical position appears about 50px higher in IE6 than in FireFox. I have tried changing the text from <h1> to <p>, no effect, I've tried giving them zero margins, even negative margins, no effect. I have tried nesting the text inside their own separate divs, no effect.

Both the html and the css validate, and I have searched the forum for examples of this problem. Here is a test page with the problem: http://www.foxblocks.com/!!NEW/test.shtml

Any insights?

**Tyssen** · Jul 2, 2006 21:15

Set position: relative on the div holding the h1 and the image and then use margins, not AP to position the div. The image comes first in the source so doesn't need to be positioned, but you can use position: absolute to move the h1 over the image relative to its position in the div, not the body (which is what you've got at the moment).

**meerimage** · Jul 4, 2006 14:07

Okay, I did that and it's probably better css than what I had, but it did not fix the problem, the difference between FF and IE is the same. I was able to correct the problem here: http://www.foxblocks.com/!!NEW/test2.shtml using a hack. This is the first time I have done a hack, and am a bit uncertain if it's the right way to go. I mean, it seems to work, but, is it "proper"?
Thanks for your help!

**all4nerds** · Jul 4, 2006 14:51

Hello

background foreground

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
<!-- 
*{margin:0;padding:0;}

h1{color:black;background:gray;text-align:center;margin-left:10px;margin-right:10px;}
html .fotoa h1,html .fotob h1,html .fotoc h1,html .fotod h1{margin-top:112px;}

.spot{background:red;height:10px;width:10px;overflow:hidden;margin:10px 0 0 10px;}

.pic{
float:left;
display:inline;
width:200px;
position:relative;
margin:50px 0 0 50px;
}

.fotoa{background:url(graphic/random/res/03.jpg) no-repeat;}
.fotob{background:url(graphic/random/res/03.jpg) no-repeat;}
.fotoc{background:url(graphic/random/res/03.jpg) no-repeat;}
.fotod{background:url(graphic/random/res/03.jpg) no-repeat;}

p{clear:both;height:10px;}

.a{position:absolute;left:0px;top:0px;}

.pic img{display:block;}
.pic h1{margin-top:-18px;position:relative;}
 -->
</style>
</head>
<body>

<div class="pic fotoa">
<div class="spot"></div>
<h1>Sample Text</h1>
</div>

<div class="pic fotob">
<div class="spot"></div>
<h1>Sample Text</h1>
</div>

<div class="pic fotoc">
<div class="spot"></div>
<h1>Sample Text</h1>
</div>

<div class="pic fotod">
<div class="spot"></div>
<h1>Sample Text</h1>
</div>

<p></p>

<div class="pic">
<div class="spot a"></div>
<img src="graphic/random/res/03.jpg" alt="" width="200" height="152">
<h1>Sample Text</h1>
</div>

<div class="pic">
<div class="spot a"></div>
<img src="graphic/random/res/03.jpg" alt="" width="200" height="152">
<h1>Sample Text</h1>
</div>

<div class="pic">
<div class="spot a"></div>
<img src="graphic/random/res/03.jpg" alt="" width="200" height="152">
<h1>Sample Text</h1>
</div>

<div class="pic">
<div class="spot a"></div>
<img src="graphic/random/res/03.jpg" alt="" width="200" height="152">
<h1>Sample Text</h1>
</div>

</body>
</html>

User Tag List

Thread: Absolute positioning difference: FireFox vs IE6

Thread Tools

Display

Absolute positioning difference: FireFox vs IE6

Used a Hack instead

Bookmarks

Bookmarks

Posting Permissions