Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
Like Tree1Likes
  • 1 Post By brandMatt

Thread: list marker misaligned vertically when words wrap

  1. #1
    Junior Member
    Join Date
    Nov 2009
    Posts
    18
    Member #
    20398

    list marker misaligned vertically when words wrap

    In an unordered list where a list item is word-wrapped, the list marker is appearing on the last line of the list item. It should appear on the first line. The problem is visible in Firefox 42.0 for OpenSusue 13.2 and Chromium 46.0.2490.86 (64-bit), on the same platform and with either browser's window at either maximum or demaximized. Konqueror 4.14.8, also on the same platform and with the window either way, puts the marker half-way between the second and third lines, even if wrapping produces five lines. On another laptop with an unknown viewport width, both Chrome 46.0.2490.86 m and Internet Explorer 11.0.9600.17041CO update version 11.0.7 showed the marker on the last line. In all the browsers, a list item without word wrap has the marker where it belongs. I need the word wrap. This is on http://cold32.com. How do I fix this marker misalignment?

  2.  

  3. #2
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    I would completely remove the natural bullets, and replace them with borders on the left side, maybe a little margin on the bottom of each li.
    This would leave a line beside each, instead of a bullet. Not quite what you were asking for, but it's the way I would handle it. Personally I am not to fond of the natural list bullets.

    HTML:
    Code:
    <ul>
        <li>List Item One</li>
        <li>List Item Two (this one is really long, so long that it wraps to a second line, maybe even a third line.)</li>
        <li>List Item Three</li>
    </ul>

    CSS:
    Code:
    ul {
        list-style:none;
    }
    li {
        border-left: 1px solid #000;
        margin:0px 0px 10px 0px;
        padding:0px 0px 0px 5px
    }
    Here is a link to the pen I used for dev http://codepen.io/unfinishedCode/pen/XXWxwJ
    Last edited by brandMatt; Dec 05th, 2015 at 04:30 PM.
    Nick Levinson likes this.

    My Web Site:
    brandwebdesign.ca
    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link. Some of us are really insecure and need those likes so that we feel important and smart, so come on, help us out, huh?

  4. #3
    Junior Member
    Join Date
    Nov 2009
    Posts
    18
    Member #
    20398
    Since all of codepen.io's content is under copyright, I used your idea as an inspiration. Thank you; I think the page looks a good deal better, and it still likely meets users' expectations. You can see it at cold32.com in two major layouts for viewport widths of 1300px up or 1299px down. I kept touch compatibility. Thanks for the starter.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:58 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com