...

View Full Version : Can't Center Div in Chrome or Safari



jpwookie
11-03-2009, 12:09 AM
I am very new to this and I am having issues centering a div in Chrome and Safari (works just fine in IE and Firefox)

I am using a joomla template and have tried spent days trying resolve the issue. I have used a few different methods including :

margin-left: auto ;
margin-right: auto ;

but nothing seems to work (again I know very little about what i am doing).

Can someone help? Here is the url:

staging.unnucreations.com (http://staging.unnucreations.com)

SB65
11-03-2009, 10:08 AM
The validator is finding a couple of extra closing divs (http://validator.w3.org/check?uri=http://staging.unnucreations.com/). I'd sort these first - it's possible they're causing the issue.

SB65
11-03-2009, 10:35 AM
It isn't those divs, although they need sorting.

Try making your css for #menu:


#menu {
background-color:#FAFAFA;
border-bottom:1px solid #EDEDED;
overflow:auto;
/*height:30px;*/
margin:0 auto 0;
text-align:left;
width:920px;
}

This will sort out the floats in your menu which are causing Safari/Chrome to offset the #addwrap div.

jpwookie
11-04-2009, 04:26 PM
Thanks SB65, that seems to work, but now the menu is not functioning properly. Any advice?

SB65
11-04-2009, 06:51 PM
Ha, didn't spot you had a drop down menu there....

Have a try with the following in your css instead of the current #menu:



#menu {
background-color:#FAFAFA;
border-bottom:1px solid #EDEDED;
margin:0 auto 0;
text-align:center;
width:920px;
}

#menu:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}


That should clear the floats without messing up the dropdown.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum