----- Original Message ----- 
From: Tatham Oddie
To: [email protected]
Sent: Sunday, December 26, 2004 7:36 AM
Subject: [WSG] CSS alignment issues


If you look at the homepage - http://www.e-oddie.com/ - I'm having problems
laying the content out. I'm trying to centre the image on the page both
horizontally and vertically. Then, within the panel, I'm trying to
vertically centre the text. Unfortunately I'm not achieving either and am
getting different results between IE6 and FF1.

--------------------------------------------------

If you use:

body, html {
 margin  : 0;
 padding  : 0;
 height  : 100%;
}
#layoutgrid{
 display  : table;
 height  : 100%;
 width  : 100%;
}
#layoutgrid td {
 vertical-align : middle;
 text-align  : center;
}

in your css, then:

<table id="layoutgrid">
  <!-- table, as opposed to strict CSS, is needed for IE centering -->
  <tr>
    <td >
      your own stuff goes here. A div, with the text inside and the
background image applied to this div, maybe? </td>
  </tr>
</table>

in your markup, it'll work. Using that single cell table is the ONLY way I
know to get centered stuff in IE and FF without resorting to long-winded or
unreliable code.  It depends whether or not you can allow yourself the use
of a table!

HTH,

Bob McClelland,
Cornwall (U.K.)
www.gwelanmor-internet.co.uk

******************************************************
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
******************************************************

Reply via email to