Header and main nav looking strange in FF

http://www.judysgems.com/ZenCart/

If you check it out on IE first...
it's almost looking the way I want it to - except for the white line above the main nav. (Help with that appreciated!!) Also IE won't show 2 images that show up fine in FF.

Then check it out in FF...
I'm getting white blotches in the header (tried making the sales message the same height as the logo but it didn't help).
Then the nav bar goes too far down covering part of the sideboxes. It doesn't do this in IE.

I tried using the validator for the CSS but it tells me I need to validate the html first and when I try that, it tells me I need to have end tags for the line breaks. :huh:

Please.................. somebody................

Judy (whose going to have nightmares about css:wacko: )

Okay, I found fixes for these problems. However, one of them (ie whitespace) sort of moved the problem... now I have white space to the left of my main nav instead of above it. This shows up in FF and IE. Tried fixing this the same way (negative margin) but it just doesn't want to go away :no:

Any ideas??

:sleepy:

(The FF issue was easy to fix - adjusted the heights for my logo and sales message)

One quick bit of advice. NEVER use IE for your development browser....WAY too many bugs. Use FF for development and then figure out what you have to fix in IE. You usually will have to add several hacks to get IE to work correctly.

Also, go out to Firefox and download the developer toolbar. It has SO many functions that help during development. One feature I would recommend is under the "Information" button. Select Display Anchors and it will show the CSS right on the web page! Invaluable!

Give this a try and see if it helps you figure out what's going on. :thumbsup:

Patti

Thanks Patti, but I only tried it out in IE since it was looking so weird in FF. I also have and use the web dev toolbar (to the best of my somewhat lacking ability). Without it I wouldn't have gotten this far :wink2: I haven't touched this stuff for several years and the combination of css and php is killing me.

My "current" problem is is the nav bars (main and supp) are leaving a white space to the left and cutting off the far right. This problem occurred after correcting the white space above the nav main.

Will someone please help me before I pull out the remaining hair on my aching head.

Judy

Replace this area in your stylesheet:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0;
        margin-top: -1.5em;
	left margin: 0;
	float: left;
	background-color: #9999cc;
	font-weight: bold;
	color: #000000;
	height: 1.5em;
	width: 100%;
	}

I'm not sure left margin is correct syntax. (margin-left:)

I've found it is best to use specific margin statements (margin-top, margin-bottom, etc.) instead of a generic margin: xx.

It gives you a little more control and will help eliminate suprise layout changes, unless you want the same size margins on all sides.

Thanks onisama, I'll give that a try as soon as I overcome a worse problem.
Judy

Finally fixed that little bugger. Thanks so much. I'll be sure to use more specific margins in the future.
:thumbsup:
Judy
Now, if I could only fix my DB problem...............