Sign in to follow this  
JohnHurt

[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>
<head>
<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>
</head>

<body>

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

</body>
</html>


Share this post


Link to post
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this