CSS help!

[Ferret]

I think I have tried that before and it stretched the page past the information on the page, I'll try it again

 

[reanjr]

Actually, I think that method will make it 110% the height of the viewport, not the content. And it will cause a scrollbar to appear. If it works in IE, I presume it would work in other browsers as well. IE is the worst browser for height support, sometimes sizing a box to fit the content even if you tell it not to.

Edit: Quick test in Opera and IE confirms it does exactly that. This is actually at the core of a script solution. You wait till the page is loaded then use ECMAScript (Javascript, VBScript, whatever) to measure the resulting height of the content and then set the nav to explicitly have that height.

 

[Sir Brennen]

IE does indeed have a problem with the 'height' attribute, especially for DIVs. Check out this site for a good explaination of the problem and a few samples of workaround code. I've had to use the hacks before, myself.

There's also a good article on Wikipedia about IE's Box Model Bug.

 

[Kurashu]

Ok. To clear this up, what do you mean exactly when you say you want the navigation to span the entire height of the site?

 

[reanjr]

More importantly:

1. What browsers need to be supported?
2. Are you using a strict DOCTYPE (this drastically changes the way browsers render things and usually should be used)?
3. What kind of background does the nav have? Tileable?
4. Is the layout liquid or static? (does the nav bar change size or position when the window is resized)

 

[Ferret]

I'm going to answer the last questions first...

I'd like to support IE and FF, cos I run FF and the world isn't perfect. I am actually trying to figure out how toget one CSS file for one and no the other, at the moment I'm trying to exploit the media=sceen, all glitch, so that 'netscape 4.x' (which I hope will include FF) ignores the IE CSS and runs the other one.

I don't know what DOCTYPE is but it sounds handy!

The nav bar has just got a colour in it.

The width and padding of the nav bar should be set as percentages, but only for FF as IE doesn't seem to support it (in the same way?)

And when I say I want it to scroll the entire site, I don't want a box I want a bar, so it changes 'length' if the site gets longer.

 

[reanjr]

Your best bet is to use a background image tiled to make it appear like a bar. Here is a good start: http://www.alistapart.com/articles/fauxcolumns/

Also, here is a primer on DOCTYPEs: http://www.ferrysoft.com/developmenthowtousedoctype.htm . The one to look at is the Strict DOCTYPE. IE will render pages in a more standards complient manner when using a Strict DOCTYPE. With other DOCTYPES (or none), it uses its backwords compatible rendering.

 

[Ferret]

I think I get the idea of DOCTYPES, it tells the browser how to interpret bad/outdated html? How does that help?

 

[reanjr]

I think I get the idea of DOCTYPES, it tells the browser how to interpret bad/outdated html? How does that help?

Because in IE and Opera (and probably KHTML-based browsers, but not Gecko-based), they will interpret the HTML slightly differently in order to jive with modern standards (Strict DOCTYPE) or older backwards compatible methods of rendering.

The benefit of using a strict a DOCTYPE is that subtle HTML errors (error is a strong word) will be readily apparent. When the errors are fixed, the resultant rendering should be fairly intuitive and have better support for web standards. For instance, some of IE's well-known box model bugs disappear with DOCTYPEs.

It's the lack of standards in IE that causes most of the problems in web development. The more you can do to avoid IE's backwards compatible rendering the easier it will be to make a web page appear how you really want it to. Especially if you want the page viewable in more than IE.

 

[Ferret]

I see, so stuff that Firefox understands and IE thinks might be old or new or up-in-the-air, the stict doctype tell them what to do.