Display problem with Mozilla.

[nkaisare]

I am developing webpage for a charity organization. The pages are HTML 4.01 Strict. I have validated the pages and the CSS at http://validator.w3.org. IE5.5 displays the pages correctly, but NS6.2 and Mozilla 1.2.1 do not.

In the page:
http://atlanta.vibha.org/tamilplay.html
the <hr> in the contents div appears even in the div that is floating to the right.

On the same page, in the footer div, the right border is not displayed. Next page you may want to look at is http://atlanta.vibha.org/volunteer/
Both the pages use same stylesheet, and same footer div. However, the right border appears OK on the latter but not on the former page.

I can't decide if its a browser bug or error in coding.

Besides, NS4.7 screws the page completely. The floating divs appear on top of the main div. Any workarounds you can suggest?

[gil davis]

Originally posted by nkaisare
Besides, NS4.7 screws the page completely. The floating divs appear on top of the main div. Any workarounds you can suggest? The part that NS 4 doesn't seem to like is:

div#foot

If you just specify

#foot

it mostly works. The background color will not extend to the border (bug) and "clear: both" adds a linefeed which looks bad. To get the background color to reach the border, you have to specify the NS 4 proprietary property "layer-background-color", but then the color will extend below the border. That can be fixed by fooling around with clip.bottom, but you'd need some JS and it's probably not worth it. You would have to specify "width: 100%" to get the bar to go all the way across the page.

IMHO, it raelly doesn't look too bad in NS 4.7. I'd just leave it alone.

[nkaisare]

Thanks Gil. It seems to work with Mozilla too.

However the <hr> problem still stays. Finally there is one example where IE displays a page correctly but Mozilla doesnt. :p :p

[meow]

The trick is:

hr { display: inline }

You need to hide that from Opera, possibly from IE6 too.