Site Not Displaying Properly In Firefox 3.5

[Ntrimgs]

Can anyone tell me why this site won't display properly in Firefox 3.5 (if not others)?

http://www.ntrimagescapes.com/lawfirm/

It's a demo site for a prospective client to look at, so it's not 100% functional but the pages that do appear are done. Any input would be appreciated.

[aj_nsc]

Interestingly enough, is you put a border, even a transparent border (i.e. border: 1px solid transparent ) around #wrapper #body2 then it works fine....I'll keep looking into it and see if I can find out why.

EDIT: Okay, it seems to be solved by clearing the floated menu so that the #body wraps all the way around....although I'm still not sure exactly why. Apply the code below to #wrapper #body2


overflow: hidden;


EDIT #2: Also, if it bothers you that hovering over the menu links covers up your outer border, then fix it by adding this:


#wrapper #body2 ul li a {
margin-left: 10px;
}


And removing padding-right: 10px;

[Ntrimgs]

I did what you said (I think) and now in IE the rollovers on the main menu come up short by 10 px and the menu is butting right up against the edge.

Is this something I just have to live with?

[aj_nsc]

No, you don't have to live with it. IEs box model is not the 'standard' box model. There's a diagram of it here (http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/).

The best thing you can do is google 'conditional stylesheets' so that you can add in rules that make it look good in IE that won't affect how it looks in Firefox and other W3C compliant browsers. Bonne chance!

[Ntrimgs]

What I don't understand is why does the vertical navigation look right on the index.php page but the other pages it doesn't when all the CSS is the same with the exception of names, ex:

#wrapper #body #navigation
and
#wrapper #body2 #navigation

#wrapper #body #navigation ul li
and
#wrapper #body2 #navigation ul li

should I remove all these duplicate rules and just make it:
#navigation, #navigation ul li, etc...

[aj_nsc]

That's a good question. Without knowing the specific answer, the general answer is that your CSS is overkill - why do you have a wrapper and a body on one page and a wrapper and a body2 on another page?

If I could teach a class on beginners CSS, the first thing I would say is that until you learn more advanced CSS and are comfortable with cross browser stylings, you will NEVER need a wrapper div...every time I see a div named that I know that it's useless.

Sorry for the rant, but it's true, the only purpose of your wrapper div is to center your page, why can't you just apply margin: 0 auto to #body and achieve the same effect? (hint - you can!)

If you try to tone back your css you will probably find the reason for the mistake yourself, somewhere in the massive amount of style duplicaton between #wrapper #body and #wrapper #body2 there's something that didn't get duplicated and that's your answer.

I guess the short answer to your most recently posed question is, yes, just go with #navigation.

Also, there's a div that didn't get closed in your first page around you username input so that might throw something off as well. Before you fix it, think for a second, what is the purpose of the div around the input?

[Ntrimgs]

One reason the my CSS is so redundant is the person who "taught" me said it was best to be as detailed as possible and pinpoint every style. But it is messy.

I put the div there to align it left - needless? By the way thanks for finding that.

So basically the CSS is redundant and sloppy. My div measurements were off a little as well. I threw this together yesterday in a hurry and I realize now that I was way too sloppy.

[aj_nsc]

Be as detailed as possible and pinpoint every style....not necessarily. I think instead of be as detailed as possible the mantra should be 'be as detailed as you need to be'.

Any other trouble, come back to the forums and somebody will help. These forums (as well as countless blog articles) have allowed me to learn a lot about CSS over the 4 years I've been here and I think I can now actually call myself an expert in CSS....well, CSS2 at least for the time being....;)

[Ntrimgs]

Hey, I appreciate all the help. I definitely will keep coming back. This forum has been very valuable in my development.

Thanks!