[RESOLVED] Div disappear if its given position:Absolute in IE

sumeetwork · #1 05-31-2007, 03:02 AM

Y my right div disappear in IE when i gave it pomsition:absolute wheareas it shows in firefox mozilla.. please help...

---CSS Code---
Html {background:#000 url(../images/main_bg.jpg) repeat-x center top;}
BODY {background:#000 url(../images/center_bg.gif) repeat-y center fixed; width:917px; margin:0px auto; font-family:arial;}

.left_main {width:165px; float:left; margin-top:-4px; margin-left:1px;}

.right{position:absolute;width:170px;top:200px;margin-left:718px;display:block;}

.top_head_bg { background:url(../images/main_bg.jpg) repeat-x center top; clear:both; display:block;}

.footer_main {border-top:1px solid #000;height:82px; background:url(../images/footer_bg.jpg) repeat-x; clear:both;}

Centauri · #2 05-31-2007, 03:24 AM

You haven't really explicitly told it where to be positioned horizontally - although you have a left margin, what should this margin be relative to? - does the div have a positioned parent element? Without being specific regarding the position and being careful about the positioning of the parent, the browser has to guess what you are doing - some browsers guess different to others.

If this is a right column, then best NOT to absolutely position it anyway - why can't you just float it?

gabotron · #3 06-01-2007, 04:55 AM

Hi, I'm new here.

@Centauri,
I'm sorry to butt in, but I just want to thank you for explaining absolute positions against relative ones. I had the same problem as sumeetwork. It only displayed incorrectly in IE. No problems at all in Firefox and Opera.

Until you hinted: what should this margin be relative to? In my case, I just added a container div to my 3 absolutely positioned divs and the problem was resolved right away. I didn't do any CSS to the container div. I figured out that it simply needed a parent div. Now my Webpage can be displayed properly in the 3 browsers.

Once again, thanks for the hint!

thelizardreborn · #4 01-02-2008, 09:22 AM

Hi, I've got a standar three column layout. I'm trying to make an image show at the bottom of the left column (right above my footer), even if the center column forces the page to be much taller than the amount of content in the left column.

I'm using absolute positioning on the image only, and it does what is expected in most browsers, but disappears in IE6.

Here is some code:

HTML:

HTML Code:

<body>

<div id="main">
  <div id="header">
  </div>
  <div id="absimage">
    <img alt="Show at bottom of column" src="images/absimage.jpg"/>
  </div>
  <div id="left" class="sidebar">
    <table class="moduletable_mainmenu">
      <tr><td>
        <ul>
          <li><!-- menu items --></li>
        </ul>
      </td></tr>
    </table>
    <div id="absimage_spacer"></div>
  </div>
  <div id="right" class="sidebar">
    <!-- random content -->
  </div>
  <div id="content">
    <!-- main content -->
    <div id="bottom"><!-- stuff below main content --></div>
  </div>
  <div class="clr"></div>
  <div id="footer">
    <div id="footer_mod">
      <!-- contents of footer -->
    </div>
  </div>
</div>

</body>

CSS:

HTML Code:

body{
	background:#950636;
	margin:0px;
}

div#main{
	width:800px;
	margin:auto;
	position:relative;
}

div#header{
	width:800px;
	height:90px;
	background:url(images/header.jpg) no-repeat top;
	position:relative;
}

div#left{
	float:left;
	width:150px;
	padding:5px;
}

table.moduletable_mainmenu ul{
	padding:0;
}

table.moduletable_mainmenu ul li{
	height:28px;
	width:155px;
}

div#absimage_spacer{
	height:243px;
}

div#right{
	float:right;
	width:160px;
	margin-top:85px;
	padding:5px;
}

div#content{
	float:left;
	width:460px;
	margin-top:55px;
	padding:5px;
}

div#footer{
	width:800px;
	height:56px;
	background:url(images/footer.jpg) no-repeat bottom;
	position:relative;
}

div#footer_mod{
	position:absolute;
	top:10px;
	left:120px;
	width:560px;
}

div#absimage{
	position:absolute;
 	bottom:56px;
	left:0px;
	width:160px;
	height:243px;
}

.clr{
	clear:both;
}

thelizardreborn · #5 01-02-2008, 09:54 AM

I think I found the solution to my problem:

http://www.brunildo.org/test/IE_raf3.html

Basically, in IE, an absolute positioned element next to a floated one (in the source code) will disappear, so inserting a statically positioned box between them will cause the absolute element to be shown.

mistafeesh · #6 07-24-2008, 08:44 PM

Thanks thelizardreborn. Just found this post after a late night pulling my hair out!! Saved my bacon...

dvaZemiaky · #7 06-09-2009, 10:47 AM

Quote:

Originally Posted by thelizardreborn

I think I found the solution to my problem:

http://www.brunildo.org/test/IE_raf3.html

Basically, in IE, an absolute positioned element next to a floated one (in the source code) will disappear, so inserting a statically positioned box between them will cause the absolute element to be shown.

or you can wrap floated element with some nonfloated div

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)