Help w/ Browser Compatibility (Fix for FireFox)

design
#1

After completing a significant portion of of the backend, I decided it was time to actually give it all a face based on the temporary page I’ve had up for ages.

I have a perfectly standard-compliant page (according to the w3 validator), so I opened it up in firefox to see how well it looked, and I was quite surprised to see something not at all what I believed the page should look like, especially since it works fine in even IE6!

The HTML is: http://inaneravings.com/dev/index.html
The CSS is: http://inaneravings.com/dev/inaneravings.css

I’d really appreciate any and all advice on how to adjust the CSS and HTML to keep both standard compliant while also making it look the same in all browsers as it does in IE6: http://inaneravings.com/dev/proper_look.png

#2

TextPane { width: 100%; background: #ccc; padding-bottom: 10px; float: left; }Why is this a float? Doesn’t make sense - nothing needs to be floated in that layout.

:cool: openvein.org -//- One-time [color=#6600CC]$50.00 discount[/color] on [color=#0000CC]DreamHost[/color] plans: Use ATROPOS7

#3

While I can’t help you directly, more help for this sort of issue is available at the anybrowser.org site.

Read the page to understand the organizations’ goals, then follow the link near the bottom to go their forum.

For anyone else that finds this post, please note the OP has tested his code for w3 validity (and can spell, and can form a grammatically correct sentence). The members at this other forum may not be gentle if you don’t take care of the basics before asking for help. But, if you do your homework, the fine people there are a goldmine of information.

Regards,
Rudy

#4

It’s float (partly) because the page has gone through years of modifications (I’m lazy, and only work on the project sporadically) and it was probably inserted in there long ago when there was a need for it. The width is set to 100% for the same reason (at some point it wasn’t 100%, so it was needed, but then a slight modification and it’s useless code now)

However, while the width line can be harmlessly removed, removing the float causes the page to break even worse in firefox (it gains a gap between the header and body part of each box filled with the background color).

#5

Geez, its not broken in Firefox, as you pointed out you just haven’t updated your CSS. Remember Firefox came out after IE 6. You might want to read the CSS 2.1 Specification if you haven’t already. One subject you need to look up is collapsing margins.

:cool: openvein.org -//- One-time [color=#6600CC]$50.00 discount[/color] on [color=#0000CC]DreamHost[/color] plans: Use ATROPOS7