DIV's, absolute positioning, width inheritence etc in IE6....

oxle ID:	password:
store password \| forgot password?

the forums » INT/Section » techtalk

DIV's, absolute positioning, width inheritence etc in IE6....

Author

Message

MarcelG
Netherlands

13.7k posts

Posted 21/04/08 @ 12:50 - 6896 pageviews

Guys, I'm having a bit of a situation with IE6 (who doesn't...)

I've created a website for my online photo portfolio, and it's 100% div based with CSS.
In fact, it's XHTML 1.0 Strict. [:)]

The structure of the page is like this:

code :

<body>
<div id="wp-cont0">
	<div id="wp-container">			
		<div id="wp-header">header</div>
		<div id="wp-menu-main">menu</div>
		<div id="wp-content">
			<div id="wp-content-pri">
				<div class="post">
				CONTENT
				</div>
			</div>
		</div>
	</div>
	<div id="wp-footer">footer</div>
	<div id="bottommiddle">footer2</div>
</div>
</body>

This all validates, and works in all browsers the same.

Now the tricky part starts.
As 'content', I post this:

code :

<div class="fullscreen" id="fullscreen">
</div>
<div class="fsframe" id="fsframe">
	<div class="fscontent" id="fscontent">
		<div id='closex'>backbutton</div>
		<p>real content (object)
		</p>
	</div>
</div>

The actual content is an object, embedding an external webpage (as iframe is not XHTML 1.0 Strict).
For these divs, the CSS is this:

code :

div#fullscreen {
	clear: both;
	padding:0px; 
	border: 0px #FFFFFF solid;
	background-color: #151515;
	opacity:0.6;
	-moz-opacity:0.6; 
	filter: alpha(opacity=60);
	position:absolute;
	top:0px; 
	left:0px; 
	width:100%; 
	height:1400px;
	z-index:9998; 
	text-align: center;
}
div#fsframe {
	clear: both;
	padding:0px; 
	border: 0px #FFFFFF solid;
	position:absolute;
	top:0px; 
	left:0px; 
	width:100%; 
	height:1400px;
	margin: 0px auto 0px auto;
	z-index:9999; 
	text-align: center;
}
div#fscontent {
	padding:10px; 
	clear: both;
	border-top: 5px #FFFFFF solid;
	border-bottom: 5px #FFFFFF solid;
	border-right: 5px #FFFFFF solid;
	border-left: 5px #FFFFFF solid;
	background-color: #151515;
	position:relative;
	margin: 14px auto 0px auto;
	width:840px; 
	text-align:left;
	height:auto; 
	z-index:10000;
}

Now, the problem is that IE7, FireFox (2), Opera ánd Safari render the page correctly.
But, IE6 decides that width:100% for fullscreen and fsframe should not exceed the width of the parent div #wp-content, even though it's positioned absolute.

code :

#wp-content{
	min-height: 35em; 
	height: auto;
	width: 920px;
	}

Example: http://www.phomago.com/test/ga../..isburg_nord/
This page is valid XHTML Strict.

The only 'trick' to make IE6 render it as I want it to, is to close those parent divs before posting the content.
So instead of posting the above, I have to post this:

code (with markup) :

</div></div></div></div></div>
<div class="fullscreen" id="fullscreen">
</div>
<div class="fsframe" id="fsframe">
	<div class="fscontent" id="fscontent">
		<div id='closex'>backbutton</div>
		<p>real content (object)
		</p>
	</div>
</div>

Example: http://www.phomago.com/test/ga../..k-2007-2008/
This renders ok in IE7, IE6 (I haven't dared to in Opera, Safari and FF) but...it's absolutely no valid XHTML 1.0 Strict.

Now....who can help me figure out to get this working in IE6, ánd retain valid XHTML 1.0 Strict ?
Somehow I need to get rid of the inheritence of the width of the parent div's.....but I have no idea.

Another thing I'm having trouble with is how I can make the the semi-transparent fullscreen layer (div fullscreen) to keep in it's place, when scrolling the page.
Now I've put it to 1400px height, as I don't expect any page shown in this wrapper to be taller than that, but that's not a decent way of doing this, and it gives a scrollbar even though there's nothing to scroll for.

georg

Posted 01/10/08 @ 09:19 #1

i did it by setting all other divs to: display:none; and the divs around the fullscreen div to: width:auto; height:auto; margin:0; padding:0; border:0;

it's much easier to do this when you trigger the fullscreen div through the body tag!

The opacity won't work because the background is messed up. But I recommand a semi-transparent png for opacity anyway. This will give you a grey background in IE6 and will work (VALID) in all other (IE7, FF, Opera, WebKit) Browsers.

Than you can do the auto size stuff in an conditional style just for IE6.

posted by georg, an anonymous guest user

MarcelG

Netherlands

13.7k posts

Posted 01/10/08 @ 10:24 #2
Georg, thanks for the suggestion. I'll look into getting it to work that way.

HuwR

459 posts

Posted 01/10/08 @ 13:11 (Edited @ 13:16)

quote :

This renders ok in IE7, IE6 (I haven't dared to in Opera, Safari and FF)

It will probably work fine in Opera and Safari (with minor twiddles) if it works in IE7

IE6 is just a dog and should be purged from every computer it is installed on, your best bet would be to just have a completely different page for IE6 it will save you much hassle and headaches if you do.

don't forget one important thing, XHTML was only a recomendation when IE6 was released it is a very very old browser in terms of modern web standards

MarcelG

Netherlands

13.7k posts

Posted 01/10/08 @ 13:55 #4
Yep, you're right ; IE6 is an old smelly dog..... I think the site (http://www.phomago.com) works ok in FF,IE7 and Safari, at least on Windows, and except for a strange difference in dropdown-menu-width it all looks pretty similar accross these browsers. I've tried to keep the markup as simple as possible.

This topic has been archived. Posting replies is no longer possible.

Instead, you can post a new topic here.

oxle
parsetime: 0.55s

click here to support this site

community

linkdump

the feeds

more