Alternative to padding

Discussion in 'CSS' started by bluemanteam, Dec 15, 2007.

  1. #1
    Rather then use padding: 0px 10px 0px 0px; is there another command that can be used to center a form vertically?

    With the padding command, my form is vertically centered in IE and Firefox, but it doesn't seem to work well in Opera.

    Thank you
     
    bluemanteam, Dec 15, 2007 IP
  2. JochenVandeVelde

    JochenVandeVelde Peon

    Messages:
    412
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Assign
    text-align: center;
    Code (markup):
    to the parent of the form, and use this:

    
    form {
    margin: 0 auto;
    }
    
    Code (markup):
     
    JochenVandeVelde, Dec 15, 2007 IP
  3. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #3
    1. text-align:center should center inline elements inside of the parent element. maybe you didn't know that IE 5.x got it wrong and makes block level elements centered, and that's why you see it in the majority of stylesheets. When that technique is used, its applied on the body and then it needs to be unset with a text-align on the child element. But IE is announcing IE8, no one IMO should support that POS ie5.x so that rule is not necessary.

    2. margin 0 auto is useless unless there's a width on the element (and it is positioned static).

    3. He said vertical (top bottom), not horizontal (left right). Maybe he confused himself, and anyway a link would help.
     
    soulscratch, Dec 15, 2007 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    and being that unless the element is a fixed height vertical positioning in CSS is a myth.... The impossible dream...
     
    deathshadow, Dec 15, 2007 IP
  5. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #5
    You sure? The method below worked for me... although the way to get it is pretty dirty (using display:table/table-cell for modern browsers and absolute pos for IE)

    http://soulscratch.com/vertical-centering.html
     
    soulscratch, Dec 15, 2007 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    doesn't work for IE7, because * html won't feed 7... it's also cute for single elements, but try nesting that a few times and watch it fail. I do find it somewhat funny the 'answer' in standards compliance is to make non-table elements behave like a table, then load up on browser specific code to make it work 'elsewhere' - EXACTLY what I mean by loading up on more code than a table would be.
     
    deathshadow, Dec 15, 2007 IP
  7. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #7
    Yeah, moved the rules for IE into the CC, should be working in IE7 now. Sure it may fail with nested elements inside, but usually when you vertically center something like this, you don't have much else other than the content in that one inner element. I dunno.
     
    soulscratch, Dec 15, 2007 IP