CSS Box problem with I.E. (Ok with firefox & opera)

Discussion in 'CSS' started by joewills, Feb 15, 2006.

0
  1. #1
    Sorry for the long post, but I thought it would be the easiest this way to explain my problem.

    I have tried to implement the css three column as kindly provided by ssi-developer.net:
    http://www.ssi-developer.net/main/templates/temps/3c-hd-ft-flex.htm
    (the code can downloaded here: http://www.ssi-developer.net/main/templates/3col.shtml)

    I alterations I have made are to make the columns fixed and added a margins to left and right(auto).

    This works fine in Firefox and Opera, but in In I.E. the middle column falls underneath the two side colums.

    The problem I have originates from the inclusion of the margin I believe. This puts the left and right columns out of sync (far left and far right).

    the css before margins included:

    #rh-col{
    position:absolute;
    top:62px;
    right:0;
    width:140px;
    z-index:2;
    background:#c0c0c0;
    color: #333333;}

    so I then changed the above to:

    #rh-col{
    float:right;
    top:62px;
    width:140px;
    z-index:2;
    background:#c0c0c0;
    color: #333333;}

    similarly I changed
    the left col to float left

    And then made sure that the left and right cols were called before the middle col in the html file. This worked as I wanted for Firefox and Opera, but not for I.E. Can any one suggest a fix? In I.E. the middle column falls underneath the two side colums.


    the css I used:



    /* Layout Stylesheet */
    body{
    margin: 0;
    padding:0;
    background:#808080;
    color: #333333;
    }

    #main {
    WIDTH: 750px;
    HEIGHT: 100%;
    MARGIN-LEFT: auto;
    MARGIN-RIGHT: auto;
    }

    #lh-col{
    float:left;
    top:62px;

    width:140px;
    z-index:3;
    background:#c0c0c0;
    color: #333333;}

    #rh-col{
    float:right;
    top:62px;
    width:140px;
    z-index:2;
    background:#c0c0c0;
    color: #333333;}

    #c-block {
    width:100%;
    z-index:1;
    background:#c0c0c0;
    color: #333333;
    height:80%;}

    #hdr{
    height:60px;
    border-bottom:1px solid #000000;
    width:100%;
    background:#eeeeee;
    color: #333333;
    margin:0;
    }

    #c-col{
    margin:0 142px 0 142px;
    position:relative;
    background:#ffffff;
    color: #333333;
    z-index:5;
    border: solid #000000;
    border-width:0 1px;
    }

    #ftr {
    width:100%;
    height:35px;
    border: solid #000000;
    border-width:1px 0;
    background:#eeeeee;
    color: #333333;
    margin:0;
    }



    and the html:

    <!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">
    <head>
    <title>CSS Page Template - Three Column Pixel Perfect - Header
    &amp; Footer</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
    <meta name="Robots" content="NOINDEX" />
    <meta http-equiv="PRAGMA" content="NO-CACHE" /><!--
    Web Site: www.ssi-developer.net
    Comments: Copyright 2003 www.ssi-developer.net
    Licence: Creative Commons - Non-commercial Share-Alike
    -->
    <link rel="stylesheet" type="text/css"
    href="3c-hd-ft-flex-layout.css" />
    <link rel="stylesheet" type="text/css"
    href="3c-hd-ft-flex-presentation.css" />
    </head>
    <body>
    <div id="main">
    <!-- header div -->
    <div id="hdr">Header Content Here</div>
    <!-- left column -->
    <div id="lh-col"><br />
    <h4 align="center">Left Column</h4>
    <p align="center">The left col can be used for navigation links,
    search box etc.</p>
    <br />
    <br />
    <p align="center"><a
    href="http://www.ssi-developer.net/main/templates/">View more
    templates.</a></p>
    </div>
    <!-- end of left column -->
    <!-- right column -->
    <div id="rh-col"><br />
    <h4 align="center">Right Column</h4>
    <p align="center">More links?<br />
    Advertisements?</p>
    </div>
    <!-- end of right column -->
    <!-- center column -->
    <div id="c-block">
    <div id="c-col">
    <h3 align="center">Three Column Pixel Perfect with Header &amp;
    Footer - MK 1</h3>
    <div align="center" style="color:red;">Ver 2.3</div>
    <p>I have intended this to be my most complete page template.</p>
    <p>The left and right columns are positioned absolutly, as in
    previous template examples. But now we have a header and footer.
    One problem we first have to overcome is that it's impossible to
    get the left and right columns to always match the height of the
    content column. If the L&amp;R columns are too short we see the
    page background and quite simply it looks awful. If the L&amp;R
    columns are too long they overlap the page footer.</p>
    <p>To overcome the first problem we enclose the main content div
    in an outer div. This unfortunatly has to be the same colour as
    the L&amp;R columns which must be the same colour as each
    other.</p>
    <p>The overlap? All I think we can do is to stack the footer
    higher than the L&amp;R columns and risk losing content. :(</p>
    <p>One good thing about this method is that we can set the
    margins of the center content div much larger than the width of
    the left and right columns and therefore should not need to worry
    about IE5x PC's stupidity. And it still gives the appearance of
    being pixel perfect.</p>
    <p>Note also, no need for the box hack as we have built some
    flexibility into the template!! IMO. Does this hold true in your
    browser? Please let me know.</p>
    <p>Also, one potential problem. If you set position:relative for
    the #c-block it completely hides the left and right columns. So
    just leave it out? In IE6 yes or else nest ALL the blocks within
    this div, including the header div.</p>
    <br />

    <p>This template has been tested in:</p>
    <ul>
    <li>Mozilla 1.5b &amp; Firebird 0.6.1</li>
    <li>Internet Explorer 6</li>
    <li>Netscape 7.1</li>
    <li>Opera 7.11</li>
    </ul>
    <p>Changes in this version:</p>
    <ol>
    <li>Defined zero for the body to fix a problem in Opera.</li>
    <li>specified padding for h3 which was the title in the content
    div, this forces the top of the div up to where it should be (it
    seems to collapse??)</li>
    </ol>
    <br />
    <p style="font-weight: bold;">Filler Content</p>
    <p lang="ga">Dáig alta in mac sin i tig a athar &amp; a mathar
    icon airdig i m-Maig Muirthemne, ocus adfeta dó scéla na maccaemi
    i n-Emain. Dáig is amlaid domeill Conchobar in rigi, o ro gab
    rígi in rí, .i. mar atraig fóchetóir césta &amp; cangni in
    choicid d'ordugud. In lá do raind i trí asa athlil: cetna trian
    de fóchetóir ic fegad na maccaem ic imbirt chless cluchi &amp;
    immanae, in trian tanaise dond ló ic imbirt brandub &amp;
    fidchell, &amp; in trian dedenach ic tochathim bíd &amp; lenna,
    con-dageib cotlud for cách, aes cíuil &amp; airfitid dia thalgud
    fri sodain. Ciataim ane ar longais riam reme dabiur bréthir, ar
    Fergus, na fuil in hErind no i n-Albain óclach macsamla
    Conchobair.</p>
    <p lang="ga">Ocus adfeta don mac sin scéla na maceáem &amp; na
    maccraide i n-Emain, &amp; radis in mac bec ria mathair ar co
    n-digsed dá chluchi do chluchemaig na Emna. Romoch duitsiu sain a
    meic bic, ar a mathair, co n-deoch anruth do anrothaib. Ulad lett
    no choimthecht ecin do chaimthechtaib Conchobair, do chor th'
    aesma &amp; t'imdegla for in maccraid. Cían lim-sa di sodain a
    mathair, ar in mac bec, &amp; ni biu-sa oca idnaide acht
    tecoisc-siu dam-sa cia airm itá Emain. Is cían uait, ar a
    mathair, airm in-das-fil. Sliab Fúait etrut &amp; Emain. Dobér-sa
    ardmes furri amne, ar esium.</p>
    <br />
    </div>
    <!-- end of center column --></div>
    <!-- end c-block -->
    <div id="ftr" align="center">Footer Div - Copyright Information
    </div>

    </div>
    </body>
    </html>

    Thanks if anyone has the time,

    Joe
     
    joewills, Feb 15, 2006 IP
  2. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Wow, you really don't need that much code just to get a three column layout. I'm just going to post some brand new code. Here is a full example page, but it's really only the CSS that's important. 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-us">

<head>
<title></title>
<style type="text/css" media="screen">

#Menu {
	background-color: rgb(255,245,245); /* so we can see it */
	width: 150px;
	float: left;
}
#SecondaryMenu {
	background-color: rgb(245,255,245); /* so we can see it */
	width: 150px;
	float: right;
	text-align: right;
}
#Content {
	background-color: rgb(245,245,255); /* so we can see it */
}

#Menu UL, #SecondaryMenu UL {  /* make the links look nicer */
	list-style-type: none;
	margin: 0;
	padding: 0;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
</head>

<body>

<div id="Menu">
  <ul>
    <li><a href="">A</a></li>
    <li><a href="">B</a></li>
    <li><a href="">C</a></li>
    <li><a href="">D</a></li>
  </ul>
</div>

<div id="SecondaryMenu">
  <ul>
    <li><a href="">Aa</a></li>
    <li><a href="">Ab</a></li>
    <li><a href="">Ac</a></li>
    <li><a href="">Ad</a></li>
  </ul>
</div>

<div id="Content">
  <p>Hello, World!</p>
</div>

</body>

</html>
    HTML:
     
    FeelLikeANut, Feb 15, 2006 IP