SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Offenbach
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    center and border an element of unknown width

    How can I achieve something like this very old fashioned stuff with css
    HTML Code:
    <center>
      <table border="1" bgcolor="xyz">
        <tr><td>
          <element />
        </td></tr>
      </table>
    </center>
    I do not want to use a fixed width for element (which might be a form or an image).
    With a div, it uses the whole width of the window. If i set it to position:absolute; it has the right width, but I don't know, how to center it.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well you can imitate this behaviour quite easily in mozilla using display:table however IE doen't understand it, which is a big shame

    The nearest you can get is using something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     
    <style type="text/css">
    #outer {
    margin:auto;
    text-align:center;
    display:table
    }
    .inner {
    background:#ffffcc;
    margin:5px; 
    padding:5px;
    border:1px solid #000;
    display:table;
    }
    * html .inner {display:inline;height:1%;position:relative;}/* for ie*/
    </style>
    </head>
    <body>
    <div id="outer"> 
    <div class="inner">test</div>
    </div>
    </body>
    </html>
    But it does depend on what happens next and in this instance a table may be simpler

    Paul

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Offenbach
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Thanks a lot for that quick answer. It works fine in Firefox.
    Konqueror doesn't display that part at all.
    When I remove the display:table from the .inner class, everything is fine in Konqueror and Firefox.

    Any idea, why?

    Gregor

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't have konqueror so I can't answer but if its fine without it then leave it out. It should still work ok and I've tested in my firefox and opera7.5 seems ok and wasn't really needed anyway.

    Paul


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
  •