Forum Moderators: not2easy
I'm converting my documents from XHTML 1.0 transitional to 1.1, and there are two bits of code that are getting in my way. The first is the html align attribute. I was able to convert most of the alignment attributes to work instead with the css {margin:0 auto;}. This allowed me to center layout elements nicely. However, I ran into trouble when I attempted to alter the following code:
<td align="center" colspan="2">
<div><div style="width:550px; text-align:left;">
<fieldset><legend>Subcategory</legend>
The above code centers a legend box within a table. Changing align="center" to style="text-align:center;" worked for IE but not firefox (in firefox the legend box moved to the left). Changing align="center" to style="margin:0 auto;" did not work for either IE or firefox. The problem continues with similar code that uses align="left" or align="right". I just don't know how to convert this last bit into CSS.
The second problem with switching to 1.1 is the xmlns. 1.1 does not recognize the lang="" attribute, in <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">.
Can I simply delete lang="en" since we already have xml:lang="en"?
Much thanks in advance,
Max
webmasterworld Why most of us should NOT use XHTML [webmasterworld.com]
Max
While I don't agree with the do not use xhtml mantra personally. I read it, understand the arguments, but do not agree with the conclusion as long as as we learn to validate pages. Moreover it ignores the benefit of the ability to parse our code as it's xml.
That said, I'm partial about going up to 1.1, that one might be too soon for the browsers.
Max
the first I think you're misunderstanding what it is you're centering? margin: 0 auto works fine both IE and FF, but it shouldn't be a direct replacement for td align="center"
td align="center" centers the contents of a table cell yes, but text-align: center; only centers the TEXT nodes, it does what it says on the tin
what you actually want to do *I presume* is center the div inside the table cell, so it's div that needs the margin: 0 auto, it's the one with width.
It's not actually the legend you're centering, but I think that was just the way you phrased it? correct me if I've picked that up wrong..
here's some sample code with colored legend that should hopefully explain
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="screen">
table {width: 100%; border: 1px solid #f00; table-layout: fixed;}
td {border: 1px solid #000; text-align: center;}
td div {width: 550px; text-align: left; margin: 0 auto;}
legend {background: #fcf;}
</style>
</head>
<body>
<table summary="">
<tr>
<td colspan="2">
<div>
<fieldset><legend>Subcategory</legend>
<form action="#"><p>some form elelments</p></form>
</fieldset>
</div>
</td>
</tr>
<tr><td>text aligned center</td><td>Hi</td></tr>
</table>
</body>
</html>
hth
Thanks for the reply. I fixed the issue using the padding-left attribute (since it was within a table, the width is fixed and I don't have to worry about it expanding with the browser window or increased resolutions).
I had another question though. I finally passed 1.0 strict validation today, but a problem arose with firefox. I have an image that should appear at the very top of a table element with vertical-align:bottom, the image should be 41px away from the top of it's element (I set hight:41px;). In IE the image loads fine, exactly 41px below the top border, but in firefox the image only drops 37 px, 4 px away from its intended position.
Here is what I'm looking at:
----------
Edit
----------
I fixed the problem. All I had to do was add style="vertical-align:bottom;" to the image tag.
Thanks,
Max
