CSS Positioning, probably an easy fix, help!

pburgh · 05-26-2005, 03:49 PM

Hey all... I'm new to css positioning, and I can't seem to get past the seemingly simple snag. Here's my css and html page. Everything looks peachy in IE, but not in Firefox. I know, Firefox is reading it correctly most likely, but I'm concerned over the fact that they are rendering differently, not which one is correct : ) I'm sure my approach is all hacked up as well!

How can I get my spans to line correctly? There should be a header bar, left nav, and body, all with a uniform spacing around the common edges. You'll see what I mean if you load the html.

TIA,

Bryan

HTML:

<html>
<head>
<title>CSS Site</title>
<link href="site.css" rel="stylesheet" type="text/css">
</head>
<body>
This is my title
Test
More text
</body>
</html>

CSS:

.header {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color:#fff;
padding: 5px;
width:750px;
background-color:#c5c5c5;
border: 1px solid #000;
position:absolute;
left:1em;
top:1em;
}

.leftNav {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#fff;
padding: 5px;
width:126px;
background-color:#999;
border: 1px solid #000;
position:absolute;
left:1em;
top:3.8em;
}

.content {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#000;
padding: 5px;
width:619px;
height:500px;
background-color:#f4f4f4;
border: 1px solid #000;
position:absolute;
left:14.1em;
top:3.8em;
}

mark87 · 05-26-2005, 06:08 PM

I think I understood... Change the width of the left Nav to around 114px.

I placed the whole lot in one file to make it easier for me to see but change it back to an external stylesheet if you want -

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>

<style type="text/css">
.header {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color:#fff;
padding: 5px;
width:750px;
background-color:#c5c5c5;
border: 1px solid #000;
position:absolute;
left:1em;
top:1em;
}

.leftNav {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#fff;
padding: 5px;
width:114px;
background-color:#999;
border: 1px solid #000;
position:absolute;
left:1em;
top:3.8em;
}

.content {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#000;
padding: 5px;
width:619px;
height:500px;
background-color:#f4f4f4;
border: 1px solid #000;
position:absolute;
left:14.1em;
top:3.8em;
}
</style>

</head>
<body>
<span class="header">This is my title</span>
<span class="leftNav">Test</span>
<span class="content">More text</span>
</body>
</html>

pburgh · 05-26-2005, 06:46 PM

wow, i'm smart

thanks!