CSS Netscape problem 1

[HigherHigher]

Hi everyone.

I built one xhtml transitional page at

http://www.shm-design.com/ergo/index.php.

It works fine on Internet Explorer PC version. Netscape 6 is tricky and I do not understand how to fix it so it can work for Netscape. The problem is the text from content column and navigational column move up or hidden to the main banner.

I tried to add margin-top: 150px to content column. It looks okay but it screw ups for IE.

I want to fix the problem so it can work on both browsers.

Any help is greatly appreciated.

Thank you.

Sam

 

[Vragabond]

IE is confused while Geckos (Mozilla, Netscape and FF) stay firmly in what you told them. Let's review. You said that #navcontainer is 24px high. Now, #navcontainer contains a bunch of links, which nicely fall into that category. It also contains (under the 21px high options) a 173px high image. It has been a while since I had math class but I do know that 21px + 173px = much much more than 24px. IE expands the #navcontainer to fit everything in it. WRONG! Netscape keeps #navcontainer at 24px and just flows everything else over it. Remove the height declaration from #navcontainer (when none is specified auto value is assumed which means 'accomodate the content'). Voila. Geckos like your page again.

I hope you realize that Geckos will also write text out of the frame if frame exceeds the 1200 something height.

 

[HigherHigher]

Thank you for helping me out Vgaraboond. Yeah every browser likes my page now. Thanks to you.
I need your help once more. The left column is called sidebar-a and sidebar-b is the right column. It shows a gap of space on the bottom. How do I fix that for Netscape, FF and Geckos?

 

[Vragabond]

What you are experiencing is one of the weirdest behaviours of Geckos. I've seen it a couple of times but have never really understood it. Content's first element is a <p> and that <p> has a default set of margins. These margins push the whole #content down, making it start lower than the other elements. By specifying margin-top: 0; to the .here element (the <p>) you can get rid of that oddity and have everything working the way you want to.

 

[HigherHigher]

You are great. Thank you. I will definitely see every reply of your CSS Archive. Once again, thanks Vragabond.

 

[HigherHigher]

I would like to go back to your first reply. "It has been a while since I had math class but I do know that 21px + 173px = much much more than 24px."

I give 184px height on my navcontainer and it fits nicely on Netscape 6, however FireFox needs 194px. I guess it's -10 kind of thing here. Auto does not work for Netscape. Is there a hack that I can use for both browsers?

"also write text out of the frame if frame exceeds the 1200 something height." Are you saying this applies to a frame website only? So far my height exceeds 1290px.

 

[Vragabond]

on #1: I suggest you do not support Netscape 6. That was a terrible blunder and hopefully there aren't users out there using that awful browser. Netscape 7 quickly replaced the buggy N6 and should render your page the same as FF does.

on #2: Height for standards-compliant browsers (Safari, FF, Mozilla, N7, O7) is considered fixed property. IE however expands the height, as we have seen before. That means, that if you fill your page with lots and lots of text (enough to exceed the 1290px limit you put on height) IE will expand the height further to accomodate text, others will just write on the gray background. Others are right in this case, IE is wrong. To use the height the way IE uses it, the correct property to use is min-height. However, IE does not support this property. How shocking.

 

[HigherHigher]

Vragbond,

How can I fix this white space below the banner?

http://www.shm-design.com/ergo/keyboard-fusion.php

I really don't have a clue. Please help.

Thanks so much!

S.

 

[HigherHigher]

I solved the problem!