SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE makes half my site disappear

    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?

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Wish I could help but your code looks fine. It's a great site in FireFox! Very nice anime!
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try removing position: relative from .item.

  4. #4
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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! )

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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).

  6. #6
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote 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.

  7. #7
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  10. #10
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote 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

  11. #11
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Done!

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

    Thanks for all the feedback!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •