[web] IE woes

Recommended Posts

Does anyone have an explanation as to why the following page does not render in Internet Explorer 6, but does in Firefox. If you resize the window, the blue bar 's right edge should keep 230 pixels from the right edge of the window. In IE6 it doesn't even show anything. Heres the page: link Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>CSS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.contentTop
{
left:0px;
right:230px;
height:30px;
top:130px;
position:absolute;
background-image:url(nav.jpg);
}
</style>

<body>

<div class="contentTop"></div>

</body>
</html>



Share on other sites
It's the right property. As far as IE is concerned, your div is 0px wide (for example if you stick something inbetween the div tags, or add a width value, you'll get your image)

Share on other sites
The way it appears in Firefox is the way that I wanted it. How do I get it to appear like that in IE?

Adding something in the div tag or setting a width just leaves me with a static bar that doesn't change width.

Share on other sites
I'm not entirely sure. I believe the root of the problem is that IE doesn't like contradictory left/right values - you can't use left+right as a substitute for width, instead it rejects the whole thing if you attempt to tell it to place an element in two different places.

Given that you want to basically have a bar going from the left and stopping a certain distance from the right (and remain that way even if resized), you could remove the left value (if needed use margin-left) so that the right property is no longer seen as a conflict, then use width:100%.

.contentTop{	width:100%;	right:230px;	height:30px;	top:130px;	position:absolute;	background-image:url(nav.jpg);}

Share on other sites
Thank you, that works perfectly. I think I was getting confused by the meaning of left, right.

Share on other sites
You aren't confused by left+right, IE is...

The following source should logically* define a box that is centered in the screen with a margin of 150px on each side:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><body><div style="position: absolute; top: 150px; bottom: 150px; left: 150px; right: 150px; border: solid black 1px;">test</div></body></html>

Firefox, Opera, Camino, and Safari are able to understand that, but unsurprisingly IE cannot. (If you use left+right AND width, then you've done something impossible.)

Fortunately it's not a big problem because margins can usually be used to create the same effect and it's not often that you really need to use top+bottom and left+right together.

* I cannot be bothered to check the specs, so that's why I used the word logically...

Share on other sites
This works so long as you replace "position:absolute" with "position:relative", and left/right with margin-left/margin-right. I think I might just go back to using tables!

Share on other sites
I just gave up supporting IE. I give the views a friendly message and the option to continue on with the site if they wish, but I inform them that there will be view distortions. I also provide them with a link to FireFox. I haven't gotten a complaint about that yet.

Create an account

Register a new account

• Forum Statistics

• Total Topics
628400
• Total Posts
2982450

• 9
• 10
• 9
• 19
• 24