/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Feb 13.2009

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.

[B]See testcase here:[/B]
[URL=”http://www.flink.nl/test/ordered-list-ie6.html”]http://www.flink.nl/test/ordered-list-ie6.html[/URL]

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

[LIST]

  • [*]

    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.


    • [/LIST]

    Does anyone have a bright idea?

    thanks in advance!
    Flink

    to post a comment
    CSS

    5 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @FangFeb 13.2009 — Does anyone have a bright idea?[/QUOTE]
    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.
    Copy linkTweet thisAlerts:
    @ThatsidauthorFeb 13.2009 — Get a decent CMS, the restrictions are ridiculous.[/QUOTE]

    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?

    Alternatively, as this is the second related posting, it's sounding more like homework which you should be solving yourself.[/QUOTE]

    Excuse me, but i spend some hours trying to solve this myself! Without any luck...
    Copy linkTweet thisAlerts:
    @FangFeb 13.2009 — 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.
    Copy linkTweet thisAlerts:
    @ThatsidauthorFeb 16.2009 — 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.[/QUOTE]

    Maybe I wasn't clear: the current issue is with the [U]ordered[/U] 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.
    Copy linkTweet thisAlerts:
    @ThatsidauthorMar 02.2009 — Any other ideas anyone?
    ×

    Success!

    Help @Thatsid spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.2,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,
    )...