this.
The lack of a URL in your doctype is putting the former browsers into quirks
mode, where they incorrectly use your height as a percentage of the
viewport.
Supply a correct doctype (look at
http://www.W3C.org for one) and all
browsers will treat height as a percentage of the containing box. Since that
menu div is floated it effectively has no containing box so the height is
not applicable and is ignored.
This is not going to happen. There are various ways to simulate this, such
as using background colours.
<tinkers/>
http://users.bigpond.net.au/rf/menu.html
I have purposely turned on borders for all elements so you can see where
they go. You would of course turn them off in production.
Be sure to change your font size so you can see the "navbar" changing in
width.
It's the header thats causing the problem. Look up width in the CSS
reccomendations:
http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width
You have specified 100%, that is 100% of the headers containing box (which
is effectively the viewport). The 100% is that of the content. That is, the
bits inside the borders. Then you have added a border which makes the div
wider than the viewport by two pixels.
Once again you are running IE in quirks mode where is uses it's Very Broken
box model (as against the just Normally Broken one), which includes the size
of the borders in the width calculation, the borders are (incorrectly)
inside the width.
If you do not specify any width at all for that div then it will naturally
expand to fill the viewport. The browser knows how to handle this.
This is also why (in quirks mode) you have a permanent vertical scroll bar.
The height of your page is 100% plus the height of that header. This is
always larger than the viewport. It makes me want to scroll down there to
see what you are concealing under the fold
You have a few more issues.
Do not use the transitional DTD unless you have a Very Good Reason for doing
so. Use the strict one. This will prevent you from making a mistake and
using deprecated HTML.
Do not specify font size in pixels. This prevents IE users from changing the
font size to their liking, unless they use the accessibility options to
ignore your fonts entirely.
Don't style a div to be a header. Use a <h1> element. It is suspected that
search engines pay more attention to headings than other text on the page.
Don't position things absolutely (the top menu). When I change my font size
the rest of the graphics and sometimes the text overlaps that absolutely
positioned stuff. Simply put the menu inside the content div and let it flow
normally. At the moment the position of those menu items also depends on the
viewport width. A wide viewport causes the menu "bar" to seperate and look
odd. A narrow viewport causes the menu items ot overlap and look unreadable.
I would not float: left the centre column. I would specify left and right
margins as big as the left and right columns. That way you can use up all
the canvas instead of having an inch or so of vacant space at the rigth of
that middle column.
You have not specified a with for the left column. This is in fact an error.
The recommendations state that floated elements should have a width (unless
there is an intrinsic width). The way it is you are defaulting to the width
of the content, which you don't know.
When you do specify a width make it in ems. That way the width of that
column adjusts to the font size, not some arbitrary percentage of the
viewport. Same for the right column. Specify width in ems. In addition this
allows you to know exactly where those columns end and allows you to specify
a correct margin for the centre column.
Don't specify padding etc in points. Points are for print media. Use pixels
where you can be sure you actually do have for example 10 pixels. 10 points
results in some variable number of pixels depending on the DPI setting in
the operating system (hint this is different for a Mac (76 IIRC) than for
Windows (96)).
Don't specify padding in %. Use ems. Padding really relates to the size of
the font, not the width or height of the viewport.
Don't justify text. This is OK on paper but on a screen becomes hard to
read. There are simply not enough pixels to do it properly.
Lastly, simplify your CSS. You don't need to specify default things (float:
none
. Use the shorcuts. border-top: solid 1px black; is easier to read and
easier to maintain than all those border properties you are using. Padding:
1em; rather than padding-left: ...
Remember KISS. If you don't have a Really Good Reason for something being
there then remove it.
HTH
