SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE problems (simple question)

    Hello,

    I'm trying to create simple layout and have problems with IE. Layout is 3 columns, first and last columns are 10px wide and middle column is the rest of it (and all columns are 100% height). Left and right columns use image for background.

    It works perfectly with Mozilla and Opera, but with IE there is 3px spacing on left and right of middle column. I've seen that people change width of other columns to avoid this problem, but in my case its not an option because of background images and with other solutions that i've seen i won't be able to keep 100% height. I'm sure there is a simple solution for problem, but i can't figure it out. Can anyone help?

    Url of test page: http://www.phpbbstyles.com/temp/tests/100_height/

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

    This is the famous ie 3 pixel jog and the simplest answer is to give ie a couple of styles to counteract it.

    IE adds 3 pixels of space to static content around floats and there is no normal way to reduce it. Therefore a style is reequired to offeset the difference.

    Just add this code to the end of the stylesheet.
    Code:
    * html #border_left {margin-right:-3px}
    * html #border_right {margin-left:-3px}
    The star selector hack is used to give styles to ie only and is quite safe to use and does validate even though its not really valid (if that makes sense).

    For more info on the star selector hack see here:

    http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html

    Hope that helps.

    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Just looking at your code - Do you expect the 2 floated side columns to extend past 100% when the content in the centre is more than a page length?

    If you are keeping your page to viewport height and the page isn't going to scroll then your design is ok.

    However if you are going to have content that is longer than the viewport then your left and right columns will not extend with it.

    The only way they can extend is if they are part of the element that is extending.

    You could repeat one column on the body element and then another on a wrapper element that holds all your content. This will allow both columns to extend with content.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>{SITENAME} :: {PAGE_TITLE}</title>
    <style type="text/css">
    <!--
    body, html { margin: 0; padding: 0; height: 100%; }
    body { 
     padding-left:10px;
     background:#FFF url(http://www.phpbbstyles.com/temp/test...order_left.gif) repeat-y left top;
    }
    #bodybg {background:#fff url(http://www.phpbbstyles.com/temp/test...ht/logo_bg.gif) repeat-x;}
    #wrapper {
     min-height: 100%;
     padding-right:10px;
       background: url(http://www.phpbbstyles.com/temp/test...rder_right.gif) repeat-y right top;
     }
    * html #wrapper {height:100%} /* for ie*/
    div>p {margin-top:0}
    -->
    </style>
    </head>
    <body>
    <div id="wrapper"> <!-- all content must be contained in #wrapper otherwise bg image won't extend with it. -->
      <div id="bodybg"> 
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
      </div>
    </div>
    </body>
    </html>
    If this wasn't your plan then ignore the above

    Paul

  4. #4
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, that was my plan. It might extend in width and in height.
    Again, thanks a lot for help !!!


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
  •