Hey, I have been working on a new site but it seems that although everything is fine in IE7 it has quite a few issues in FireFox huxleygame.com/css/ Could I get some help and explanations please. Thanks in advance!
Well, let me go through and see what I see - this doesn't necessarily address your problems, but when there are 'issues' it's best to start from the top. First off I'd suggest easing up on the width declarations - you've got a perfectly good #wrapper around everything, so don't waste time declaring the width of those headers... #content-right - you don't have it floating. This I would declare as floating left to stack, since not floating it can cause some margin issues... THIS is your actual cause for the advertisements bar appearing below the welcome box in Opera/Safari/FF. Though I'd call #content-right just content, and the left bar #navigation or some such - remember say what they are NOT how they appear... it's good practice since they might not always appear in the same spot in the future if you reskin. (and the ideal of CSS is reskinning without touching the HTML) The other 'issue' is your blue background not stretching to full height - of course not - you've got floats inside it and floats are not counted towards the total height of the container. There are two fixes: add a div that clears the floats inside the container - a footer is usually good for this if you are going to have one. I do NOT recommend the so called "clearing DIV's" as to me they are a waste of code. If for some reason you are not going to have a footer or need the footer to be outside that color wrapper, you can just add one of the following to the #main container: 1) overflow:hidden; - you need to be careful about content getting chopped off though if you don't set a height on #main you should be fine. 2) overflow:auto; - sometimes hidden is a bad choice, in those cases use auto... but you can end up with scrollbars so this isn't always an option. 3) float:either direction - floats pay attention to the height of floats inside them... the problem here is it can make your content not center if you apply it to the outermost container. Since #main is inside #wrapper, leave the width declaration in and use this technique. Basically: #main { width:970px; float:left; background:#003; padding:10px 5px 5px; } #content-right { width:770px; float:left; } Should fix you right up... well, except for some overpadding up top between the three headers and the content area. I'm not 100% sure what's causing that... I appears as if IE is ignoring that 10px top padding, and I've no clue why... Though it could be those unneccessary clears in the header.... I would probably rewrite said header to use two less classes and be a nest. Something like this: #header { padding-top:27px; background:url(images/header_top_01.gif) 0 0 repeat-x; } #header div { padding-bottom:38px; background:url(images/header_top_03.gif) 0 135px repeat-x; } #header div div { height:135px; padding:0; background:url(images/header_top_02.gif) 0 0 no-repeat; } Code (markup): With this for the HTML <div id="header"><div><div></div></div> I would probably even try to slip a H1 in there inside the second div, then use positioning to slide the innermost div over it. Some other optimizations I'd consider are that since you are using single images for the headers, lose the div around them... or keep them and make it so that your various headers all share one image instead of all being separate files.... which would also simplify your code since you could have one class for all of them instaed of three separate classes... and lose the line breaks, you've got perfectly good classes there to apply margin-bottom to. Hell, looking at it I don't think you even need the bottom DIV on those menu items either. Pad the bottom of the UL then apply the image there.