Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: li with position outside combined with img float left problem

Bottom of Page

1 to 2 of 2

  1.  
    • CommentAuthormagirus
    • CommentTimeFeb 5th 2009 edited
     permalink
    Hi All!

    I think there is a problem with the alignment of <li> elements when they are besides a floated element (say a <div> with float: left; width: auto; and an <img> inside). They seem to orient themselves with the beginning of the text on the margin that is set for the floating element. What they should do is align themselves with their bullets at the margin. Especially if list-style-position: outside; is set.

    A complete description of the problem with source HTML and inline CSS together with images could be found here

    Thanks kindly for your replys, comments or suggestions!
    Best regards,
    magirus
    •  
      CommentAuthorkari.patila
    • CommentTimeFeb 5th 2009 edited
     permalink

    div.image_left seems to have a width of 250px and a computed right margin of 16px, which I take is the 1em margin with my browser default being 16px.

    So, if you add a left margin of 266px (image width + 1em) to div.text_beside_img you should have your margins working again. The way I figured this works is like this: when there's a 266px wide float on the left hand side there's really nothing to calculate the margins from, since the li-elements don't have a left margin greater than 226px (266px - (48px LI offset - 8px UL offset).

    Does this make any sense at all?

1 to 2 of 2

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page