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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    FireFox bug with positioning within a centered container

    CSS specifies that if you use an absolute position within a container that has relative positioning that the absolute position is actually relative to the 0,0 position in the parent container.

    FF uses the absolute position to the 0,0 corner of the screen, not the 0,0 in the container it is in.

    I made a real simple test page that shows how FF is screwing up (works in IE & Chrome).
    It puts a red square offset within a black square that is centered on the screen.

    This is the super simple site: (works in IE, Chrome, but not FF)
    http://ledthings.com/am/test.html

    This is the simple source:
    <html>
    <head><title></title>
    </head>
    <body>
    <center>
    <table bgcolor="black" width="400" style="position:relative;">
    <tr><td height="400">
    <table width="50" bgcolor="red" style="position:absolute; top:50px; left:50px"><tr><td height="50">
    </td></tr></table>
    </td></tr></table>
    </center>
    </body>
    </html>

    Somebody please

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    It works if the element that is position:relative; is also a block-level element. A table is not by default. By the way tables are NOT for page layout. Read the link in my sig about it.

    Code:
    style="position:relative;display:block;"
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Solved!!!

    Thank you. Sucks about tables not working cross-browser
    I thought for sure I tried this before, guess not correctly

    This code works:
    <html>
    <head><title></title>
    </head>
    <body>
    <center>
    <div style="position:relative; background-color:Black; width:400px; height:400px;">
    <div style="position:absolute; top:50px; left:50px; background-color:Red; width:50px; height:50px;" />
    </div>
    </center>
    </body>
    </html>

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Don't use <center>, it is deprecated. To center a block level element use margin:auto;
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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