IE7 CSS Problem can't solve!

[vagabond]

I've done a few website designs using CSS and XHTML Transitional and have been able to hack through several problems. But I have run into a problem that I can't seem to solve or find any info on.

I have created a test page to try and solve it at:

WebChesapeake Small Business Website Design Samples Examples Portfolio

I included the CSS in the head section.

I have several divs/classes repeated with a div for a graphic on the left and div for text on the right. When I get to the last instance of these divs, I get a few characters of the last text repeated under the last photo. Even if I delete some of the repeated divs, the problem still exites under the last photo. I'm stumped!

It doesn't occur with FF, and I'm out of town and don't have access to IE6. The problem exists with IE7. If anyone can take a look, explain the cause and suggest a fix for this issue in IE7, I would appreciate it.

Thx..... Norm

[speed]

I've seen this before, but I can't quite remember the fix. I think it was to do with the floats and I think you just need to add position: relative to .portfolio.

[vagabond]

Originally Posted by speed

I've seen this before, but I can't quite remember the fix. I think it was to do with the floats and I think you just need to add position: relative to .portfolio.

Thx for the response Speed... I tried adding the position attribute to several of the CSS classes and IDs, but it didn't seem to have an effect, or solve the problem. Still trying to get this resolved!

[sands]

Just add the line:

<br style="clear:both;" />

after the last DIV with the class portfolio.

Like this:

</div><!-- END class portfolio --><br style="clear:both;" />

[vagabond]

Sands... Thank You Very Much!

Problem is solved. I guess it is especially true with CSS that you can learn something new every day. Cross browser compatibility is the most annoying thing to have to deal with.

I have gleaned much from the posts here at WPW and thank everyone for your help.

Norm

[simonlogan]

Just remember that floated divs take up no space in the flow of the page so anything that isn't floated will overlap them (or they'll overlap the divs). Use the clearing DIV to sort of reset it all to a normal flow either by inserting a DIV or class with clear:both on it or if you have, say, a footer, give that a style parameter of clear:both or clear:left or clear:right (depending on the circumstances) to let it do the resetting.

Some say that inserting a DIV purely just for clearing (resetting the flow) is something to be avoided as it adds unneccessary code to the page so adding the attribute to an existing DIV is often a better option. (It also means that you can remove the clearing should you redesign the page merely by editing the CSS file rather than having to edit the code of your page...)

[John Redfield]

Good knowledge. Thanks Sands.

Im constantly cursing FF or IE7