Re: Converting Centered Table Rows to Divs/CSS

by "Rod Hutson" <rbhutson(at)ieee.org>
Date:	Mon, 21 Jan 2002 07:40:01 -0700
To:	<hwg-style(at)hwg.org>
References:	pcrbhh
	todo: View Thread, Original
Nope, Brian's pointer didn't get me there - I can get my effect in MSIE5.5,
but NS6 interprets the style sheet differently.

I recall that MSIE mis-handles the text-align:center declaration for divs,
and that NS6 does it correctly... so there must be a way to do this in NS6?

Here's the code I used for testing... including what I want using tables...
I added colored borders to help define where each div element is on the
screen.  View it using both MSIE5.5 and NS6 to see the much different
results.  If anyone can suggest how to massage the CSS to provide a result
like the table version, I'm all ears!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Testing CSS</title>
<style type="text/css">
div.container {
    text-align:center;
    width:auto;
    border:1px solid red;
    padding:2px;
}
div.inline {
    display:inline;
    border:1px solid black;
    padding:2px;
    text-align:center;
    width:100px;
}
div.inline p {
    margin:0px;
    border:1px solid blue;
    width:100px;
    text-align:center;
}
div.auto {
    width:auto;
}
</style>
</head>

<body>
<div class="container">
<div class="inline"><div class="auto">Main Text 1</div><div
class="auto">caption 1</div></div>
<div class="inline"><div class="auto">Main Text 2</div><div
class="auto">caption 2</div></div>
<div class="inline"><div class="auto">Main Text 3</div><div
class="auto">caption 3</div></div>
<div class="inline"><div class="auto">Main Text 4</div><div
class="auto">caption 4</div></div>
<div class="inline"><div class="auto">Main Text 5</div><div
class="auto">caption 5</div></div>
</div>
<p />
this is what i want...
<p />
<table style="text-align:center;" width="100%" border="1" bordercolor="red">
<tr>
<td align="center">Main Text 1<br />caption 1</td>
<td align="center">Main Text 2<br />caption 2</td>
<td align="center">Main Text 3<br />caption 3</td>
<td align="center">Main Text 4<br />caption 4</td>
<td align="center">Main Text 5<br />caption 5</td>
</tr></table>
</body>
</html>


----- Original Message -----
From: "Rod Hutson" <rbhutson(at)ieee.org>
To: <hwg-style(at)hwg.org>
Sent: Sunday, January 20, 2002 2:25 PM
Subject: Re: Converting Centered Table Rows to Divs/CSS


> My thanks to Brian Costner for this pointer (see below) - this is what I
was
> looking for.  Thanks to others also for their suggestions.  The community
> environment here is why I belong to this list!
>
> Rod
>
> ----- Original Message -----
> From: "Brian Costner" <brian(at)ecoculture.com>
> To: "Rod Hutson" <rbhutson(at)ieee.org>
> Sent: Sunday, January 20, 2002 3:52 AM
> Subject: RE: Converting Centered Table Rows to Divs/CSS
>
>
> http://www.alistapart.com/stories/practicalcss/
>
> See the above. There is a description of a way to align thumbnail imagess
> that may give you a hint or two of something to try next.
>
> > What I don't know how to do is to put, for example, five elements in a
> > single row in that bottom bar, evenly spaced across it, so that when the
> > window is expanded or contracted, they stay (as a group of five
elements)
> > centered within the window and self-adjust the distances between
> > themselves and the window borders.  The sort of thing that, using a
> > centered table of five cells in one row, is basic HTML.
>
HWG hwg-style mailing list archives, maintained by Webmasters @ IWA