Click to See Complete Forum and Search --> : text not aligning in <ul>


tiki16
04-09-2008, 11:14 AM
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

turboraketti
04-09-2008, 12:52 PM
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?

Centauri
04-09-2008, 06:39 PM
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 :.section-content ul{
float:left;
list-style: circle;
text-align:left;
list-style-position: outside;
margin: 0;
padding: 0 0 0 2em;
}