CSS DIV aligment

BTbuses

07-06-2007, 05:25 AM

Hello

I have changed my website from tables to DIV statements, and whilst I believe I have everything working correctly now, there is only 1 issue that remains.

The main issue is this: I have the header, the navigation, the content.
All displays correctly between both IE & FF that i've tried in, but the content comes out of alignment once any text goes past the navigation height.
For an example, go to www.brisbanetransport.info.

Here is the css code if it is any help in seeing what I may have done wrong or left out!
body {
font: 10pt Arial;
background-color: #FFF;
color: #000;
margin: 0px 0px 0px 0px;
}

h1 {
font: 16pt Arial;
font-weight: bold;
}

h2 {
font: 12pt Arial;
font-weight: bold;
}

A:link {color: #000000}
A:visited {color: #000000}
A:active {color: #000000}
A:hover {color: #FF0000}

#header {
font: 16pt Arial;
background-color: #041943;
color: #FFF;
margin: 20px 0px 0px 0px;
padding-left: 15px;
}

#navigation {
float: left;
font: 10pt Arial;
background-color: #DADADA;
color: #000;
margin: 15px;
margin-left: 15px;
width: 190px;
padding: 5px;
}
#navigation A:link {color: #041943}
#navigation A:visited {color: #041943}
#navigation A:active {text-decoration: none; color: #041943}
#navigation A:hover {color: #FF0000}

#content {
background-color: #FFF;
color: #000;
margin-left: 225px;
margin-right: 5px;
font: 10pt Arial;
}

table {
font: 10pt Arial;
color:#000;
border-width: 1px;
border-spacing: 0px;
border-style: solid;
border-color: #CCC;
border-collapse: collapse;
background-color: transparent;
margin: 0;
}

table th {
border-width: 1px;
padding: 2px;
border-style: solid;
border-color: #CCC;
color: #FFF;
background-color: #041943;
-moz-border-radius: ;
}
table td {
border-width: 1px;
padding: 2px;
border-style: solid;
border-color: #CCC;
color: #000;
background-color: transparent;
-moz-border-radius: ;
}

Thankyou in advance!

BWiz

07-06-2007, 05:44 AM

I don't fully understand what you're trying to say. Could you elaborate on it, or give a visual example please?

BTbuses

07-06-2007, 06:19 AM

Sorry, hopefully this makes abit more sense.

The header across the page works perfectly
The navigation to the left of the page works perfectly
The content, will display at 225px from the left page margin correctly, but if there is more text in the content then there is of menu links in the navigation, the text from the content goes back a few pixels.

So in theory, if you run a ruler down the page of where the content starts, you'll notice that the it isn't straight.

http://www.brisbanetransport.info/other/btbusesscrnprnt.jpg

you'll notice that i've added a red line to indicate that the text is straight, but once it gets past the navigation pane, the content then goes to the left!

I hope that now makes more sense, sorry!

_Aerospace_Eng_

07-06-2007, 07:34 AM

First add a doctype to your page. I recommend this one. It goes above the <html> tag. Read the sticky for more info on doctypes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Without a doctype IE6 and IE7 were in quirks mode so they won't display some things properly.

Now on to your problem. Your #navigation div is taking of 235px of horizontal space, 10px padding (5px padding times 2), (15px margin times 2), plus the width 190px. You only give a left margin of 225px to your #content, that needs to be 235px in order for the text to not move to the left. Another issue that is occurring in both IE6 and IE7 (due to no doctype for IE7) is you are experiencing the double margin bug on your #navigation div. To fix this you need to add display:inline; to the CSS for #navigation.

BTbuses

07-06-2007, 10:26 AM

Thankyou, that seems to work perfectly.

Although it did make the <li> statements do silly things, so I changed the navigation links from <li> to a character which looks even better!

Thankyou once again!