www.webdeveloper.com
Results 1 to 6 of 6

Thread: ordered list next to floated element: issue with vertical alignment and text indent

  1. #1
    Join Date
    Jan 2007
    Posts
    8

    Exclamation ordered list next to floated element: issue with vertical alignment and text indent

    Hi,

    I have an issue with an ordered list.
    When the line wraps, in IE6 the number aligns suddenly to the bottom. And the text indentation Firefox goes wrong also. It should properly align with the first line of the wrapping <li>.

    The same list could appear next to floated element or stand to the left side of the box.

    I had to use a separate stylesheet for IE only to get the left margin right in all browsers.

    See testcase here:
    http://www.flink.nl/test/ordered-list-ie6.html

    Because it's being used in a content management system, this structure has the following conditions:

    • You cannot define any widths for any of the elements
    • The list should also align properly to the left, without standing next to the floating element.
    • The content has to wrap around the element.
    • it's not allowed to place extra HTML-tags or classes in or around the list to influence it's behavior.


    Does anyone have a bright idea?

    thanks in advance!
    Flink
    Last edited by Thatsid; 02-13-2009 at 04:45 AM.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Quote Originally Posted by Thatsid View Post
    Does anyone have a bright idea?
    Get a decent CMS, the restrictions are ridiculous.

    Alternatively, as this is the second related posting, it's sounding more like homework which you should be solving yourself.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Jan 2007
    Posts
    8
    Quote Originally Posted by Fang View Post
    Get a decent CMS, the restrictions are ridiculous.
    Thanks for the tip but I think it's a fairly simple and straight forward structure. How would you achieve the same flexibility (wrapping text around image) in an other way?

    Quote Originally Posted by Fang View Post
    Alternatively, as this is the second related posting, it's sounding more like homework which you should be solving yourself.
    Excuse me, but i spend some hours trying to solve this myself! Without any luck...
    Last edited by Thatsid; 02-13-2009 at 09:48 AM.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The problem is with the lists, once you change margin, padding or float the list-style-type tends to disappear depending on the property values used.
    The easiest way is to place a background image in the li in place of the bullets.

    If you look through this typical css reset list, you will notice that lists are displayed is simple lines of text. Consequently any further changes to their properties will render them the same across all browsers.

    I can not see why a CMS would restrict you in such a way.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Jan 2007
    Posts
    8
    Quote Originally Posted by Fang View Post
    The easiest way is to place a background image in the li in place of the bullets.

    If you look through this typical css reset list, you will notice that lists are displayed is simple lines of text. Consequently any further changes to their properties will render them the same across all browsers.
    Maybe I wasn't clear: the current issue is with the ordered list, not the bullets. The bullets work fine now. As described in the example page: in IE6 the number of the ordered list aligns to bottom of the two lines when it wraps and in Firefox the second line of the wrapped text indents unwanted.
    Last edited by Thatsid; 02-16-2009 at 03:10 AM.

  6. #6
    Join Date
    Jan 2007
    Posts
    8
    Any other ideas anyone?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles