Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Odd behaviour of absolutely-positioned element in IE 6

Status
Not open for further replies.
BillyRayPreachersSon

BillyRayPreachersSon

Programmer
Joined
Dec 8, 2003
Messages
17,047
Location
GB
I've been looking at this for quite a while, and cannot for the life of me work out why it is happening.

Basically, I've an absolutely-positioned DIV element inside a relatively-positioned one, and I've positioned that inner DIV to be at the bottom of the outer one.

In all browsers other than IE 6, this works fine... but in IE 6, it fails miserably.

Here's a cut-down harness that illustrates the problem:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-language" content="en" />
	<title>IE 6 weird bug problem</title>

	<style type="text/css">
		#header {
			position: relative;
			background-color: red;
		}
		#headerShadow {
			position: absolute;
			left: 0px;
			bottom: 0px;
			width: 200px;
			background-color: green;
		}
	</style>
</head>

<body>
	Some text - line 1<br />
	Some text - line 2<br />
	Some text - line 3<br />
	Some text - line 4<br />

	<div id="header">
		Header text - line 1<br />
		Header text - line 2<br />

		<div id="headerShadow">..............</div>
	</div>

</body>
</html>

I know how to fix it (give the header DIV layout), but what I want to know is why it is happening... this is about as basic as styling gets, and yet I've never seen anything like it.

Can anyone shed any light on why IE 6 is doing this? The CSS and HTML validate perfectly, so I'm stumped.

Thanks,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Sort by date Sort by votes
I'm pretty sure you stumbled upon another IE6 bug.

I played around with it and when I used the "Holly Hack" on header it worked fine.

If you notice, the div #headerShadow gets pushed below where it should be by the amount of vertical space taken up by the lines above #header.

If you put only 2 lines of "Some text - line x <br />, the div is half as far away from where it should be as opposed to having 4 lines of it.

I'd just chalk it up to IE being IE.



[monkey][snake] <.
 
Upvote 0 Downvote
Use the Holly Hack - it works fine.
Code: 
    <style type="text/css">
[COLOR=red]/* Hides from IE-mac \*/
* html #header {height: 1%;}
/* End hide from IE-mac */[/color]

        #header {
            position: relative;
            background-color: red;

        }
        #headerShadow {
            position: absolute;
            left: 0px;
            bottom: 0px;
            width: 200px;
            background-color: green;
        }
    </style>

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Rats. Late again. In any case, assigning a width to the header div fixes it. Just more of the usual stuff from IE6...

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Thanks for all the replies. I fixed it before I posted by giving the header div layout ("zoom:1" in an IE-6 only CSS)... but I was really trying to find out WHY it was happening.

As has been mentioned, I think I'll just have to put it down to IE 6 being IE 6!

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
soni21
  • Locked
  • Question Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Lets Code
  • Locked
  • Question Question
Inline element into a block level element
Replies
1
Views
543
spamjim
spamjim
PeDa
  • Locked
  • Question Question
Display table td's as block element on mobile phone
Replies
3
Views
1K
spamjim
spamjim
Mike Lewis
  • Locked
  • Question Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
2K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top