Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Can't Center Div in Chrome or Safari

    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

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The validator is finding a couple of extra closing divs. I'd sort these first - it's possible they're causing the issue.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It isn't those divs, although they need sorting.

    Try making your css for #menu:

    Code:
    #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.

  • Users who have thanked SB65 for this post:

    jpwookie (11-04-2009)

  • #4
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Menu is now a bit messed up

    Thanks SB65, that seems to work, but now the menu is not functioning properly. Any advice?

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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:

    Code:
    #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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •