SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: Layout and IE

  1. #1
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Norway
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layout and IE

    Hi, having some difficulty getting a layout to work well with IE - here it is: http://69.5.26.129/test.php

    The layout works well in Safari and Opera 7 for Mac, and in IE5 for Mac looks ok, only the background gif for the rightcontent div stops a little short of the wrapper div.

    In IE Win, the rightcontent div is pushed down the page leaving some white space. Not good. I am not quite sure where I am going wrong - lacking a positioning, the float on the centercontent div, or something else.

    Ideally, what I would like is:

    -the rightcontent div to be positioned correctly just under the banner and to the side of the centercontent div

    -the rightcontent div to be a minimum height of 866px, but to extend more according to the contents of centercontent div

    -to have the wrapper div extend as above

    Take a look at this page: http://69.5.26.129/4/

    As you can see the contents of centercontent div are overflowing. It would be good to get the wrapper and rightcontent div's to extend with the content.

    Hope I was clear, and appreciate any help.....styles are embedded in the page source.....

    thanks!!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem is a combination of ies 3 pixel jog and your incorrect with on the ul in the right column. You have made it wider thatn the column so ie drops it down. Mozilla wont make the element larger than its parent so it doesn't break like ie.

    heres the 3 pixel jog fix followed by the new size for the ul.
    Code:
    div#wrapper {
     color: #663;
     background: #fff;
     width: 700px;
     margin: 0 auto;
     padding: 0;
     border: 2px solid #46402D;
     text-align: left;
     }
    * html div#wrapper {width:704px;w\idth:700px}/*box model hack*/
    div#banner { 
     background: #fff url(http://69.5.26.129/images/logo.gif) top left no-repeat;
     height:100px;
     margin: 0;
     border: 0;
     }
    div#centercontent {
     background:#fff;
     float: left;
     width: 520px;
     padding: 0;
     border: 0;
     margin-bottom: 20px;
     }
    * html div#centercontent {margin-right:-3px}/* adjust for ie 3 pixel jog*/
    div#rightcontent {
     background: url(http://69.5.26.129/images/graduated_side.gif) top left repeat;
     margin: 0 0 0 520px;
     padding: 0;
     width: 180px;
     min-height: 866px;/*for moz*/
     border: 0;
     }
    * html div#rightcontent {height:866px;margin-left:517px;}/*ie adds 3 pixels back on because of 3 pixel jog*/ 
     
    *#rightcontent li {
     font-family: verdana, lucida, arial, sans-serif;
     font-size: 10px;  
     font-weight: bold; 
     margin: 0; 
     padding: 0 0 0 5px;
     text-transform: uppercase;
     text-align: left; 
     width: 165px;
     }
    That should fix most of the problems with any luck

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Norway
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is really good of you Paul. I will give it a shot and report back!

    Thanks - thought it was IE bugs but was not sure where I was missing the plot....

    Jonathan

  4. #4
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Norway
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mmmmm.....at first attempt, I get the wrapper div stopping short (on mac, have to go out to take a look on Win):

    This is the updated code as per Paul: http://69.5.26.129/test.php


    And this is the old code: http://69.5.26.129/test2.php

    What would be really good is to have the wrapper adjust automatically if the content in centercontent div extends far down the page, as opposed to overflowing, and the same with the side menu bar, the rightcontent div.

    At the same time, it looks better if the wrapper is a minimum height of 866px, to maintain the look over the entire site. Only if the site owners add too much content should the wrapper, and two main divs, centercontent and rightcontent, extend further down the page.

    Back to work!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I gave you a fix for the side column min-height.

    You just need to use min-height for good browsers and height alone for ie.

    e.g.
    Code:
    #test {
    min-height:866px; /*for good browsers*/
    }
    * html #test {height:866px} /* for ie only as ie treats height like min height anyway */
    The above works on 95% of browsers but not on ie5 mac and I believe some versions of safari although I don't have safari to check.

    I believe that you can fix safari by setting display:table-cell so google it if your concerned (or look at vinnies blog).

    Paul

  6. #6
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Norway
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for that. It works I guess on IE/Win (still have to spend time on a test box but I assume it works!), but does not, as you say, work on Safari.

    The content overflows from the wrapper div, and the side menu rightcontent div does not extend to the min-height.

    I tried the hack you suggest from vinnie's blog, but that did not work in Safari not IE/Mac. Opera it looks ok.

    Also some small adjustments to make on the height of the rightcontent div - it ends short of the wrapper div in Opera and Safari.

    Anyone have any idea when Safari will support min-height properly?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you look at this page there is a hack to make safari obey min-height by floating a 0px wide float to the side of the div and hold it open but not stop it expanding.

    http://www.pmob.co.uk/temp/3colfixedtest_4.htm

    You may be able to use a similar technique on your page. (However the display table cell should work ok. It works fine in mozilla.)

    Ie5 mac won't work with any of the techniques but you may be able to trick it if your patient enough.

    This layout appears to give ie5 mac 100% height and expansion.

    http://www.pmob.co.uk/temp/mac3column.htm

    It only works in quirks mode so the html4.01 is used without uri to force quirks mode. This allows us to get the 100% initial height. However mac won't extend the height so we simply wrap an ninner inside it with the same background colour. this inner expands and just grows out of the 100% outer to create the illusion of expansion.

    Frankly its a lot of work for such an old browser so I wouldn't really bother with it too much. I just did the layout as everyone said it couldn't be done

    Hope thats given you something to play about with

    Paul

  8. #8
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Norway
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Played around with the layout as per Paul's help, but did not bother with the safari or IE5/Mac hacks, since this site won't really be catering for a Mac audience, besides, Safari should support the min-height property in the next version, or so I am led to believe.

    I have another small issue in that IE6/Win is not displaying the side menu background properly. The gradient fill background is set to min-height for good browsers, and height for IE/Win. The background should go down to the bottom of the page, but does not.

    Think this page should show what I mean:
    http://69.5.26.129/5/

    Should, because I do not have control over the content and it could change. The article list on the left (centercontent div) and the menu on the right (rightcontent div) should both go down to the end of the wrapper div, which has a solid 2px border around it.

    The CSS is here: http://69.5.26.129/test.php

    Maybe Paul can answer this question, it should work and I do not know why it does not....

    Thanks again.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You won't be able to make the side column equalise because thats not what divs do You need to look at my 3 col demo (and FAQ) to understand the concepts but basically the solution is to repeat the background on the main wrapper as that is the only element that will expand with everything.

    Take out the bg gif from your right content and put it in like this instead.
    Code:
    div#wrapper {
     color: #663;
     background:#fff url(http://69.5.26.129/images/graduated_side.gif) repeat-y right top;
     width: 700px;
     margin: 0 auto;
     padding: 0;
     border: 2px solid #46402D;
     text-align: left;
     min-height:825px; /*for good browsers*/
     }
    Now it will go all the way to the bottom.

    Paul

  10. #10
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Norway
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul. You are very helpful and it is appreciated. I tried to access your 3 column page, but it appears to have been moved? Maybe its my server. Could you post the correct link?

    Thanks and regards.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The demo should be here ulnless they're messing about with the server again.

    http://www.pmob.co.uk/temp/3colfixedtest_4.htm

    Paul

  12. #12
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Norway
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, no the demo is not working. I use safari on a mac and it cant open the page within 60 secs.

    Re my page, I have adjusted the style sheet (the main style sheet, not the test.php style rules) as per your suggestions...

    I get the background repeating for 3 pixels or so above the titlebar div, which is the spider menu. That is on Safari, so I don't know what its like in IE/Win. I will go out to check on a test box.....

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi, no the demo is not working. I use safari on a mac and it cant open the page within 60 secs.
    Strange - I have no problems on the PC - Just tested it with mac capture (as I don't have safari) and it displays ok.

    http://rubix.retroweb.net/~danvine/icapture/10940.png

    I get the background repeating for 3 pixels or so above the titlebar div, which is the spider menu. That is on Safari, so I don't know what its like in IE/Win. I will go out to check on a test box.....
    There should be no problem doing what I say as its the simplest thing for any browser to just repeat a background down the side. You must have something interfering with it or you are drawing on top. It was working fine locally but I haven't looked at your updated version.

    Paul


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
  •