CSS works in IE 5+, crashes in Netscape 7--help! 1

[4midori]

Hi,

I've created a very simple design, much like others I have done before, and it works perfectly in IE 5+, but not Netscape 7. Could someone look at

http://www.widerm.org,

and the attendant style sheet

http://www.widerm.org/widerm_style.css

and let me know what's funky.

Thanks,

Ben

 

[Breadcrust]

i have mozilla firebird (uses the gecko rendering engine that netscape also uses) and it works fine, maybe you have problems with netscape only on your computer?

[tt]
Breadcrust (aka J@red)

Web -

http://www.bcwebnet.tk

E-mail - net-head@softhome.net
Linux Reg. Number - 307180 (

http://counter.li.org)

[/tt]

 

[tviman]

I'm using Netscape 7.1 and it looks O.K.

Viewing at 800x600 screen res, the text is really small. You style sheet text sizez are set to 75% - this make the text 75% of the native size so if my default text is set to 10 pts, your page will show text at 7.5 pts. IMHO, web pages should never have text display at less than 8 pts.

There's always a better way. The fun is trying to find it!

 

[MichiganRon]

I see what you mean 4midori. Among other things, the main content box appears to be shifted to the left. I was just working on a NS 7.1 problem in another post (see thread215-694737 ). I don't know if this will help you, but it appears as though IE will pass certain attributes to child containers (block-level elements like <div> tags), but NS will not.

To solve my problem I had to explicitly declare all attributes that I wanted the child containers to exhibit and not rely on them getting the attributes passed from their parents.

Good luck,
Ron

-We are all given the same deck of cards, it's how we play the hand we are dealt which makes us who we are.

 

[4midori]

To solve my problem I had to explicitly declare all attributes that I wanted the child containers to exhibit and not rely on them getting the attributes passed from their parents.


Nope, Netscape 7 at home and at work are displaying improperly--a div is missing and logo is messed up.

Could someone correct my code directly?

Thanks.

 

[philote]

I think your problem is because IE doesn't adhere to w3.org's specs. From w3.org:
If 'height' is 'auto', the height depends on whether the element has any block-level children. If it only has inline-level children, the height is from the top of the topmost line box to the bottom of the bottommost line box. If it has block-level children, it is the distance from the top border-edge of the topmost block-level child box, to the bottom border-edge of the bottommost block-level child box. Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset).

For example, you have bigFrame that doesn't have its dimension specified. Normally, the height and width would be computed by the block-level elements (divs) inside it. But inside it you have flagBox and frame. The widths are specified for these but not the heights. So they'd get their heights by the divs they contain: topLeft and flag for flagBox and leftBar and content for frame. Well, all of these except for topLeft are floats, so they're not used to compute the heights of their container divs. topLeft only contains a 1x1 image so that means bigFrame will have a width of 100% and a height of 1px. The floats will show but they won't be placed right because their containers are not being sized correctly. I believe to fix this you can just specify the dimensions of the container divs.

http://www.w3.org/TR/CSS2/visudet.html#the-height-property

Also, Mozilla has a great tool to troubleshoot your web pages call DOM Inspector. It'll give you a tree of html tags and their css properties, where those properties are from and the computed css values. It'll also highlight on the page any tags you select in the tree so you can easily see how they're being laid out.

Kevin
A+, Network+, MCP

 

[4midori]

Kevin,

Many thanks. This helped a bit. I have a similar design that worked fine without specifying so much, but in this case I had to add more to specify height, and now other things are falling into place!

Regards,

Ben

http://www.madisonmusicians.net

& a bunch of others