Skip navigation
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.

 
Replies
  • Currently Being Moderated
    Dec 7, 2012 10:41 AM   in reply to dwdivazona

    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
    Dec 7, 2012 10:54 AM   in reply to dwdivazona

    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
    Dec 7, 2012 11:32 AM   in reply to dwdivazona

    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
    Dec 7, 2012 1:38 PM   in reply to Nancy O.

    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:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 8, 2012 6:57 AM   in reply to dwdivazona

    <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:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 8, 2012 8:58 PM   in reply to dwdivazona

    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:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 9, 2012 8:07 AM   in reply to dwdivazona

    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

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 9, 2012 8:06 AM   in reply to dwdivazona

    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

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 9, 2012 8:08 AM   in reply to dwdivazona

    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:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 9, 2012 8:23 AM   in reply to dwdivazona

    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:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points