18 Replies Latest reply: Dec 9, 2012 8:23 AM by sudarshan.t RSS

    Floating images with an unordered list

    dwdivazona

      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.

        • 1. Re: Floating images with an unordered list
          Nancy O. MVP

          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.

          • 2. Re: Floating images with an unordered list
            dwdivazona Community Member

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

             

            www.danamarthamusic.com/ministry.htm

            • 3. Re: Floating images with an unordered list
              Nancy O. MVP

              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.

              • 4. Re: Floating images with an unordered list
                dwdivazona Community Member

                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.

                • 5. Re: Floating images with an unordered list
                  Nancy O. MVP

                  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.

                  • 6. Re: Floating images with an unordered list
                    marksey777

                    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;">

                    • 7. Re: Floating images with an unordered list
                      dwdivazona Community Member

                      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????

                      • 8. Re: Floating images with an unordered list
                        sudarshan.t Community Member

                        <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

                        • 9. Re: Floating images with an unordered list
                          dwdivazona Community Member

                          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

                          • 10. Re: Floating images with an unordered list
                            sudarshan.t Community Member

                            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

                            • 11. Re: Floating images with an unordered list
                              dwdivazona Community Member

                              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.

                              • 12. Re: Floating images with an unordered list
                                sudarshan.t Community Member

                                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>:

                                 

                                <!--[if lte IE 7]>
                                <link rel="stylesheet" type="text/css" href="ie67.css" />
                                <![endif]-->

                                 

                                Create another CSS ie67.css and add this:

                                 

                                ul{

                                   zoom: 1;

                                }

                                 

                                 

                                Let us know how it goes.

                                 

                                -ST

                                • 13. Re: Floating images with an unordered list
                                  dwdivazona Community Member

                                  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!

                                  • 14. Re: Floating images with an unordered list
                                    dwdivazona Community Member

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

                                     

                                    Thank you so much for your help!

                                    • 15. Re: Floating images with an unordered list
                                      sudarshan.t Community Member

                                      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):

                                       

                                      ie7 danamartha.png

                                       

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

                                       

                                      -ST

                                      • 16. Re: Floating images with an unordered list
                                        sudarshan.t Community Member

                                        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

                                        • 17. Re: Floating images with an unordered list
                                          dwdivazona Community Member

                                          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!

                                          • 18. Re: Floating images with an unordered list
                                            sudarshan.t Community Member

                                            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