IE makes half my site disappear

**Ize** · Jul 27, 2006 01:39

Hello,

I'm working on a blog-like website for a Dutch tv channel. The supposed look of the site can be found here: http://www.whatstyle.net/bla/jetix/jetix_b2b.jpg

The (unfinished) latest version of my work can be found here: http://www.whatstyle.net/bla/jetix/index.html, with its stylesheet residing here: http://www.whatstyle.net/bla/jetix/inc/css/screen.css .

Of course it's not finished and there's still a lot to enhance, but I've encountered behaviour in IE 6 which I can't explain: from the header / navigation down all content has disappeared from the screen! Before I continue my CSS work, I was wondering if anyone could help figure out why this happens?

**Shyflower** · Jul 27, 2006 04:42

Wish I could help but your code looks fine. It's a great site in FireFox! Very nice anime!

**Tyssen** · Jul 27, 2006 05:02

Try removing position: relative from .item.

**Ize** · Jul 27, 2006 05:23

I'm sorry for everyone who spent a lot of time reviewing my code, but I've fixed the problem (basically by just rebuilding everything from the header down).

The CSS is now almost finished, (again, see: http://www.whatstyle.net/bla/jetix/ and http://www.whatstyle.net/bla/jetix/inc/css/screen.css) but there's still some weird behaviour in IE. Firefox shows exactly my intentions.

1) the yellow download-button at the top (next to the navigational menu) is positioned absolute. For some reason, IE still notices its occurence in the document flow and jams my content div down.
2) the blue "news" column on the left doesn't stretch all the way down.. I've down some research on 100% height and I'm not sure if this is possible at all, but maybe you guys have some ideas?
3) this one's for both FF and IE: the left column doesn't stretch if the right column is longer... I don't expect this to happen, but it would be nice to put in some code for security. Any ideas?

Thanks in advance!

(Oh and Shyflower: thanks for the compliment!

)

**Paul O'B** · Jul 27, 2006 06:22

Hi,

If you float the content then the negative margin will take effect and the content will be in the right position. You will then need to move the yellow banner to inside #content and change the positioning.

e.g.

Code:

#content {
	  height: 100%;
	  min-height: 100%;
	  background: #e7ebee url(../../images/jetix_page_elements/content_bg.gif) top right no-repeat;
	  margin-top: -190px;
	  margin-left: 30px;
	  border: 1px solid white;
	  width: 717px;
	  z-index: 1;
      float:left;
	 position:relative;
	  }
#tariefkaart {
	  position: absolute;
	  top: 10px;
	  right: 20px;
	  background-color: transparent;
	  z-index: 3;
	  width: 426px;
	  height: 70px;
	  }

Code:

   <li><a id="pressLink" href="pages/press.php" title="Bekijk het persgedeelte">Press</a></li>
  </ul>
 </div>
 <!-- end #navigation -->
 <div id="content"> 
  <div id="tariefkaart"> <a href="#tariefkaart" title="Download nu de tariefkaart"> Download nu de tariefkaart voor het 3e kwartaal 2006! </a> </div> <!-- end #tariefkaart -->
  <div id="items">
   <div class="item">
	<h2>Totally Spies voor 3de seizoen bij Jetix!</h2>

Be careful with 100% height as it rarely works like you expect (see faq on 100% height). The simplest solution is merely to repeat a blue image down the left side of a container that holds the left and right content. In that way the blue column will always reach the bottom and always extend.

Similar to the right hand column in this example.
http://www.pmob.co.uk/temp/2colblog.htm

You would just set a container inside your #content and apply a repeating gif down the left side of that container.( Make sure that the background color is transparent so that your #content image shows through.)

All your content goes inside that new container and will extend either column as required (make sure floats are cleared).

**Ize** · Jul 27, 2006 06:37

Originally Posted by Paul O'B

Hi,

If you float the content then the negative margin will take effect and the content will be in the right position. You will then need to move the yellow banner to inside #content and change the positioning.

e.g.

Code:

#content {
	  height: 100%;
	  min-height: 100%;
	  background: #e7ebee url(../../images/jetix_page_elements/content_bg.gif) top right no-repeat;
	  margin-top: -190px;
	  margin-left: 30px;
	  border: 1px solid white;
	  width: 717px;
	  z-index: 1;
      float:left;
	 position:relative;
	  }
#tariefkaart {
	  position: absolute;
	  top: 10px;
	  right: 20px;
	  background-color: transparent;
	  z-index: 3;
	  width: 426px;
	  height: 70px;
	  }

Code:

   <li><a id="pressLink" href="pages/press.php" title="Bekijk het persgedeelte">Press</a></li>
  </ul>
 </div>
 <!-- end #navigation -->
 <div id="content"> 
  <div id="tariefkaart"> <a href="#tariefkaart" title="Download nu de tariefkaart"> Download nu de tariefkaart voor het 3e kwartaal 2006! </a> </div> <!-- end #tariefkaart -->
  <div id="items">
   <div class="item">
	<h2>Totally Spies voor 3de seizoen bij Jetix!</h2>

Be careful with 100% height as it rarely works like you expect (see faq on 100% height). The simplest solution is merely to repeat a blue image down the left side of a container that holds the left and right content. In that way the blue column will always reach the bottom and always extend.

Similar to the right hand column in this example.
http://www.pmob.co.uk/temp/2colblog.htm

You would just set a container inside your #content and apply a repeating gif down the left side of that container.( Make sure that the background color is transparent so that your #content image shows through.)

All your content goes inside that new container and will extend either column as required (make sure floats are cleared).

Thanks a lot! I will try your 100% height solution.

Your yellow-banner solution raises another problem: the navigation menu overlaps the #content div, thus, by placing the yellow banner inside the #content div it can't be clicked, due to the higher z-index declaration on the menu. (this was actually the first HTML structure I came up with)
If I reverse the z-indexes on both divs, the buttons in the menu can't be clicked.

**Ize** · Jul 27, 2006 06:46

I started with the 100% height solution and added a second container in #content like you said, containing everything, and funnily enough it solved the yellow-banner problem.

I'm almost there!

**Paul O'B** · Jul 27, 2006 06:51

HI,

In that case you can move the banner (yet again lol) to the end of the main container here:

Code:

  </ul>
 </div>
 <!-- end #footer -->
  <div id="tariefkaart"> <a href="#tariefkaart" title="Download nu de tariefkaart"> Download nu de tariefkaart voor het 3e kwartaal 2006! </a> </div> <!-- end #tariefkaart -->
</div>
<!-- end #container -->
</body>
</html>

Then just re-adjust the positioning of the css and you should be good to go

.

The reason this is causing a problem is that ie has a bug where absolute elements come before static content in the same context and you must move the absolute element after the static content. It doesn't happen all the time but in certain circumstances it makes the absolute element disappear otherwise.

Regarding your page I would have simplified it completely and just had two floated columns starting under the header. This would have avoided the 3 px jog and other problems. Your page is neatly divided into 2 anyway and would have avoided all the negative margin and absolute placement that you have going on.

**Paul O'B** · Jul 27, 2006 06:52

I started with the 100% height solution and added a second container in #content like you said, containing everything, and funnily enough it solved the yellow-banner problem.

lol - Ignore my other post then

**Ize** · Jul 27, 2006 07:00

Originally Posted by Paul O'B

HI,

In that case you can move the banner (yet again lol) to the end of the main container here:

Code:

  </ul>
 </div>
 <!-- end #footer -->
  <div id="tariefkaart"> <a href="#tariefkaart" title="Download nu de tariefkaart"> Download nu de tariefkaart voor het 3e kwartaal 2006! </a> </div> <!-- end #tariefkaart -->
</div>
<!-- end #container -->
</body>
</html>

Then just re-adjust the positioning of the css and you should be good to go

.

The reason this is causing a problem is that ie has a bug where absolute elements come before static content in the same context and you must move the absolute element after the static content. It doesn't happen all the time but in certain circumstances it makes the absolute element disappear otherwise.

Regarding your page I would have simplified it completely and just had two floated columns starting under the header. This would have avoided the 3 px jog and other problems. Your page is neatly divided into 2 anyway and would have avoided all the negative margin and absolute placement that you have going on.

Lol, yeah I was starting to think I could've made things a lot easier

Btw: I'm encountering a whole bunch of new bugs now the new wrapper is in place but I'm going to try to figure them out myself first.
Thanks again

**Ize** · Jul 27, 2006 07:05

Another strange occurence btw: in my CSS, you can see a 1px solid white border declaration on the #content wrapper.

Since the background is also white, naturally this border cannot be seen, but removing it jams the whole #content div 200px or so down. I don't remember why I put in that border in the first place, I believe it was originally a red border for testing purposes.

Since it's not bothering me (it's invisible anyway) I'm just leaving it in place, assuring the #content div to be in the right position, but I find it strange anyway. Do you have any idea why this happens?

Edit: it's only the top border that's causing this, I've removed the left, right and bottom borders and everything still looks allright.

**Ize** · Jul 27, 2006 08:05

Done!

Now it looks good in Firefox, IE 5.5, IE 6.0, Netscape, Opera and Mozilla.

Thanks for all the feedback!

User Tag List

Thread: IE makes half my site disappear

Thread Tools

Display

IE makes half my site disappear

Bookmarks

Bookmarks

Posting Permissions