Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Problem with vertical alignment...

  1. #1
    Join Date
    Jun 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Problem with vertical alignment...

    I'm using the display:table; method, and it's kinda doing what I want, but not exactly. Let me just give the code that I'm working on:

    HTML Code:
    <html>
    
    <head>
    <title>???</title>
    <style type="text/css">
    body {
    background:#8b8b8b;
    color:#303030;
    font:76% Verdana,Tahoma,Arial,sans-serif;
    margin:0;
    padding:0;
    }
    
    #container {
    background-color: grey;
    height: 88px;
    padding: 0.5em;
    position: absolute;
    right: 1em;
    
    display: table;
    }
    
    #contents {
    background-color: #3f3f3f;
    color: #fff;
    width: 100%;
    -moz-border-radius: 15px;
    
    display: table-cell;
    vertical-align: middle;
    }
    
    #contents form {
    padding: 5px 10px;
    margin: 0px; //???
    }
    
    #email, #pass {
    float: left;
    width: 115px;
    padding:0pt 5px 0pt 0pt;
    }
    
    #contents input {width: 110px; }
    
    #contents fieldset {
    border: none;
    margin: 0px;
    padding: 0px;
    }
    
    #contents legend { display:none; }
    
    </style>
    </head>
    
    <body>
    <div id='container'>
    <div id='contents'>
    <form id='login' action='action.php?' method='post'>
    <fieldset><legend>Login:</legend>
    <label id='email'>Email: <input type='text' name='e' value='e-mail' /></label>
    <label id='pass'>Pass: <input type='text' name='p' value='pass' /></label>
    </fieldset>
    <small><a href='link.php'>Link</a></small>
    </form>
    </div>
    </div>
    
    </body>
    
    </html>
    Okay. Right now, the stuff inside #contents is vertically centering to #container, which is good. Perfect. But it's the background that I'm having problems with. It stretches to the bottom of the container. I'd like it to fit the stuff inside content. And example of what I'm talking about it the difference in the backgrounds height on #contents if you remove display: table-cell;

    Any help?

  2. #2
    Join Date
    Dec 2007
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Try changing

    display: table;

    to this:

    display: block;

  3. #3
    Join Date
    Jun 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Nope, didn't work...

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Only display:block; and display:inline; are universally supported. If you use anything else, you are going to see a fairly great variation among different browsers.

    If block or inline alone don't 'get it' for you, try using no display property assignment at all, or one of those, and use other more universally supported style properties like margins, floats, padding, borders, etc. to get the desired results.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yeah, that didn't really help my problem... The problem with your post is: I've tried various methods, but I don't want to bloat it up with complicated margins and paddings and whatnot. I'm not that skilled at CSS either, which limits me to do what I want to do without some direction, which is why I came here.

    display: table;, as far as I know, is supported by all modern browsers except IE. And it's doing what I want it to do, except for a small problem of the background stretching vertically also.

    If I were to go with the block and inline method, what other properties would you recommend me using, exactly? And how?

    ?_?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Code:
    #container {
    background-color: gray;
    height: 88px;
    padding: 0.5em;
    position: absolute;
    right: 1em;
    }
    
    #contents {
    background-color: #3f3f3f;
    color: #fff;
    width: 22em;
    -moz-border-radius: 15px;
    padding:1.3em 0;
    }
    The one change that may not be obvious is the use of 'gray' instead of 'grey'. Gray is correct and recognised in all browsers, grey is not correct, but is recognised in some browsers.
    Last edited by jscheuer1; 12-10-2007 at 05:18 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Oh, and here is a version of the page that passes strict validation (with the exception of the proprietary -moz-border-radius):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    <head>
    <title>???</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body {
    background:#8b8b8b;
    color:#303030;
    font:76% Verdana,Tahoma,Arial,sans-serif;
    margin:0;
    padding:0;
    }
    
    #container {
    background-color: gray;
    height: 88px;
    padding: 0.5em;
    position: absolute;
    right: 1em;
    }
    
    #contents {
    background-color: #3f3f3f;
    color: #fff;
    width: 22em;
    -moz-border-radius: 15px;
    padding:1.15em 0;
    }
    
    #contents form {
    padding: 5px 10px;
    margin: 0px;/* //???*/
    }
    
    #email, #pass {
    float: left;
    width: 115px;
    padding:0pt 5px 0pt 0pt;
    }
    
    #contents input {width: 110px; }
    
    #contents fieldset {
    border: none;
    margin: 0px;
    padding: 0px;
    }
    
    #contents legend { display:none; }
    
    </style>
    </head>
    
    <body>
    <div id='container'>
    <div id='contents'>
    <form id='login' action='action.php?' method='post'>
    <fieldset><legend>Login:</legend>
    <label id='email'>Email: <input type='text' name='e' value='e-mail'></label>
    <label id='pass'>Pass: <input type='text' name='p' value='pass'></label>
    </fieldset>
    <div><small><a href='link.php'>Link</a></small></div>
    </form>
    </div>
    </div>
    
    </body>
    
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jun 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Okay, uh, dude, no offense, but you're not helping at all.

    1) My use of grey instead of gray for the containers background is completely irrelevant to the topic, and has nothing to do with the problem. In my actual application, #container isn't even going to have a background color. I only put it there to demonstrate the height of #container and show where $contents is relevant to it (it should be vertically centered).

    2) When setting up an example page, I don't generally validate it. If it works, it works. However, I do understand the importance of validation, which is why the final application which this little login box will be implemented into is and will be validated. So, again, it doesn't really pertain to the topic.

    Maybe you're not understanding the question correctly?

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Since, your example looked best and seemed to follow the intended styles most closely in FF, I modeled my cross browser versions after that.

    How do you want it to look in which browsers then? I thought that both of my examples looked good in Opera 9.24, Safari 3 Win, IE 7 and FF 2.0.0.11.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Jun 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ah, okay. Then it's me not explaining throughly what I'm trying to do.

    #contents will have dynamic height, meaning that setting it vertically via padding/margins will only work if the content inside of it (login form) never changes. However, as soon as the content inside #contents changes, the height changes and the padding/margin values aren't accurate anymore. That's why I was using display: table[-cell] and vertical-align: middle, because it works better than margins and padding.

    Though I'm having a problem with the display: table method. Although the content changes and it remains vertically centered, the background color on #contents stays fixed. I'm trying to find a way to make it form with #contents, much the same way it would look it you deleted display: table from the CSS: the height of #contents's background will be dependant on the hight of the contents inside it.

    #container will not have a background color (transparent), and only does so in the example to show it's dimensions.

Bookmarks

Posting Permissions

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