firefox margin 0 auto problem

Forum Moderators: not2easy

Message Too Old, No Replies

firefox margin 0 auto problem

suraj_naik

5:24 am on Jun 21, 2007 (gmt 0)

Hi, My css is this way..

body {margin:0; padding:0px; background-color:#c0c0c0; font-family:Tahoma; color:#7a7a7a; font-size:11px; font-weight:normal; text-align:center;}

#main {width:800px; margin:0 auto; background-color:#FFFFFF; border-right:1px solid #000000; border-left:1px solid #000000; padding-left:2px; padding-right:2px; }

& the html this way..

blha blah

the problem in 'firefox' is the main div gets in center but it shows the gray bg colour & not the white bg as per css...& if I gave float:left...it shows...but ofcourse it is going to get alligned to left..& not the center

Now how do I resolve this issue.. shrug
Thanks
suraj

vincevincevince

5:28 am on Jun 21, 2007 (gmt 0)

Can you provide a minimal example of the HTML as well? From what I can see there, it seems correct, so the probem may lay elsewhere. Try to post the very minimum number of lines which reproduces the fault.

DrDoc

5:31 am on Jun 21, 2007 (gmt 0)

Are the elements inside

#main

all floated?

suraj_naik

8:56 am on Jun 21, 2007 (gmt 0)

yes...most of the elements are floated right or left...
& as you can see my css above
there what i have done as you can see my Body colour is Grey & the div with id "main" has all the stuff inside..which has bg color as white..but in css it is nor floated anywhere..as I want the page to be centered & the div is of 800px; I have the margin 0 auto; This way in firefox & netscape browser I do not see the white colour of the main div..all inside content has bgcolour grey itself...

Did this clarifies something..?
Thanks

vincevincevince

9:00 am on Jun 21, 2007 (gmt 0)

Could you make the minimal example as I asked above? Just a few lines - DOCTYPE<html><head><style>...css...</style><body><div....></div></body></html>

DrDoc

9:26 am on Jun 21, 2007 (gmt 0)

The reason why the background color does not currently show is because floated elements are removed from the normal flow. Thus, even though #main clearly has child elements, it is displayed as if it had none, as the children are not inside the normal flow of #main.

A couple options:

Put another wrapper inside #main. Make this wrapper floated, and assign the background color to it.

Another option is to put a clearing element at the very end of #main.

Now, there's is also a much neater solution to this, which does not involve adding additional elements. It has something to do with the

overflow

property, I believe ... but I can't remember the details right now.