SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE6: Image floated to left of an unordered list

    I'm having a problem getting an unordered list to indent correctly when there is an image floated to the left of that list.

    I have mocked up a page that demonstrates the problem:
    1. Example 1 shows what happens by default when an unstyled unordered list appears next to a floated image. This looks the same in both Firefox 1.5 and Internet Explorer 6.
    2. Example 2 applies a {margin-left: 2em} rule to the li element. This corrects the indent issue in Firefox but has no visible effect in Internet Explorer.
    Does anyone have a CSS solution to this problem that will properly indent the unordered list in Firefox and other browsers?

    Regards,
    Andy Mason
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the 2nd ul try adding this: ul { display: inline; margin: 0; padding: 0; }.

  3. #3
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Tyssen. I tried that and it did improve the situation in Internet Explorer.
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com

  4. #4
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adding ul { display: inline; margin: 0; padding: 0; } works great in Firefox, but in Internet Explorer when an unordered list item wraps on to a new line the wrapped text appears underneath the bullet icon instead of lining up with the start of the text in the first line.

    I've lengthened the list items to show this happening in the example page--look at Example 3.
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •