Forum Moderators: not2easy
I am trying to solve a formatting problem and so far I have no luck. My problem is that list text are not align properly. For example, LIST #1 is very long so the text continued onto line#2. However, text on line #2 is not align properly with text on line #1
Here is my code and sample so you can see what I mean
<html>
<head>
<title>list</title>
<style type="text/css">
ul#list{width:500px; border: 2px solid #CCC;
padding:10px; margin:10px 10px 0 45px;}
ul#list li{color:#333; list-style-position: inside; font-family: arial; font-size: 12px;}
</style>
</head>
<body>
<ul id="list">
<li>Random text A Random text A Random text A Random text A Random text A Random text A </li>
<li>Demo demo Demo demo Demo demo </li>
<li>Rdemo b Rdemo b Rdemo b Rdemo b Rdemo b Rdemo b Rdemo b Rdemo b Rdemo b Rdemo b Rdemo b</li>
</ul></body>
</html>
Thanks in advance for any advices :-)
While this is a handy margin/padding workaround when trying to style list items without bullets, it is what is causing the "undesired wrap" in this instance..
You need to respecify the list position to outside or leave it out altogether as "outside" is the default.
When you do this you will need to adjust your left margin and padding to suit.
Note: as different browsers apply the left position differently it's best to make sure they (left margin and left padding) are both the same.
Suzy
:-) Thxs
::Gerald::
