Forum Moderators: not2easy
I cannot use different HTML depending on the doctype.
I need the yellow TABLE itself to be right-aligned inside the blue DIV.
The "correct" way to do this, I believe, is to use
style="margin-right:0px;margin-left:auto;"
on the TABLE. However, this does not work on IE in quirks mode.
In Quirks mode, I can use align="right" on the DIV, but this is not permitted in Strict mode.
What HTML should I use to get this to render the same regardless of doctype, AND have it validate as Strict HTML?
================== VIEW THIS HTML ===================
uncomment one DOCTYPE or the other; I would like the
table right-aligned regardless of which is chosen.
=====================================================
<!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" lang="en"><!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html lang="en">
-->
<head>
<title>right-align test</title>
</head>
<body>
<div style="border:1px blue solid">
<table style="margin-right:0px;margin-left:auto;">
<tr>
<td style="background:yellow">CONTENT</td>
</tr>
</table>
</div>
</body>
</html>
try it like this...
<!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" lang="en">
<head>
<title>right-align test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#container {
border:1px solid blue;
}
#table1 {
float:right;
}
#table1 td{
background-color:yellow;
}
#clear {
clear:both;
}
/*//]]>*/
</style>
</head>
<body>
<div id="container">
<table id="table1">
<tr>
<td>CONTENT</td>
</tr>
</table>
<div id="clear"></div>
</div>
</body>
</html>
birdbrain
I had to wait until today to check if it worked when folded into my actual project, and sure enough it did.
I had actually tried the "float:right" thing earlier, but the key part here is the clear:both on the empty DIV following the table.
Thanks a million!
Let's start with adding a little plain text before the final </div> in your solution,
e.g.
<div id="clear"></div>
some new text
</div>
So far so good. You can see that the "some new text" appears left-aligned and BELOW the yellow "CONTENT". Great.
Now let's remove the blue border, since it was really just for illustration purposes. To minimize changes, just change
border:1px solid blue;
to
border:0px solid blue;
or remove the container class if you like.
Still, looks good.... EXCEPT...
EXCEPT if I use Firefox 1.0, in which case the "some new text" looks to be on the same line as "CONTENT". It's essentially the same thing you see (with Firefox 1.5) if you remove the DIV with clear:both on it (i.e. your original solution).
Now, this is clearly a bug in Firefox 1.0 that was fixed in 1.5, so filing a bug against Firefox won't do any good. Still, I have many users using Firefox 1.0, so I need a solution for those users. At some point I will of course desupport 1.0, but that time has not yet arrived.
Does anyone know of a workaround to this bug, perhaps with some additional clever CSS (I'm of course not asking for a fix to the FF bug, just some creative code to workaround the bug)?
Thanks!
Now let's remove the blue border, since it was really just for illustration purposes. To minimize changes, just change
border:1px solid blue;
to
border:0px solid blue;
If this is your only problem, how about just making the border color the same as your background color, so it appears that there is no border? Then it stays in the functioning way, but it'll appear that there is no border to it.
The example I am giving here is just a very cut-down testcase, based on a much more complex page.
Still, I have many users using Firefox 1.0, so I need a solution for those users.
Mozilla users warned--upgrade now [news.zdnet.com]
birdbrain
as I said I cannot test in Firefox 1.0, but try this...
<!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" lang="en">
<head>
<title>right-align test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#table1 {
float:right;
margin-bottom:-2px;
}
#table1 td{
background-color:yellow;
}
#clear {
clear:both;
background-color:red;
}
/*//]]>*/
</style>
</head>
<body>
<table id="table1">
<tr>
<td>CONTENT</td>
</tr>
</table>
<div id="clear">some new text </div>
</body>
</html>
birdbrain
Unfortunately I cannot test for Firefox 1.0.
But this link might persuade you and them to drop it,anyway :o...Mozilla users warned--upgrade now
Note that there is a version 1.08 of Firefox which has been released which patches this vulnerability. Firefox 1.0 is still a popular and supported product and will remain so for a while yet, so it is important to cater for those users.
Fortunately, a <table> is already right where I want it, so I can just add clear:both, and from what I can tell so far, I am getting the right behavior in all browsers, using all doctypes.
Thanks everyone for your help... hopefully I will not uncover any more holes or bugs in old browsers (FF 1.0 is not that old, but we still support it).
