last item in float positions incorrectly in ie

float problem in ie 6

[rocketjam]

My page has 4 floated columns. The first two are navigation columns/links. They are fine in all browsers I've tested.

The next two columns are inside a content div with a defined width (500px). The first column is a name and email address and the 2nd column is a photo of the corresponding person in the first column. In IE 6, each name/address-photo combo aligns fine until the last one. The photo, which should be in the 2nd column under all the others is jumping to the first column under the name/email address.

I looked over the positioniseverything.net list of ie problems and hacks, but couldn't find anything that seems to be causing this. Thought it might be an overflow problem with the name/email but all the testing I did seems to indicate that's not it.

Any ideas or suggestions?

thx

[Fotiman]

Please post some code.

[rocketjam]

Here's what's relevent from the style sheet:

.position {width:720px; margin-left:auto; margin-right:auto;} <!-- encloses all the floated elements -->

#content {float:left; margin:30px 0 0 30px; width:500px;} <!-- encloses problem area -->

#content p {font-size:0.9em; margin-bottom:1em;}

.personnelText {float:left; margin-left:10px; width:60%;}

.personnelPic {float:left; margin-bottom:20px;}

Here's some of the (hopefully the pertinent) HTML (the addresses are javascript encrypted, so I snipped them for brevity):

<div id="content" class="clearfix">

<div id="headgraphic">
<h2>Printing Inc.<br>
Operations and Personnel</h2>
</div>

<p class="personnelText">Barry Martin<br>
President<br>
<script language="JavaScript" type="text/javascript">

SNIP-JAVASCRIPT ENCODED/ENCRYPTED EMAIL ADDRESS

</p>
<img src="Barry.jpg" class="personnelPic" width="144" height="148" alt="Barry Martin">

<p class="personnelText">Bret Leach<br>
Vice President<br>
<script language="JavaScript" type="text/javascript">

SNIP-JAVASCRIPT ENCODED/ENCRYPTED EMAIL ADDRESS

</p>
<img class="personnelPic" src="Bret.jpg" width="144" height="149" alt="Bret Leach">

<!-- There are several more names/address/photos as above then the last one here: -->

<p class="personnelText">Debbie Beardshear<br>
Prepress Manager<br>
<script language="JavaScript" type="text/javascript">

SNIP-JAVASCRIPT ENCODED/ENCRYPTED EMAIL ADDRESS

</p>
<img class="personnelPic" src="debbie.jpg" width="144" height="148" alt="Debbie Beardshear">
--END CODE--

That last one is the one where the photo lines up under the floated column of names/addresses.

[Fotiman]

I just tried your code and I'm not seeing anything unusual. The last image appears on the 'right' column.

This data, though, does appear to be tabular data to me. Therefore, it might make sense to use a table.

[rocketjam]

It displays correctly in IE 6?

Regarding the table recommendation, of course, that's how it was originally set up. The entire site was laid out w/tables. I'm working on converting it to CSS. On this page, I considered keeping this part of it in a table, and this brings up the question, "when should something be placed in a table versus done w/CSS?"

[Fotiman]

Yes, it was IE6.

As for when to use tables...

If your only reason for using a table is to layout items a particular way, then you probably shouldn't be using a table. However, if your data is actually something that makes sense to be served as "records", then it makes sense to use a table. In your case, each record contains information about a person, and an image.

Suppose, for example, someone is viewing your content with no CSS at all. Maybe they're even using a screen reader. Looking at the HTML only (without presentation), does the content make sense as tabular data? In your example, I think it does.

[rocketjam]

Thanks for the tips!