#1
  1. No Profile Picture
    Loves Diesel Generators
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2004
    Location
    Lincs - UK
    Posts
    658
    Rep Power
    88

    Unable to centre div in FF, div does not extend on overlay.


    Hi All,


    Been a while since I have been here, been doing other jobs in place of website design sadly! Something I enjoy a great deal!

    Anyway, I am in the process of making a new website and I have discovered overlays - what a great idea. They look fantastic.

    Now I have designed an overlay for my site:

    http://www.wellandpower.net/website2/index.php

    The bottom link on this page makes an overlay appear with a new specification sheet in it. The dotted grey background (soon to be changed to another design) is held in the #overlay div, the specification sheet is housed in the '#overlayholder' div.

    The overlay div has a property of text-align: center; - but the overlayholder div is not aligning to the centre. I have posted the CSS of the two elements below. It works in IE7, but not in FF.

    Secondly, when the overlayholder appears and content is added to it, the overlay DIV does not stretch in either browser, why not? I found this strange.

    CSS Code:
    #overlay {
         visibility: hidden;
         position: absolute;
         left: 0px;
         top: 0px;
         width:100%;
         height:100%;
         text-align: center;
         z-index: 1000;
         background-image:url(/images/checkerboard.png);
    }
    #overlay #overlayholder {
    	margin-top: 50px;
    	padding: 10px;
    	width: 850px;
    	text-align: center;
    	background-color: #FFFFFF;  	
    }


    Any help greatly appreciated.
    If I helped you by some stroke of luck, please add to my reputation by clicking on the icon at the top of my post!
    Perkins Diesel Generators Volvo Diesel Generators xxl.me.uk (my Site)
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2008
    Location
    Whiteford, MD
    Posts
    535
    Rep Power
    161
    #overlay #overlayholder {
    margin-top: 50px;
    padding: 10px;
    width: 850px;
    text-align: center;
    background-color: #FFFFFF;
    }
    On the bolded part, you must have a comma (,) after #overlay if you want to specify more then one id. That's the way with HTML tags anyway.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Dec 2004
    Posts
    3,082
    Rep Power
    381
    not just HTML, you have to use comma if you have two classes, ids
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    text-align shouldn't affect the placement of block-level elements. Give #overlayholder margin-left:auto and margin-right:auto.

    GameYin and paulh1983:
    You are incorrect. Read this page.

    Comments on this post

    • wellandpower agrees : Spot on!!
    • paulh1983 agrees : sorry i am showing my noobiness :(
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2008
    Location
    Whiteford, MD
    Posts
    535
    Rep Power
    161
    From the page you showed me, I was correct. I saw commas in there. In ANY case Try this and see if it works. Either use commas (just try it), or replace this code with yours

    [css]#overlay {
    margin-top: 50px;
    padding: 10px;
    width: 850px;
    text-align: center;
    background-color: #FFFFFF;
    }#overlayholder {
    margin-top: 50px;
    padding: 10px;
    width: 850px;
    text-align: center;
    background-color: #FFFFFF;
    }[/css]
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    It depends. If the comma was there is means the rule applies to both elements. When it's not there it means the rule applies to an element with the ID of "overlayholder" which is a descendant of an element with the ID "overlay". Yes, it is a bit redundant since each element's ID should be unique, but it's perfectly valid.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2008
    Location
    Whiteford, MD
    Posts
    535
    Rep Power
    161
    Ok, so I just learned wrong from W3 lol. I went there after my post and I found the answer =[
  14. #8
  15. No Profile Picture
    Loves Diesel Generators
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2004
    Location
    Lincs - UK
    Posts
    658
    Rep Power
    88
    Thanks guys....!


    Sorry I could have interupted the comma discussion if I had been back earlier!

    That bit about the margins being set to auto works!

    After all this time I have always managed to centre using the text align - probably because i have been checking mainly in IE i gues and had i been checking in FF then i would have noticed earlier!! Plus I tend to float things!

    So rep++!

    And on the height of the overlay div, I have cheated as not able to find a solution and set it to 400% at the start rather than the original 100%!

    If I helped you by some stroke of luck, please add to my reputation by clicking on the icon at the top of my post!
    Perkins Diesel Generators Volvo Diesel Generators xxl.me.uk (my Site)
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You're welcome, wellandpower.

    Originally Posted by GameYin
    Ok, so I just learned wrong from W3 lol. I went there after my post and I found the answer =[
    W3? W3 is just short for "World Wide Web".

    Do you mean W3C or W3Schools? They are two very different organizations -- don't confuse them.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2008
    Location
    Whiteford, MD
    Posts
    535
    Rep Power
    161
    I meant to say w3schools, fast mode typing. No + rep for meh eh? :[

    Comments on this post

    • bals28mjk agrees : max rep
    Adwords Professional
    You can give me
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2008
    Location
    Whiteford, MD
    Posts
    535
    Rep Power
    161
    Kidding but ok.
    Adwords Professional
    You can give me

IMN logo majestic logo threadwatch logo seochat tools logo