Quirks to Standard and images

[RobertVJ]

I'm converting a number of my websites to HTML strict. Most is very straight forward with one BIG exception. I use the following type of information in many places where the text wraps around an image.

This is the code

<TABLE BORDER="0" WIDTH="250" ALIGN="left">
<TR><TD>

<P CLASS="smallleft">
This is a bunch of text. This is a bunch of text. <IMG SRC="test.jpg" ALT="" WIDTH="140" HEIGHT="105" ALIGN="right">This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. <BR><BR><BR>

</P></TD></TR>
</TABLE>

Since one can't use the "ALIGN" property with a strict DOCTYPE, I have been unable to realize the same effect using CSS.

Any help appreciated.

PS: Any way of posting images like with BBcode?

[edited by: tedster at 7:35 pm (utc) on Jan. 29, 2008]

[tedster]

Have you tried style="float:right" for the image and style="text-align:left" for the text (only if needed)?

[edited by: tedster at 7:37 pm (utc) on Jan. 29, 2008]

[Fotiman]

You are looking to "float" your image to the right. So you could have some CSS like this:

.smallleft img {  
 float: right; 
} 

In other words, all images contained within a node that has class smallleft will be floated right.

Some points of interest:
1. The W3 recommendation is that all HTML elements and attributes be written in lowercase. For example:
<p class="smallleft">

2. BORDER="0" WIDTH="250" ALIGN="left"
Those are all presentational, so you should be using CSS for those rules instead of HTML attributes.

3. class="smallleft"
That is a very bad class name as it describes the *presentation* instead of describing the content. What happens if in a year you decide that you want all of these items to have large text and be right aligned? You'll either need to modify your content to use a different class (which defeats the purpose), or you'll have to modify your smallleft class style rules to have big text and be right aligned... that will just cause confusion to anyone who needs to maintain your code. It's better to apply class names that describe the *content*. For example:

Good:

<div class="address"> 
 <div class="street-address">101 Anywhere Dr.</div> 
 <span class="city">Nowhere</span>,  
 <span class="state">CA</span>,  
 <span class="postal-code">00000</span> 
</div> 

Bad:

<div class="left"> 
 <div class="small">101 Anywhere Dr.</div> 
 <span class="blue">Nowhere</span>,  
 <span class="bold">CA</span>,  
 <span class="red">00000</span> 
</div> 

[edited by: tedster at 7:49 pm (utc) on Jan. 29, 2008]
[edit reason] fix a formatting issue [/edit]

[RobertVJ]

Thank all. I just stumbled on the float property for css.