Why does IE need position: relative on so many items?

Forum Moderators: not2easy

Message Too Old, No Replies

Why does IE need position: relative on so many items?

Fotiman

4:22 pm on Dec 22, 2005 (gmt 0)

I keep finding that my page layout does not look right in IE. Most often it's that either my borders are not showing, or my background is not showing. The fix seems to be to assign the style:

position: relative;

to the item. Is there an easier way to do this?

Span

4:37 pm on Dec 22, 2005 (gmt 0)

To has Layout or not, that is the answer: hasLayout - Microsoft's own CSS logic? [webmasterworld.com]

jessejump

6:29 pm on Dec 22, 2005 (gmt 0)

>>>> Most often it's that either my borders are not showing, or my background is not showing. The fix seems to be to assign the style:
position: relative;

What are you doing on the pages? I have never seen these problems. Do you have a breif style example?

Position: relative, to me, is pretty much useless as a style; why do you ever use it?

Fotiman

8:32 pm on Dec 22, 2005 (gmt 0)

position: relative, aside from fixing the bugs that I'm referring to, is useful when you want to position something within a container. It makes it so your nested items are positioned relative to the item with position: relative instead of to the body of the page. Useful when you don't necessarily know the exact pixel dimentions (for example, you you have a fixed width centered container).

Fotiman

8:45 pm on Dec 22, 2005 (gmt 0)

Here is an example. Note, view the page in Firefox to see what the correct behavior is (the <h3> should be red). You can uncomment the position:relative and IE will work again. Alternatively, you can remove postion:relative from block2, but that is required to fix something else.

Note, this is only a snippet of the code... there is much more happening but this shows the case I'm referring to.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
 <title></title> 
<style type="text/css"> 
/* * * * * * Begin main Layout * * * * * */ 
body 
{ 
 background-color: #fff; 
 margin: 0; 
 padding: 0; 
 text-align: center; 
} 
#container 
{ 
 position: relative; 
 margin: 0 auto; 
 padding: 0; 
 width: 770px; 
 text-align: left; 
} #intro 
{ 
 background: #fff; 
 float: left; 
 margin-right: 10px; 
 width: 180px; 
} 
#block2 
{ 
 position: relative; 
 background: #ddd; 
 margin: 10px 0 10px 190px; 
 padding: 0; 
 width: 580px; 
} 
* html #block2 
{ 
 float: right; 
 margin-left: 0; 
} 
#block2 h3 
{ 
 background: #f00; /* This doesn't work in IE unless position relative */ 
 margin: 0; 
 padding: 5px 10px; 
} 
* html #block2 h3 
{ 
 /* 
 position: relative; 
 margin-top: -1px; 
 */ 
} 
</style> 
</head> 
<body> 
<div id="container"> 
 <div id="intro"> 
  <div class="wrapper"> 
   <h1><span>Foo</span></h1> 
  </div> 
 </div> 
  
 <div id="content"> 
  <div id="block2"> 
   <div class="wrapper"> 
   <h3><span>Welcome</span></h3> 
   </div> 
  </div> 
 </div> 
</div> 
</body> 
</html>