CSS layout looks fine in IE but is goofed up in FireFox.

Spectur · #1 (**permalink**) 02-21-2006, 10:23 AM

hi all,

I have a site I am building a template for . A basic css 3 column with header and footer. The layout looks fine in IE but in FireFox the layout is out of alignment and also some of the Text does not appear. I am not using any IE only css tags.
The templeate can be seen at
www.programmervault.com/advime/template.asp

Any suggestions would be great. this is really frustrating as I need this layout to work in both IE and Firefox.

The css is as follows:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
background-color:#CCCCCC;
}

#wrapper{position:relative;
width:800px;
margin:0 auto;
background-color:#FFFFFF;
}
#TR{
position:relative;
width:800px;
height:23px;
margin:0 auto;

}
#TRL{
float:left;
width:24px;
height:23px;
background-image:url(images/rtLeft.gif);}

#TRC{
float:left;
height:23px;
width:752px;
background-color:#F9A2A2;
}
#TRR{float:right;
width:24px;
height:23px;
background-image:url(images/rtRight.gif);}

#banner {
position:relative;
width:800px;
height:160px;
margin:0 auto;
background-color:#f9a2a2;
font-size: 1.3em;
}
#bannerlogo{
float:left;
width:229px;
height:160px;
background-image:url(images/baselogo.jpg) ;}
#bannertext{
float:right;
width:571px;
height:160px;
margin:0 auto;}

#bannertext h1{
top:3px;
font-family: Arial;
font-size:2.4em;
color:#FFFFFF;
text-align:center;
}

#bannertext p{
font-family: Arial;
font-size:1em;
color:#FFFFFF;
text-align:center;
text-decoration:underline;
padding-top:2px;}

#bannertextarea{
float:right;
width:571px;
height:110px;
margin:0 auto;}

#bannertextlogon{
float:right;
width:500px;
height:50px;
margin:0 auto;
}
#bannertextlogon label{
font-size:.8em;
}
#bannertextlogon input{
font-size:.5em;
height:20px;
}
#menu{
position:relative;
margin:0 auto;
width:800px;
height:30px;}

#Content{
position:relative;
margin:0 auto;
width:800px;}

#ContentLeft{float:left;
width:150px;
max-width:150px;
background-color:#E6D668;
font-size:.8em;
}

#ContentLeft a{

color:#0000FF;
text-decoration:none;
}

#ContentLeft a:hover{
color:#FF0000;
font-weight:200;
text-decoration:none;
}
#ContentCenter{float:left;
width:500px;
max-width:500px;

}

#ContentCenter p{
text-indent:5px;
padding-left:5px;
padding-right:5px;
font-size:.8em;
}

#ContentCenter table{
font-size:.9em;
}

#ContentCenter h3{
padding-left:5px;
padding-right:5px;

}
#ContentCenter li{
text-indent:5px;
padding-left:5px;
font-size:.9em;
}
#ContentRight{float:right;
width:150px;
max-width:150px;
background-color:#E6D668;
font-size:.8em;
}

#footer{
position:relative;
margin:0 auto;
width:800px;
font-size:.9em;
background-color:#FFFFFF;}

#footer p{
text-align:center;
}
#BR{
position:relative;
width:800px;
height:23px;
margin:0 auto;
}
#BRL{
float:left;
width:24px;
height:23px;
background-image:url(images/rbLeft.gif);}

#BRC{
float:left;
height:23px;
width:752px;
background-color:#F9A2A2;
}
#BRR{float:right;
width:24px;
height:23px;
background-image:url(images/rbRight.gif);}

.Golden{color:#E6D668;
font-size:1.5em;}

.MenuHeading{
color:#333333;
font-weight:bold;
font-size:1.2em;
text-align:center;
}
.MenusubHeading{
color:#FF3399;
font-weight:bold;
font-size:.9em;
text-align:center;
}
.textbox {
font-size:.8em;
}
.conentquestion{
color:#000099;
font-weight:bold;
font-size:.9em;
}

And the template is as follows:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="advime.css" media="screen" />

</head>
<body>
<div id="TR">
<div id="TRL"></div>
<div id="TRC"></div>
<div id="TRR"></div>
</div>
<div id="wrapper">
<div id="banner">
<div id="bannerlogo"></div>
<div id="bannertext">
<h1>Adv<span class="Golden ">ί</span>me</h1>
</div>
</div>
<div id="menu"></div>
<div id="Content">
<div id="ContentLeft">

left </p></div>
<div id="ContentCenter">

Center Content</p></div>
<div id="ContentRight">

right</p></div>
</div>

</div>
<div id="footer">

<%response.write("Copyright DatabaseEngineers 2006-" & cstr(year(now)))%>
</p></div>
<div id="BR">
<div id="BRL"></div>
<div id="BRC"></div>
<div id="BRR"></div>
</div>
</body>
</html>

ADAM Web Design · #2 (**permalink**) 02-21-2006, 12:13 PM

FireFox doesn't handle what you want the same as IE does. Quite frankly, I prefer IE's idea for it over FF, but to each their own.

I've developed a cross-browser layout which will work, if you add a centering wrapper div to the equation. This layout is unique in that it presents the content first and foremost.

3-column fixed width layout, with header and footer

Additional CSS required:

Code:

#centeringdiv {
     margin-left:  auto;
     margin-right:  auto;
     margin-top:  0;
     margin-bottom:  0;
     padding:  0;
     width:  (your width here);
     position:  relative;  /* This is so the absolutely positioned elements position properly. */
}

Additional HTML required:

Code:

<body>
<div id="centeringdiv">
....your HTML here
</div>
</body>

Give that a go and see how it works out for you.