<UL> is making Images Float?

I will say #1 – your stylesheet is quite confusing. You’ve got a *whole bunch* of stuff there you aren’t even using in your site.

That being said, I think your issue is here:

/*For Post Unordered lists or Lists*/
.storycontent ol li {
list-style-type: none;
display: block;
}

You’re noting “storycontent OL” – which is an ordered list. You’re using an unordered list for your images, though: UL.

To start with, try changing it to :

/*For Post Unordered lists or Lists*/
.storycontent ul li {
list-style-type: none;
display: block;
}

And see if it helps. (But I’m betting you’re gonna have a whole bunch of other issues, as well.) It’s a start!

I made that change and still the same problem.

Yeah, I know this is actually a theme I had gotten from the THEME archives called “dark maple” .. I’m guessing its something with the original stylesheet that is crappy. I haven’t gotten around to cleaning it up which I should do.

is there anything else i can try to remedy this problem? I appreciate your help SOOOOOo much!

‘kay –

add this to the bottom of your stylesheet (if it’s last, it’ll override anything prior to it):

.storycontent ul {
list-style-type:none;}

.storycontent li {
clear:left;}

.storycontent li img {
display:block;
float:left;
margin:10px;}

HTH!

It look like it worked ! .. thank yoU!

Just another quick thing. how come when the paragraph runs on longer then the pictures length it wraps below it. Is there a way to have it just wrap to the width of the paragraph as it is next to the picture intstead?

Thank you agin SOO MUCH !

Yeah, you could do that too. It’s because the image *is* floated, to allow text to wrap around it. If it wasn’t floated, then the image would appear, and the block of text would be below it, and not beside it.

So, if you want the image to appear, and have the block of text *next* to it – with no running under the image (if the text is longer) you’d need to edit in this way (this is just an example – removing seom text for length and…well…um, content!):

HTML:
<ul>
<li><a href="image link here" title="Photo Sharing">
<img src="image.jpg" width="192" height="240" align="left" alt="V.Guerra.jpg" /></a>
<div class="blocktext">
<strong>5. Vida Guerra</strong> -
text about this chick here</div>
</li>

</ul>

Note the addition of the <div> tags right there where your text starts.

Your CSS should reflect this:

div.blocktext {
width:500px;
float:right;
}

That’s just the basics – you can do the width and formatting as you see fit.

Then you’ll need to change your li stufff in the stylesheet to this:

.storycontent li {
clear:both;}

that way, each li element will clear the image and text prior to it – no matter which is longer.

HTH!