trouble with aligning tables and word wrap

Forum Moderators: open

Message Too Old, No Replies

trouble with aligning tables and word wrap

tokamak

12:54 am on Nov 25, 2004 (gmt 0)

I am having trouble aligning a table to the right. My code looks like this:

<table width="458" align="right" border="0">
<tr>
<td><img src="fusion.jpg" /></td>
</tr>
<tr>
<td class="smallital" align="center">The basic process that takes place in thermonuclear fusion. Image is from <a href="http://www.example.org/page.html">http://www.example.org/page.html</a></td>
</tr>
</table>

this code does exactly what I want it do to in IE 6.0 - it aligns the table to the right and allows text to wrap around it. in Firefox, however, it leaves the table centered. I can align it to the right in firefox by adding:
style="margin-right:0px;"
as an attribute to the table, but the text still won't wrap. is there anyway to do this so that it works in both browsers? thanks in advance.

[edited by: tedster at 4:51 am (utc) on Nov. 28, 2004]
[edit reason] use example.org, remove specifics [/edit]

tedster

1:13 am on Nov 25, 2004 (gmt 0)

Welcome to the forums, tokamak.

Try <table style="float:right;"> first. If that has cross-browser trouble, try wrapping the entire <table></table> in a div that uses the same attribute, style="float:right;"

tokamak

2:43 am on Nov 25, 2004 (gmt 0)

thanks for the reply. however, both of those seem to still do the same thing: looks perfect in IE (aligned right, text wraps), but still centered with no wrap in Firefox. forgot to mention in my original post, but this table is nested inside a table that is centered with css (setting the margins to auto), if that makes any difference.

scottmack

3:21 am on Nov 25, 2004 (gmt 0)

That table code aligns to the right and wraps text around it in Firefox for me.

scottmack

3:22 am on Nov 25, 2004 (gmt 0)

>>>>>> forgot to mention in my original post,......

Oh.

tedster

3:27 am on Nov 25, 2004 (gmt 0)

This brings up two questions:

1. What DTD are you using?
2. Does your html validate [validator.w3.org]?

FYI, this example renders fine for me:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head></head>
<body>
<table style="width:700px;margin:0 auto;">
<tr><td style="width:200px;"> </td>
<td valign="top" style="width:490px;">
<table style="float:right;width:200px;">
<tr><td>Conceptualizing random endpoints in a access matrix provides reach extentions enterprise wide.</td></tr></table>
Respective divisions historically insignificant, upscale trendlines in a management inventory analysis survivabilty format. Document-centric projections unfetter traditional auditing practices rivaling central process management. Advanced functionality, easy administration, proclaim the hallmarks of unprecedented opportunity.
</td></tr></table>
</body>
</html>

tokamak

4:01 am on Nov 28, 2004 (gmt 0)

I don't have a doctype declaration, I've never used them (I'm a novice). Which should I use?

The HTML doesn't validate, it gets something like 22 errors. Most are either my failure to use "alt" attributes, which are evidently required, or somehow related to my lack of doctype declaration. Could this really be causing the problem?

Edit: the code you provided, tedster, works beautifully when I make simple test files with it (with no doctype declarations). Either this is getting messed up somehow by being inside another table centered with css, or maybe I have a syntax error or something? Geez, this is frustrating.

tedster

4:42 am on Nov 28, 2004 (gmt 0)

The absence of a DTD means the validator has to guess - but that absence alone should not generate rendering errors in a browser. The least demanding DTD is probably transitional HTML 4.01 - make this the first line of your HTML document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

If you've got nested tables, my bet is that you have some bad syntax somewhere - a missing tag or partial tag. The validator should help you spot it.

If it ends up being a complex rendering bug, having valid mark-up to begin with is the best way to zero in on the problem.

messed up somehow by being inside another table centered with css

That brings up another possibility as well - how are you centering the table? Centering can be a challenge, and FireFox is pretty standards compliant, so what works in IE may not in FF.

You may want to use the W3C CSS Validator [jigsaw.w3.org], and remember that text-align:center; means TEXT align, not non-text elements.

tokamak

6:20 am on Nov 28, 2004 (gmt 0)

I'm pretty certain that the centering of the main table is whats causing the problem now. It's centered by applying the following style rules to the table tag itself:
margin-left:auto
margin-right:auto
text-align:left

then the whole table is placed inside a div container with "text-align:center;". From what youre telling me, this could be the problem (text-align for text only), but i don't know of a way to center a table with css any other way.

tokamak

6:24 am on Nov 28, 2004 (gmt 0)

i've finally gotten it to work. i took out all the css style rules applied to center the main layout table and just replaced them with an align="center" and took out the div. then the style="float:right;" works perfectly inside that table. it doesn't validate, but at this point i dont really care. if someone knows a way to do this all with css (no align="whatever" attributes), i'm all ears.

thanks a lot for the help everyone.