CSS - Netscape 6 & 7 won't mark up correctly

[cluksha]

I can admit it - I am a css wanna be. I can do it - in IE. But I can not seem to grasp the ability to make Netscape do what I want. I just haven't had time to thouroughly research and study css.

So I have a page (

http://www.echowebs.com/wendis/vertical.htm)

This works as I want in IE - But Netscape is terrible. Can anyone take a look and tell me what is going wrong.

Yes, I am looking for the easy way out - someone tell me what is wrong, or the middle of the road - give me an idea and tell me where to look for the tight methods. I am willing to take the corrections and study them or look it up if I knew where to start.

Please help.

The css is here

http://www.echowebs.com/wendis/css/global.css

 

[3142]

I noticed that the hierarchy is not perfectly right, so you should fix it. Maybe it is also better to avoid short-hand at first and test the page on both of browser with full parameters.
Notice, that there is really some differences in CSS-P (positioning), so you should try different solutions for the result you have wanted. Pure formational problem.

 

[philote]

One major problem I see is that in your "frame" you have two divs (leftcolumn and content) that are floated. Floated elements are not supposed to be used to calculate the height for their containing element, so the "frame" isn't stretched to fit around those divs.
(See

http://www.w3.org/TR/CSS2/visudet.html#q17

)
I think you can fix this by putting another element, say a <p> or <div>, and give it "clear:left" in its style, but make sure it's not floated.


Also, IE does not compute widths correctly when padding and borders are used, so you have to sometimes peform a workaround to get the same look in IE and Netscape. See this link for more detail:

http://www.tantek.com/CSS/Examples/boxmodelhack.html