Can you figure this one out

Discussion in 'CSS' started by oo7ml, Sep 22, 2008.

  1. #1
    My admin page is showing up very very strange.

    my page

    FF
    - does not center (seems to be a little more over to the left than centered)

    IE
    - centers fine however the input box for password seems to be smaller
    - padding does not show up the same as in FF

    thanks in advance
     
    oo7ml, Sep 22, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    FF doesn't center because you only centered Container with margin: 200px auto 0;

    IE is only centering by accident-- you have put it in quirks mode with the space before your doctype (look at the code as it's rendered in the browser, View Source). So what's centering in IE is the "text-align: center" not the margin: 200px auto 0;

    It kinda looks like a mixture between Paul's technique and Gary's. You want that form centered vertically and horizontally?

    Gary's technique doesn't use a real table but sets the inner container (here, your form) as display: table and something special for IE cause IE doesn't understand display: table. (Since you have a real table I guess you could use that on the outside of the form instead...?).

    Here's Paul's page: http://www.pmob.co.uk/temp/vertical-align11.htm

    Her'es Gary's page: http://gtwebdev.com/workshop/vcenter/vcenter-css.php

    You could have a table around the form, with a single cell (td), and the form inside that. vertical-align: middle on that td.

    The form, btw, isn't valid with XHTML-- there's a name on the form and a few other things (if you looked at the form I posted on the other thread, I've fixed that, cause name is legal on HTML but not XHTML and only later did I think, yeah, the inputs had XHTML endings, need to remove that Name).

    And go fer it-- make your doctype Strict.

    *edit-- I didn't see a universal reset, but that might help most of the padding and margin differences-- EXCEPT you'll have to not remove default padding from the form controls cause in many browsers you can't add it back and makes forms look like crapola. So something like:

    * {
    margin: 0;
    }
    html, body, div, p, form, fieldset, table, tr, td (anyone else!) {
    padding: 0;
    }

    Basically list every block element your page/site will have, except the stuff INSIDE the form like labels and inputs (actually it's inputs and selects who have the problems not labels but oh well).
     
    Stomme poes, Sep 22, 2008 IP