SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Browser compatibility issue with 3-column fixed width design

    I've run into a column spacing issue between Explorer and Safari. The problem is getting an equal amount of spacing between the center column and the left and right column. If the layout is balanced in Explorer, the center column has less space on the left side than right side in Safari. Is there some hack I need to employ? One thing to note, there is a div with a 5px border on the outer edge of the 3-column container. The fixed width is 1024px. Finally, the look I am trying to achieve mimics that of netvibes.com.

    Below is the CSS code for the columns.

    Any advice would be greatly appreciated.

    Thanks


    body {
    background-image: url(images/background-image.gif);
    background-color: #c8deee;
    background-repeat: repeat-x;
    margin: 0;
    padding: 0 10px 0 10px;
    color: black;
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 12px;
    }

    #wrapper {
    margin: 0 auto 0 auto;
    padding: 0px;
    width: 1024px;
    }

    #boarder-area {
    margin: 0;
    padding: 0;
    border: 5px solid #0a416a;
    background-color: #ffffff;
    }


    /* Area Below Header */
    #three-col-holder {
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    }

    #content {
    top: 0;
    left: 0;
    padding: 0 0 15px 0 ;
    margin: 15px;
    min-height: 700px
    }

    /* Leftside Content */
    #leftside {
    width: 318px;
    top: 0;
    left: 0;
    float: left;
    margin: 0;
    }

    .leftbox {
    background-color: #ffffff;
    width: 318px;
    margin: 0 0 15px 0;
    padding: 0;
    min-height: 200px
    }


    /* Rightside Content */
    #rightside {
    width: 318px;
    float: right;
    top: 0;
    left: 0;
    margin: 0;
    }

    .rightbox {
    background-color: #ffffff;
    width: 318px;
    margin: 0 0 15px 0;
    padding: 0;
    min-height: 200px
    }


    /* Center Column */
    #center {
    margin: 0 328px 0 328px;
    padding: 0;
    width: 318px;
    }

    .centerbox {
    background-color: #ffffff;
    width: 318px;
    margin: 0 0 15px 0;
    padding: 0;
    min-height: 200px
    }

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

    You missed out the most important part of the problem - the html

    I can take a guess that you have something like this but of course you may not have a doctype which will have wasted my effort.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    body {
    background-image: url(images/background-image.gif);
    background-color: #c8deee;
    background-repeat: repeat-x;
    margin: 0;
    padding: 0 10px 0 10px;
    color: black;
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 12px;
    }
    
    #wrapper {
    margin: 0 auto 0 auto;
    padding: 0px;
    width: 1024px;
    }
    
    #boarder-area {
    margin: 0;
    padding: 0;
    border: 5px solid #0a416a;
    background-color: #ffffff;
    }
    
    
    /* Area Below Header */
    #three-col-holder {
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    }
    
    #content {
    top: 0;
    left: 0;
    padding: 0 0 15px 0 ;
    margin: 15px;
    min-height: 700px
    }
    
    /* Leftside Content */
    #leftside {
    width: 318px;
    top: 0;
    left: 0;
    float: left;
    margin: 0;
    }
    
    .leftbox {
    background-color: red;
    width: 318px;
    margin: 0 0 15px 0;
    padding: 0;
    min-height: 200px
    }
    
    
    /* Rightside Content */
    #rightside {
    width: 318px;
    float: right;
    top: 0;
    left: 0;
    margin: 0;
    }
    
    .rightbox {
    background-color: red;
    width: 318px;
    margin: 0 0 15px 0;
    padding: 0;
    min-height: 200px
    }
    
    
    /* Center Column */
    #center {
    margin: 0 328px 0 328px;
    padding: 0;
    width: 328px;
    }
    .centerbox {
    background-color: red;
    width: 328px;
    margin: 0 0 15px 0;
    padding: 0;
    min-height: 200px
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="boarder-area">
            <div id="content">
                <div id="leftside">
                    <div class="leftbox">Left content</div>
                </div>
                <div id="rightside">
                    <div class="rightbox">Right content</div>
                </div>
                <div id="center">
                    <div class="centerbox">Center</div>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    Assuming that is close to your structure then the first thing is that the centre area should be 328px wide and not 318px wide.

    The second problem will be the IE 3px jog (see faq on floats) and you will need to offset that like so.

    Code:
    * html #center{margin: 0 325px 0 325px}
    However when you have a fixed width and you want three elements across you should float all the elements and avoid the 3 pixel jog altogether. (remember to clear the floats)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    body {
    background-image: url(images/background-image.gif);
    background-color: #c8deee;
    background-repeat: repeat-x;
    margin: 0;
    padding: 0 10px 0 10px;
    color: black;
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 12px;
    }
    
    #wrapper {
    margin: 0 auto 0 auto;
    padding: 0px;
    width: 1024px;
    }
    
    #boarder-area {
    margin: 0;
    padding: 0;
    border: 5px solid #0a416a;
    background-color: #ffffff;
    }
    
    
    /* Area Below Header */
    #three-col-holder {
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    }
    
    #content {
    top: 0;
    left: 0;
    padding: 0 0 15px 0 ;
    margin: 15px;
    min-height: 700px
    }
    /* Leftside Content */
    #leftside {
    width: 318px;
    top: 0;
    left: 0;
    float: left;
    margin: 0;
    }
    
    .leftbox {
    background-color: red;
    width: 318px;
    margin: 0 0 15px 0;
    padding: 0;
    min-height: 200px
    }
    
    /* Rightside Content */
    #rightside {
    width: 318px;
    float: right;
    top: 0;
    left: 0;
    margin: 0;
    }
    
    .rightbox {
    background-color: red;
    width: 318px;
    margin: 0 0 15px 0;
    padding: 0;
    min-height: 200px
    }
    
    
    /* Center Column */
    #center {
    padding: 0;
    width: 328px;
    float:left;
    margin:0 10px;
    }
    .centerbox {
    background-color: red;
    width: 328px;
    margin: 0 0 15px 0;
    padding: 0;
    min-height: 200px
    }
    .clearer{clear:both;height:1px overflow;hidden}
    * html #content{height:700px}
    * html .leftbox,* html .rightbox{height:200px}
    
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="boarder-area">
            <div id="content">
                <div id="leftside">
                    <div class="leftbox">Left content</div>
                </div>
                            <div id="center">
                    <div class="centerbox">Center</div>
                </div>
    <div id="rightside">
                    <div class="rightbox">Right content</div>
                </div>
             <div class="clearer"></div>
            </div>
        </div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I played around with the code you provided and could not resolve the issue I am having. I then copied and pasted the code into my editor and viewed in the browsers. The page looks fine in Safari, in Explorer 6, the left and right content boxes are flush with the outside border and the center box is much closer to the left side than the right.

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

    Sorry, I missed a couple of lines while I copied and pasted the code here.

    This is working:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    background-image: url(images/background-image.gif);
    background-color: #c8deee;
    background-repeat: repeat-x;
    margin: 0;
    padding: 0 10px 0 10px;
    color: black;
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 12px;
    }
    
    #wrapper {
    margin: 0 auto 0 auto;
    padding: 0px;
    width: 1024px;
    }
    #boarder-area {
    margin: 0;
    padding: 0;
    border: 5px solid #0a416a;
    background-color: #ffffff;
    }
    
    /* Area Below Header */
    #three-col-holder {
    padding: 0;
    margin: 0;
    }
    
    #content {
    padding: 0 0 15px 0 ;
    margin: 15px;
    min-height: 700px
    }
    /* Leftside Content */
    #leftside {
    width: 318px;
    float: left;
    margin: 0;
    }
    
    .leftbox {
    background-color: red;
    width: 318px;
    margin: 0 0 15px 0;
    padding: 0;
    min-height: 200px
    }
    
    /* Rightside Content */
    #rightside {
    width: 318px;
    float: right;
    margin: 0;
    }
    
    .rightbox {
    background-color: red;
    width: 318px;
    margin: 0 0 15px 0;
    padding: 0;
    min-height: 200px
    }
    
    /* Center Column */
    #center {
    padding: 0;
    width: 328px;
    float:left;
    margin:0 10px;
    }
    .centerbox {
    background-color: red;
    width: 328px;
    margin: 0 0 15px 0;
    padding: 0;
    min-height: 200px
    }
    .clearer{clear:both;height:1px overflow;hidden}
    * html #boarder-area {height:1&#37;}
    * html #content{height:700px}
    * html .leftbox,
    * html .rightbox,
    * html .centerbox{height:200px}
    
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="boarder-area">
            <div id="content">
                <div id="leftside">
                    <div class="leftbox">Left content</div>
                </div>
                <div id="center">
                    <div class="centerbox">Center</div>
                </div>
                <div id="rightside">
                    <div class="rightbox">Right content</div>
                </div>
                <div class="clearer"></div>
            </div>
        </div>
    </div>
    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, thank you very much. This is almost there. Your code works fine. The issue I'm having now, and pardon me for not including this earlier, is that the boxes (i.e. leftbox, etc.) need to have a 1px border around them. Once I add this in. the margins are off and in IE6, the right column drops. I believe I need to minimize the width of the columns and/or boxes but any marginal changes I make does not result in the result I am looking for.

    Thanks,

    Mike Behrens

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

    Al you need to do is reduce the width by 2px on those inner elements. You shouldn't need to change any margins.

    Here's my code adjusted (plus a fix for IE7 that I missed out earlier).

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    background-image: url(images/background-image.gif);
    background-color: #c8deee;
    background-repeat: repeat-x;
    margin: 0;
    padding: 0 10px 0 10px;
    color: black;
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 12px;
    }
    
    #wrapper {
    margin: 0 auto 0 auto;
    padding: 0px;
    width: 1024px;
    }
    #boarder-area {
    margin: 0;
    padding: 0;
    border: 5px solid #0a416a;
    background-color: #ffffff;
    min-height:0;
    }
    
    /* Area Below Header */
    #three-col-holder {
    padding: 0;
    margin: 0;
    }
    
    #content {
    padding: 0 0 15px 0 ;
    margin: 15px;
    min-height: 700px
    }
    /* Leftside Content */
    #leftside {
    width: 318px;
    float: left;
    margin: 0;
    }
    
    .leftbox {
    background-color: red;
    width: 316px;
    margin: 0 0 15px 0;
    padding: 0;
    min-height: 200px;
    border:1px solid #000;
    }
    
    /* Rightside Content */
    #rightside {
    width: 318px;
    float: right;
    margin: 0;
    }
    
    .rightbox {
    background-color: red;
    width: 316px;
    margin: 0 0 15px 0;
    padding: 0;
    min-height: 200px;
    border:1px solid #000;
    }
    
    /* Center Column */
    #center {
    padding: 0;
    width: 328px;
    float:left;
    margin:0 10px;
    }
    .centerbox {
    background-color: red;
    width: 326px;
    margin: 0 0 15px 0;
    padding: 0;
    min-height: 200px;
    border:1px solid #000;
    }
    .clearer{clear:both;height:1px overflow;hidden}
    * html #boarder-area {height:1&#37;}
    * html #content{height:700px}
    * html .leftbox,
    * html .rightbox,
    * html .centerbox{height:200px}
    
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="boarder-area">
            <div id="content">
                <div id="leftside">
                    <div class="leftbox">Left content</div>
                </div>
                <div id="center">
                    <div class="centerbox">Center</div>
                </div>
                <div id="rightside">
                    <div class="rightbox">Right content</div>
                </div>
                <div class="clearer"></div>
            </div>
        </div>
    </div>
    </body>
    </html>
    Hope that helps


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
  •