Adobe Community: Floating images with an unordered list

Currently Being Moderated

Floating images with an unordered list

Dec 7, 2012 10:38 AM

I am having a problem trying to find the proper way to float an image to the left of an unordered list. In different browers it responds differently - the image will sometimes find it's way between the bullets and the text rather than having the bullets and text wrap around the right side of the image. I have changed margins to try to push the bullets as far out as possible. I've dragged the image to the end of of a line thinking that it will automatically float left of the bullets (of course I am using the .fltlft class). But the positioning is not consistent in any browser.

1502 Views 18 Replies Latest reply: Sudarshan Thiagarajan, Dec 9, 2012 8:23 AM

Replies

Currently Being Moderated

1. Nancy O.,

Dec 7, 2012 10:41 AM in reply to dwdivazona

Report

Did you give your float a width in pixels?
Can you show us a test page URL or the CSS & HTML code you're using?

Nancy O.

|
Mark as:
Currently Being Moderated

2. dwdivazona,

Dec 7, 2012 10:44 AM in reply to Nancy O.

Report

Oh, sorry! I forgot to post the web address.

www.danamarthamusic.com/ministry.htm

|
Mark as:
Currently Being Moderated

3. Nancy O.,

Dec 7, 2012 10:54 AM in reply to dwdivazona

Report

Well I don't see any floats in markup.

Floats come first:

<div class="floatLeft" style="width:150px; min-height: 250px">
Your image goes here
</div>

<ul>
     <li>list item</li>
     <li>list item</li>
     <li>list item</li>
     <li>list item</li>
</ul>

After floats are no longer required, clear them with a block level element such as p, div or hr tag.

<hr class="clearing" style="display:block; clear:left" />

Nancy O.

|
Mark as:
Currently Being Moderated

4. dwdivazona,

Dec 7, 2012 11:05 AM in reply to Nancy O.

Report

Thank you Nancy.

OK. I work almost exclusively in design view so when I inserted these images, I put my cursor at the beginning of a line, used the "insert image" command and then applied the .fltlft class to it.

That makes the source code look like this: (this is just one of the unordered lists on the page)

<ul>
      <li>Martha will work with the Director of Music to determine the overall service needs, from the theme of the service to particular musical requirements</li>
      <li>Martha will rehearse the choir and/or other musicians ahead of the service<img src="saxophone.jpg" alt="sax" width="227" height="170" class="fltlft" /></li>
      <li>Martha will meet with the Liturgist and/or Pastor ahead of the service to coordinate any special requirements</li>
      <li>Martha and Dana will provide a prelude, a postlude, an offertory, gifts of music (special music), hymn accompaniment, liturgical music, incidental background music and accompaniment for any special music</li>
      <li>Martha and Dana will play for special services, such as Baptisms, Lessons and Carols, Candlelight Services, Christmas Eve, Lent, Capital Campaign Kickoff, Rally Day</li>
    </ul>

So are you saying that I need to add the div class that you typed up there before every section of unordered list in the code with the <img src=....> immediately after it and then use the <hr class...> that you wrote after the last <ul> of the section?

I am learning more and more about code but I am still quite a newbie at it.

|
Mark as:
Currently Being Moderated

5. Nancy O.,

Dec 7, 2012 11:32 AM in reply to dwdivazona

Report

I'm saying the Float container must come first in the markup, followed by the non-floated text and a float clearing.

Maybe this demo page will help clarify.
http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml

Nancy O.

|
Mark as:
Currently Being Moderated

6. marksey777,

Dec 7, 2012 1:38 PM in reply to Nancy O.

Report

WHat Nancy is saying that you're best to contain the image in a conatiner that has a float of left but to place this before the list.

<div style="float:left">
<img src="example.jpg">
</div>

Or you can give the image an css selector that has a float of left.

.left{float:left;}

<img src="example.jpg" class="left"/>

Then clear after the list.

Or add the html to float the image left.

<img src="example.jpg" style="float:left;">

|
Mark as:
Currently Being Moderated

7. dwdivazona,

Dec 7, 2012 7:05 PM in reply to marksey777

Report

Thak Marksey and Nancy, but I am still having issues. I tried the container solution. I altered the source code to this (the bold is what I altered): (again, this is just one of the lists)

<p><a name="service" id="service"></a><strong>REGULAR OR SPECIAL SERVICE MUSIC EXPECTATIONS</strong></p>
<div style="fltlft">
<img src="saxophone.jpg" alt="sax" width="227" height="170" class="fltlft" />
</div>
    <ul>
      <li>Martha will work with the Director of Music to determine the overall service needs, from the theme of the service to particular musical requirements</li>
      <li>Martha will rehearse the choir and/or other musicians ahead of the service</li>
      <li>Martha will meet with the Liturgist and/or Pastor ahead of the service to coordinate any special requirements</li>
      <li>Martha and Dana will provide a prelude, a postlude, an offertory, gifts of music (special music), hymn accompaniment, liturgical music, incidental background music and accompaniment for any special music</li>
      <li>Martha and Dana will play for special services, such as Baptisms, Lessons and Carols, Candlelight Services, Christmas Eve, Lent, Capital Campaign Kickoff, Rally Day</li>
    </ul>
    <p class="clearfloat"/>

In firefox and and chrome it looks fine. But in Internet Explorer, the bullets in the list disappear. Internet explorer created most of the original problem. Before I made this change, the image appeared between the bullets and the text in IE.

I do have an external css attached to this page which has the .fltlft class which I applied to the images. But before I had not addressed the .clearfloat issue (which I also am not sure if I applied correctly).

What am I doing wrong????

|
Mark as:
3,731 posts
Oct 15, 2010

Currently Being Moderated

8. Sudarshan Thiagarajan,

Dec 8, 2012 6:57 AM in reply to dwdivazona

Report

<div style="fltlft">
<img src="saxophone.jpg" alt="sax" width="227" height="170" class="fltlft" />
</div>

It should be:

<div class="fltlft">
<img src="saxophone.jpg" alt="sax" width="227" height="170" class="fltlft" />
</div>

You don't have to assign fltlft class to both the container and the image.

Also, I see you have fltlft defined in both your HTML file (129) and in your external CSS file (line 46). In your case, the rules in mainedited.css wins over the rules in HTML. Consolidate your code.

And run your site through W3 validator: http://validator.w3.org/ and fix all errors. At the moment it shows 13 errors.

-ST

|
Mark as:
Currently Being Moderated

9. dwdivazona,

Dec 8, 2012 10:03 AM in reply to Sudarshan Thiagarajan

Report

Thank you, Sudarshan. I have done what you suggested and consolidated my code. I created this site before I knew much about css, just relying on the DW templates. Now I have learned more, I wanted to tweak things and created an external style sheet but I see that things got, shall we say "cross-pollinated."

So anyway, I am now working just with the mainedited.css. So I would like to start this whole discussion over if you don't mind.

The unordered lists are not wrapping correctly around my .fltlft images in Internet Explorer (they seem fine in Chrome and Firefox). The bullets of the list apear on the left side of the image with the text of the lists on the right of the image. How can I fix this?

I have not applied a .clearfloat yet. Don't know where to do that. Do I address this in the css file or in the source code of the document? Please give me step by step instructions.

The two pages in question are:

http://danamarthamusic.com/ministry.htm
http://danamarthamusic.com/services.htm

I did run the site through the validator and did see some errors which I need to fix (although I don't know how....). I will ask about those in a new discussion.

Thanks.
Regina

|
Mark as:
3,731 posts
Oct 15, 2010

Currently Being Moderated

10. Sudarshan Thiagarajan,

Dec 8, 2012 8:58 PM in reply to dwdivazona

Report

Your <img> tag is within <li> tag - this results in IE considering your image as part of your list item - thereby bulleting it.

Try this:

<img width="232" height="184" class="fltlft" alt="Martha Playing 2" src="marthaplaying2.jpg">

<ul>
      <li>Martha will provide the bridal couple with a “Bridal Sampler” CD which has suggestions for all aspects of wedding service music. Martha will then work with the bridal couple to determine appropriate musical selections.</li>
      <li>Martha will rehearse with any featured musicians ahead of the ceremony</li>
      <li>Martha will coordinate with the wedding planner to assure the smooth execution of the ceremony’s music</li>
      <li>Martha and Dana will provide gathering/prelude music and exit/postlude music in an appropriate length before and after the ceremony</li>
      <li>Martha and Dana will provide liturgical music, incidental music and accompaniment for featured musicians as the service requires.</li>
      <li>Martha has a portable electronic keyboard and amp available to bring (cartage fee applies)</li>
    </ul>

I've moved <img> markup from within the <li> tag to outside of the <ul> tag.

-ST

|
Mark as:
Currently Being Moderated

11. dwdivazona,

Dec 8, 2012 9:24 PM in reply to Sudarshan Thiagarajan

Report

Thanks for keeping with me, Sudarshan!

OK, tried this. But now check it out. The bullets are now on top of the pictures on the left side in IE separated from the text.

|
Mark as:
3,731 posts
Oct 15, 2010

Currently Being Moderated

12. Sudarshan Thiagarajan,

Dec 9, 2012 8:07 AM in reply to dwdivazona

Report

Try this.

mainedited.css:

.content ul {
padding: 0px 15px 15px 40px;
}
Remove the code in red.

Add this to your CSS:

ul {
overflow: hidden;
}

Giving a hidden overflow parameter to <ul> means the entire box is pushed to the side of float, instead of just the content - the way it is happening now.

You may also want to reduce your right margin on .fltlft:

.fltlft {
float: left;
margin-right: 10px;
margin-top: 8px;
margin-bottom: 8px;
-moz-box-shadow: 0px 0px 20px #000;
-webkit-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
}

For IE6 and IE7 to get this right, add this to your <head>:



Create another CSS ie67.css and add this:

ul{
zoom: 1;
}

Let us know how it goes.

-ST

|
Mark as:
Currently Being Moderated

13. dwdivazona,

Dec 9, 2012 7:37 AM in reply to Sudarshan Thiagarajan

Report

Thanks for the step by step.

Did as you said, but now I don't see any of my bullets in the lists. How did that happen?

Thanks again for sticking with me!

|
Mark as:
Currently Being Moderated

14. dwdivazona,

Dec 9, 2012 8:03 AM in reply to dwdivazona

Report

DISREGARD Last post! I realized a mistake in my css correction. It works!

Thank you so much for your help!

|
Mark as:
3,731 posts
Oct 15, 2010

Currently Being Moderated

15. Sudarshan Thiagarajan,

Dec 9, 2012 8:06 AM in reply to dwdivazona

Report

What version of IE are you testing on?

I tried it on IE7 and it works just fine (but for the box shadow for which you need to add an IE compatible filter statement to CSS):

Also, I did notice that you've added a href to ie67.css, but the file doesn't seem to exist.

-ST

|
Mark as:
3,731 posts
Oct 15, 2010

Currently Being Moderated

16. Sudarshan Thiagarajan,

Dec 9, 2012 8:08 AM in reply to dwdivazona

Report

dwdivazona wrote:

DISREGARD Last post! I realized a mistake in my css correction. It works!

Thank you so much for your help!

I think I was typing my response #15 while you were typing this!

Glad it is fixed now.

Do post back if you need further help. Happy learning!

-ST

|
Mark as:
Currently Being Moderated

17. dwdivazona,

Dec 9, 2012 8:10 AM in reply to Sudarshan Thiagarajan

Report

I am testing on IE 9.

I thought I attached the ie67.css byt I guess I didn't. It should be there now.

What is the IE compatible filter statement for box-shadow? I thought is was the -webkit-box-shadow......

Thanks!

|
Mark as:
3,731 posts
Oct 15, 2010

Currently Being Moderated

18. Sudarshan Thiagarajan,

Dec 9, 2012 8:23 AM in reply to dwdivazona

Report

What is the IE compatible filter statement for box-shadow? I thought is was the -webkit-box-shadow......
No. Each browser uses a different rendering engine.

Webkit is for Safari & Chrome. IE uses Trident (http://en.wikipedia.org/wiki/Trident_%28layout_engine%29). Firefox uses Gecko & Opera uses Presto.

That apart, coming to your actual question for box-shadow in IE,

Common box-shadow syntax will work for IE9 and above. If you want it to work on IE 8 or lower, take a look at CSS3 PIE - http://css3pie.com/

You may also want to take a look here (alternate method): http://hedgerwow.appspot.com/demo/shadow

CSS3 PIE is much easier and I'd +1 it.

-ST

|
Mark as: