CSS Layout Problem [Archive] - CodingForums.com

wilber

04-18-2007, 03:02 PM

Hi everyone!
I am trying to construct a tableless webpage. And although the webpage displays fairly well (i think) in IE7, Firefox, and Opera i cannot get the navbar to be displayed with the same width as the rest of the webpage. Would also appreciate any and all other suggestions for making the webpage better.

The webpage can be viewed HERE: (http://www.freewebs.com/diarco/newpage.html)

Thanks in advance for any and all help. Wilber

koyama

04-18-2007, 03:19 PM

Would also appreciate any and all other suggestions for making the webpage better.
Before you continue you need to add a document type declaration at the top. To learn why it makes a difference, start reading this: Quirks mode and strict mode
(http://www.quirksmode.org/css/quirksmode.html)
Then to select the right document type, use this as a reference: Activating the Right Layout Mode Using the Doctype Declaration (http://hsivonen.iki.fi/doctype/)

Probably, the right one for you would be this:

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

It will affect the widths for some of your boxes when viewed in IE because this browser will now use the correct CSS box model.

wilber

04-18-2007, 03:54 PM

Have sorted the Doctype out and thanks to koyama for pointing it out but still can't work out why the navbar won't reach the left-hand side? Having a really blank day today.

koyama

04-18-2007, 04:03 PM

still can't work out why the navbar won't reach the left-hand side?

ul {
font-size: 10pt;
font-family: Times New Roman;
font-weight: 900;
text-align: left;
text-decoration: none;
padding-left: 10px; <----
margin: 0;
}

wilber

04-18-2007, 04:59 PM

Thanks for the help koyama. Have deleted the padding: 10px; which left the navbar nestled against the header. Used <br clear="left"> and everthing is as i want. Cheers