Word Press Help needed

[jkgourmet]

My post dated 10/25 has a bullet list on the right of an image. As you can see, the bullets are too close to the image. How can I move them over?

Here's the code: (and don't believe for a minute that I understand any of it!)
------------------------------------------------
The hot and sunny colors are great - cobalt blue, light green, sunshine yellow and bright orange. Some pieces come in a rich chocolate color, too.<ul>
<li>Dishwasher, microwave, freezer safe and oven safe to 500°F for convenience and versatility. The glazed interior is nonporous so foods won't interact or stain.</li>
<li>Contemporary Design - Contemporary, playful shape in a vibrant and fun colors go directly from oven to table. The shallow sides result in crunchy tops for each serving.</li>
<li>Easy Storage - Clever cookware design allows most pieces to nest together to save space in your cupboard.</li>
<li>Wide, Flared Handles - Enables you to get a good grip from any angle.</li>
</ul>
Any of these would be great to have, but I've got my eyes on the set of four 10 ounce Bubble and Brown Singles. At $19.99 these look
-----------------------------------------
I've tried a variety of things, but figured I'd better quit before I screw something up royally and have to use those backups that Steven T. taught me to make every day.

[TraciKnoppe]

This is a CSS issue. You need to add this snippet of code to your CSS stylesheet in the proper spot, in order to control those bullets.

list-style-position: inside;

Without actually looking at your stylesheet, it may be tough for me to tell you exactly where to place this code. From what I can tell by looking at your coding, look for an element in your stylesheet called: .post-content

If you have a .post-content listed, add the above code to whatever code is there, making sure to put the above code somewhere before the closing } for the .post-content code listed.

Let me know if that works for you.

[amibr]

Traci is right, look for this:

ul li, ol li {
list-style-positionutisde;
}

change to:

ul li, ol li {
list-style-position:inside;
}


Tip: if you use FireFox click Ctrl + F and you will get a little search box at the bottom. Go to your styleshet, click Ctrl F and write ul li and hit enter until you find the above part.

[Adriana]

I always place my images in a div tag, like so:

<div style="float:left;margin:15px;">imageurlhere</div>

You can float left or right, depending on where you want your picture to show up, and you can increase or decrease the margin (for my 15px works great)

[StephenT]

In my simplistic view I thought, why not move the image to the other side? I just read somewhere that search engines crawl from left to right and sometimes have a hard time with images. Don't know if that's true, but then if you put your pic on the right voila! everything is fixed!

[TraciKnoppe]

Yes, moving the image to the right would most likely solve the problem in this instance, but in reality you should be able to place your images where you want/need them. My CSS fix will resolve the problem and images can be placed wherever they best fit into your content.

[pamb10]

You can also try to add a horizontal margin around the image. Click on image in post and then edit advanced options.

[jkgourmet]

Geez, you guys are super helpful today! Thanks. (did anybody notice what time I put that post up last night - I should have done that yesterday afternoon and gotten a good night's sleep instead of trying to fix it myself!)

Before I go in and fool with this anymore:

Steve, your're right. That would have been the simple solution. Can't see the forest through the trees.

BUT since this is a format that I suspect I will be using - If I understand all of this (and I assure you, I don't ) Traci's fix will fix it permanently, yes? (I already tried that inside, outside thing, but on another string of code - img-content maybe?)

[TraciKnoppe]

Jeanette: yes, my fix would be permanent, as long as you continue to use this same blog theme.

If my fix didn't work within the string of CSS code you tried, then that wasn't the correct code to place it. CSS is called Cascading Style Sheets, because the rules cascade down the stylesheet rules/coding like a waterfall from top to bottom - inheriting rules from above, until you change the rule at a new level.

What you're needing to do, is find the rule that is closest to the area where these ul li are showing and change it there. If you change it further up, or elsewhere in the stylesheet, it will change the placement/look of ul and li perhaps where you don't want them changed.

If you do not have a style called .post-content, then add one. So add this to your stylesheet:

.post-content { list-style-position: inside; }

You can place that anywhere, because you're creating a new class rule, but if you have coding in the your stylesheet that pertains to post content elsewhere, try to place this code near that similar code.

[jkgourmet]

BOY THAT WAS FREEKING EASY (and yes, I meant to shout!).

The firefox control F thingy - cool. Very cool. I thought Firebug was helpful. Now I'm buzzed for the rest of the day!

Thanks, everybody. You can be sure I will use and abuse you guys for this kind of stuff in the future. Unlike the WP forums, you guys speak English instead of code. (though they are very helpful and responsive most of the time.)