<!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>
[web] IE woes
Author
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:
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)
Author
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.
Adding something in the div tag or setting a width just leaves me with a static bar that doesn't change width.
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%.
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);}
Author
Thank you, that works perfectly. I think I was getting confused by the meaning of left, right.
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:
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...
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...
Author
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!
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.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
