UL Bullets over left aligned image.

Need up-to-date CSS advice...

This file confuses me: http://www.leevalleyestates.co.uk/Untitled-2.html

There is an image which is left aligned, and an unordered list, but the bullets site on top of the image in Mozilla, and under the image in IE7.

I am using this in a website with a plugin WYSIWYG editor, and so I don't want to use DIVS to solve it (the client wouldn't understand) so all I have at my disposal is the CSS definitions for the UL and a class I can attach to the image.

How can I make this look like normal HTML?  (and why's  it doing it anyhow!)

Has this always been a problem, and I just never noticed?

I have tried mucking about with the margins and padding,  replacing the bullet with an image, and setting the UL to be 'inline' (whatever that means!)

Points given for simplest and quickest solution...

Ta.

cris.




<body>
<p><img src="http://www.leevalleyestates.co.uk/images/uploaded/case_studues/lversa_250.jpg" align="left" />dsfth l;sjk sdh sfh sf</p>
<ul>
<li>h sdfgh sf sh sdh sdfh sdfth sdh </li>
<li>sdfh sdh sd</li>
<li>h sdth sdthsd th sdth sdth</li>
</ul>
<p> sgh s</p>
<p>h sdh sdh </p>
<p>s </p>
</body>

Open in new window

CrisThompsonUKAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

CrisThompsonUKAuthor Commented:
... forgot to say,

Would like the solution to work on IE6 as well.

ta.

cris.
0
PhatzerCommented:
Is this OK?
<body>
<p><img src="http://www.leevalleyestates.co.uk/images/uploaded/case_studues/lversa_250.jpg" align="left" />dsfth l;sjk sdh sfh sf</p>
<span style="float: left;">
<ul>
<li>h sdfgh sf sh sdh sdfh sdfth sdh </li>
<li>sdfh sdh sd</li>
<li>h sdth sdthsd th sdth sdth</li>
</ul>
</span>
<br clear="left" />
<p> sgh s</p>
<p>h sdh sdh </p>
<p>s </p>
</body>

Open in new window

0
CrisThompsonUKAuthor Commented:
Sorry, no spans or divs...

Needs to just use the CSS for UL, LI and a class I can attach to the image...
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

PhatzerCommented:
Revert back to your original code and use this in your <HEAD> section:

<style type="text/css">
li {margin-left: 1em;}
</style>
0
PhatzerCommented:
Apologies, still looking, as IE doesn't like that... lol I'm not sure why it is, but I'll keep trying!
0
PhatzerCommented:
By George I think I've got it!

<style type="text/css">
ul { list-style-position: inside; }
</style>
0
CrisThompsonUKAuthor Commented:
Close, but...

When LI spans more than one line, you lose the indent...

Updated: http://www.leevalleyestates.co.uk/Untitled-2.html
0
JezcentralCommented:
What is it you are trying to achieve? Do you want the bulletpoints to be the the left of the image, and the paragraph text underneath the image, or underneath the bullet-points?
0
JezcentralCommented:
Sorry, I meant to the right.
0
CrisThompsonUKAuthor Commented:
I want the text to flow around the image properly, so that the relative paragraph and UL indentation is the same as when there is no image.

cris.
0
PhatzerCommented:
Is this any different:

<style type="text/css">
ul { list-style-position: inside; }
li { margin-left: 1em; }
</style>
0
CrisThompsonUKAuthor Commented:
nope.
0
PhatzerCommented:
hmm i think this might be a little difficult without the use of divs or spans, I've used editors before which do it, I think FCKEditor.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
JezcentralCommented:
You want "the text to flow around the image properly"? But that's what I'm seeing (unless misunderstand "properly" :)  ). Any chance you could post a screenshot of what you are seeing?
0
CrisThompsonUKAuthor Commented:
How about this:

http://www.leevalleyestates.co.uk/ethos_study_detail.html?id=22

This is the actual webpage...

I have included Phatzer's ul { list-style-position: inside; }

Without this, the bullet points over appear either behind or on top of the image. (see http://www.leevalleyestates.co.uk/Untitled-2.html).

There is something going wrong with the UL when there is also a left aligned image...

And there must be a simple fix.

Note in the live page how the indentation on the second UL is much bigger than the one next to the image...

Come on experts, don't fail me now.
0
CrisThompsonUKAuthor Commented:
I have managed to work it out myself with help from Phatzer, and other EE questions...

ul {
list-style-position: inside;
}
li {
padding-left: 2em;
text-indent: -1em;
}

Point to Phatzer for speedy responses...

But why is this happening at all?
0
JezcentralCommented:
All you need is <img style="float: left;"/> or <img style="float: right;"/> The rest of the text will flow around any images with those styles.
0
CrisThompsonUKAuthor Commented:
I need to re-open this question...

Jezcentral, I wish your solution worked!  I have included it in the file below...

If you go to http://www.leevalleyestates.co.uk/Untitled-2.html

In Mozilla, the bullets are on top of the image, in IE they are underneath the image...

I want the image on the left, with the bullets properly indented to the right, like good text.

Anyone help?


cris.
0
JezcentralCommented:
As you've already given the points away, you probably won't get very much interest!
I'm still not clear what you want. ("Proper html" and "good text" isn't very descriptive!)
This is what I'm seeing in Firefox and IE. I can't see the difference! :)
firefix.jpg
ie.jpg
0
JezcentralCommented:
Sigh. Yes I can....
0
JezcentralCommented:
<p style="float: left;"><img style="display: block;" align="" src="http://www.leevalleyestates.co.uk/images/uploaded/case_studues/lversa_250.jpg" />dsfth l;sjk sdh sfh sf</p>
<ul style="float: left; width: 200px">
        <li>h sdfgh sf sh sdh sdfh sdfth sdh kl dfgh shg dh dh dh dh dhsh sdfgh sdfgh fgh gh fgh fh f hd ljljlkl </li>
        <li>sdfh sdh sd</li>
        <li>h sdth sdthsd th sdth sdth</li>
</ul>

You can change the width of the <UL> but you need to define it or, once floated, it defaults to a width of 100% which is obviously too wide to go side-by-side with the img!

Apologies for my stupidity earlier. (Feel free to start another thread so you you can give me some points for this. :) ))
0
JezcentralCommented:
In short, you need to float the <p> the image is in, not the image. Set the image style to display: block; so the text that comes immediately after it will sit underneath it. Then style the <UL> to float left next to the image, but two floated element won't overlap each other, (your problem is only one element was floated, so the margin for the list-styles was collapsing unerneath it). As I said earlier, the width needs to be set to stop it defaulting to 100%, as floated elements tend to do.
0
CrisThompsonUKAuthor Commented:
Thanks Jezcentral,

My problem is that all of this is done through a CMS system using TinyMCE editor.  These images and bullet lists are being input by the client, but I don't think either they or the editor is up to the job of inserting a particular type of P tag or UL...

Why is this a problem?  I have never come across it before.

All I have easy access for the client to control is a class tag on the image, and the universal definition for UL/LI...

Is it possible to get what I need with these?

cris.



0
JezcentralCommented:
The problem is you have two elements you want to put next to each other, an <img> and a <ul>. However, the img is inside a <p>, so it not the <img> you need to put next to the <ul>, it the <p>.

Both <p> and <ul> are block level elements (i.e. they have an implicit style of display: block;), like <div> (unlike inline elements like <span> or <a>). Block level elements have the equivalent of a <br> before it, and a <br> after it. The way to put them side by side is to use FLOAT.

N.B.: Technically you could also turn them into inline elements (set their style to display: inline;) ALTHOUGH THIS IS A BAD IDEA. I only mention this for the sake of completeness.

Good luck!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.