FF ignores padding and borders ?

[rickysims]

If someone would be so kind, could you tell me why this works the way I want it to in IE - but messes up so badly in FF ?? ... odd, because I know it should be the other way around

FF ignores the background color I set - ignores the padding I set - and ignores the border I set (simply doesn't display anything) .. it adds padding when I specifically set the padding to 0 ... please tell me why before I throw my computer out the window

http://rickysims.com/css-test/test1c.htm

body {
	background: #bfadad; 
	text-align: center;
	margin: 0px;
	padding: 0px;
}
#outerContainer {
	background: #FFFFFF; 
	width: 100%; 
	margin: auto; 
	text-align: center;
}
#mainHeader {
	height: 75px; 
	background: #777777;
}
#innerContainer {
	background: #EEEEEE;
	width: 750px;
	margin: auto;
	margin-top: 0px;
	padding: 0px;
	text-align: left;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
}
#mainContent {
	width: 600px; float: left; 
	margin: 0px; 
	padding: 0px;
}
#sidebarRight {
	width: 150px;
	height: 100%;
	float: left; 
	margin: 0px; 
	padding: 0px;
}
#mainFooter {
	background: #777777; 
	text-align: center; 
	height: 50px; 
	clear: both;
}

I appreciate any advice or help you're able to give.

Cheers

[lostseed]

First add * {margin: 0; padding: 0}
to the top of your document. Make sure to keep the asterick there and a space after the star. That should tell all things to have a margin/padding 0 unless defined, so for both browsers itll be equal unless defined.

Other than that; You have no p {} class defined so the spacing looks differently on firefox vs ie because of default p margins. The borders Im not sure, have you tried applying the borders to #mainContent instead of #innerContainer?

From personal experience it is much easier to develop your site to work in FireFox first. IE is the one with all the bugs and hacks you use for it Makes the job a lot easier.

[rickysims]

Hi

Thanks for the * advice ... that did fix the padding issues.

the #mainContainer is just the outer wrapper - 100% width ... so I don't want borders around it.

This isn't meant to be an actual site - I do have graphics to throw into this layout - but, not until I at least get it working the way it's supposed to.

What I need (at the moment) .. is a 100% width top bar (header) ... then I'll put a 100% width nav bar under that ... then a fixed-width column centered on the screen - split into two separate columns (main, sidebar) ... then a 100% width footer. Doesn't seem like it should be too difficult .. I just don't understand why I set a background color and borders, and FF is ignoring those styles

[lostseed]

http://www.pmob.co.uk/temp/mac3column.htm

view source and rename and copy all you want, thanks to PaulOB for his CSS
skills

You may want to read http://www.pmob.co.uk/temp/3colfixedtest_explained.htm so you know how to adjust it correctly. I know it sucks to read a few pages, but it will save you a lot more time than trying to puzzle together what you have and then look for all the bug fixes.

checkout
http://www.pmob.co.uk/ he has lots of examples of everything.
I hope that helps, the layout is bug free and in your hands if thats the one you want