Forum Moderators: not2easy

Message Too Old, No Replies

Unwanted white space between text

         

rahfiki

12:27 am on Apr 30, 2009 (gmt 0)

10+ Year Member



Hey I have a problem with my unordered list.

The Problem:
Text inside a UL has extra white space.

Text should be displayed like this:
Certified Facility
Manager

It is displaying like this:
Certified "SPACE SPACE" Facility
Manager

Any ideas? This problem is in my menu AND in my body for all UL's. This leads me to believe the problem is in the main or body?

CODE:
body {

padding: 0;
background-color: #ebebeb;
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: black;
}

#header {

height: 152px;
background: url(images/img01.png) no-repeat left top;
}

#allcontent {

padding-top: 0px;
width: 1026px;
padding-bottom: 10px;
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
}

CODE FOR THE LIST:
#wrap {

background: #fff;
margin: 0 auto;
overflow: auto;
padding:0;
position:relative;
}

#multi ul {

margin: 15px auto;
padding: 0 0 15px 0;
list-style-type: none;
background: #6F0;
overflow: auto;
font-size:small;

}

#multi li {
width: 250px;
margin-bottom: 0px;
float: left;
margin: 15px 0 0 0;
padding: 0 10px 0 10px;
line-height: 15px;
}
.multi a {
text-decoration: none;
color: blue;
padding: .4em 1em;
display: block;
position: relative;
}

.multi a:hover {
color: red;
display: block;
position: relative;

}

HTML for list in the body:
<div id="wrap">
<div id="multi">
<ul class="multi">
<li><a href="#">Some Text on two lines</a></li>
<li><a href="#">Some Text on two lines longer still</a></li>
<li><a href="#">Text Link on two lines longer still</a></li>
<li><a href="#">Some Text on two lines longer still</a></li>
<li><a href="#">Short Text</a></li>
</ul>
</div>
<!--end wrap--></div>

[edited by: SuzyUK at 9:48 am (utc) on April 30, 2009]
[edit reason] examplified URLs & Specifics, and shortened list [/edit]

SuzyUK

9:07 am on Apr 30, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



text-align: justify; 

in the body rule would be setting that for all text through out the page unless it's overruled later

add text-align: left; to the elements (e.g. your lists) for anything you do not want to be justified.

rahfiki

1:40 pm on Apr 30, 2009 (gmt 0)

10+ Year Member



SuzyUK, thanks that did the trick. I have another problem...

Between list items there is an extra line of space so it looks like it is double spaced. This is only happening on the left column of a 2 column list.

SuzyUK

4:35 pm on Apr 30, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



rahfiki, that is the effect of the floated 'columns', if the second "column" has a longer link it wraps to two or three lines

Then when the next floated list item tries to float back over to the left column it will still appear below the right column because of the float clearance

If you don't want this you will have to rewrite the code to be 2 x separate lists where the entire list floats left or right to make your "columns"

rahfiki

4:41 pm on Apr 30, 2009 (gmt 0)

10+ Year Member



ah, Okay. I'll give that a shot. Thank you