Divs not working in firefox

Get Started
1

Hi, not sure if I’m posting this in the right area.
I have built a pretty basic site using HTML and CSS. It seems to work correctly in ie7 but the divs don’t seem to line up properly when using firefox or chrome.
Could someone take a quick look and advise how I can get it to work in all browsers? URL is houseofcash.co.uk

Thanks, James

2

I noticed that your mainContent div doesn’t have a float so it doesn’t take part in the flow. You use margin-left 30; for the mainContent div but since it doesn’t has a flow the margin-left is 30px left of the container edge instead of from sidebar1, as I presume you want . Try to add a float to that div:


#mainContent {
background-color:#000000;
color:#FFFFFF;
margin-bottom:0;
margin-left:30px;
margin-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:10px;
width:615px;
float: left;
display: inline;
}
3

Thank you don, the site now works in firefox but now doesn’t display correctly in ie!

4

I noticed that and i was trying to edit my reply before but this site was down for some time, at least for me. What I wanted to say than, was that actually FF and Chrome are centering your site as you would expected:


#container {
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:0;
position:relative;
text-align:left;
width:995px;
}

where in all IE versions the site aligns left and your main content is pushed downwards. I’m sure there is a unclosed or overlapping tag somewhere. I was going trough your site but couldn’t find though.

I think you should go through the entire page and your stylesheet as well, both of them need some serious clean up. Your site for example won’t even validate at W3 W3 Validator

5

Thanks, is that bad then? I’ll try to validate.

6

Hi., I think I can see the problem. My footer seems to appear on the right hand side rather than at the bottom of the page!

7

hi,
I just validated, loads of errors but the main one was I was missing :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

now I have added that into the top of my html the divs are nearly working correctly, however it has now shifted the whole website to the right by about 50px!

could someone please take another look at this annoyance?
I have also noticed the footer isn’t displaying in the correct place.
I beleive both of these issues are related to my css file, but I cannot find the error.

thank you again for all your amazing help.
James

8

Try removing the whitespace before the doctype - that might solve a lot of your problems

9

Any whitespace before the doctype would keep IE6 in Quirks mode, but if HOC didn’t have a doctype to begin with and the site was looking ok in IE then I would assume the page was built for Quirks Mode (a bad thing because it usually means you have to rewrite to have something working in ALL browsers, with doctype).

Remember wherever you have something floated, the next thing to come after it, if you want it to always stay under the float, needs to clear the float with
clear: both
usually. Usually this is the cause of woggy footers.

10

Yeah, I’m just thinking that it would solve a lot of “Works in this browser but not this one” problems :slight_smile:

11

Thanks all, I’ll try that.

12

If it was a table or not using CSS i will agree that. CSS or Div is mostly compatible to all browsers. Please check w3schools.