Hi all,

This is our first time trying to integrate a full css/xhtml compliant design into our custom built php framework. Out with the tables! YAY! Well for the most part. Which is actually the problem I'm having. IE 6 and 7 show the website design correctly while FireFox actually doesn't display some items in the correct location.

I have validated the CSS and the XHTML everything goes through correctly. No warnings or errors. Any help finding the problem would be greatly appreciated!

http://css.blackfalconsolutions.com/index.php

Thanks.

IE 6 and 7 show the website design correctly while FireFox actually doesn't display some items in the correct location.

Well, since you're new at this, just let me say that if IE appears to be showing it 'correctly' and Firefox appears 'wrong', it's actually IE that is getting things WRONG with is busted box model and tons of bugs !!

Save yourself some hair pulling - make it right in Firefox first, then beat IE into submission

Also, IE6 does NOT support PNG transparency w/o some scripting to force it.
Google for "IE PNG fix" and you'll find several solutions.

Ok. the FIRST thing you need to do is put a proper DOCTYPE in your pages. IE is displaying in Quirks mode (which you do NOT want) without it and Firefox is basically 'guessing'. I would go with at LEAST HTML 4.01 STRICT, or XHTML 1.0 Transitional if you're feeling spunky - but you'll have to mind a few more rules with XHTML doctype. Once you have a proper doctype, then you may or may not need some other adjustments.

Take the hacks out of your main CSS file, put them in an 'iefixes.css' file and then use Conditional Comments in the head section to pull in the fixes that will ONLY target IE.

If you want the footer to snug up against the mainBody section, remove the 4px top margin on .TopFooter.

Nice design, and really good job on the coding, you just need a bit more

First off, Thanks!

I do know about IE's issue with PNG and I've got the code set aside to fix it but my major issue at the moment is the alignment of the text, so I haven't taken the time to fix it yet, but I do thank you for taking the time to point that out.

The DOCTYPE! I actually had that in my original test page but I had not been using it in our custom framework so when I transferred the different sections of the page into the framework it was lost. That has now been added and I ran validation again, fixing the various problems which arose. XHTML 1.0 Transitional is what we were aiming for, that is validating now.

I think you may have solved our problems with your comment about using a conditional comment to pull in the fixes for IE. I will redo the CSS to position properly for FF and then use an iefixes.css file to position for IE. Also, thanks for the fix on the footer, it was giving me a headache!

Also my wife will be glad to hear your comment on the design.

Thanks again,
JuanJose Galvez
Black Falcon Solutions

You could post your stylesheet for us to view. Also, as far as the menu, it's not that visually pleasing. Have you thought about a different menu style?