www.webdeveloper.com
Results 1 to 3 of 3

Thread: text not aligning in <ul>

  1. #1
    Join Date
    Sep 2006
    Posts
    50

    text not aligning in <ul>

    Hello,
    I have a <ul> set within a container of a fixed width. If the text in the <li> is wider than the containers it wraps under the text but is just left of the text above it.

    How do i have the text that wraps align properly with the text above so that all li items are aligned properly?

    I have this css:
    .section-content ul{float:left;
    list-style: circle; text-align:left;
    }
    .section-content ul li{text-align:left;
    margin-bottom: 3px;
    }

    thanks

  2. #2
    Join Date
    Feb 2008
    Location
    Göteborg, Sweden
    Posts
    61
    The code you provided seems to work just fine. Do you have other CSS specified for ul/li (without the class)? Even better; do you have a link to the page that fails to render as you want?

  3. #3
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    You will have to make sure the list style position is "outside" - this may be getting over-ridden by another style rule. IE will probably hide the bullets in this situation, due to the different methods IE and FF handle the text indent and bullet display - taking control of all parameters of the <ul> margin and padding, and using left padding to provide the space for the bullet, ensures conformity cross browser :
    Code:
    .section-content ul{
    	float:left;
    	list-style: circle;
    	text-align:left;
    	list-style-position: outside;
    	margin: 0;
    	padding: 0 0 0 2em;
    }

Thread Information

Users Browsing this Thread

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

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