List not positioned right

HTML & CSS
1

Hi,

Having a small problem with a list I took over this project from another developer. The page is located at http://www.clhdesigns.com/wintermere/products.html

If you see beside the green box the bullet from my list does not line up with the type.

I have given the list a special class and it still does not work here is the css

ul.top
{
margin: 0;
padding: 0;
}
.top li
{
list-style-type:disc;
padding-left:10px;
}

And the html

<ul class=“top”>
<li>Sod sold on a per roll basis</li>
<li>We supply residential and commercial</li>
<li>Available for pick-up or delivery</li>
<li>Skid deposits are required for large orders that are dropped at site.</li>
<li>All large orders must be ordered 24-48 hours in advance, delivery charges can apply</li>
<li>Discounts will apply on per quantity basis</li>
<li>For pricing, please call our office at 905.686.0972</li>
</ul>

thanks for the help I just want the bullet to line up with the type and not outside of the type.

2

capples3

how about something like:


<h1>Kinds of Grass</h1>
<h2>Sods<h2>
<h3>Kentucky Blue Grass Sod Rolls</h3>
<p>
At Wintermere Sod Growers we harvest our sod fresh daily for quality guarantee.  We carry only small sod rolls for easy handling.  Each roll is a standard size of 16 inches wide x 81 inches long. They cover approximately 9 square feet and weight between 15 – 30 lbs.  We stack 85 rolls to a skid for easy truck or trailer pick-up. 
</p>
<h3>Quack Grass Sod Rolls</h3>
<p>
A perfect seed blend to wreck most lawns... :)
</p>

CSS:

h3 {
  color: #333;
  margin-top: 50px;
  margin-bottom: 20px;
  padding: 0;
}
p {
  color: #444;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
  font-size: 1.0em;
}

You get rid of all the <br /> and can give yourself lots of control on the margins between you sub-titles and paragraphs.

Steve

3

Did you try to remove the padding left?

4

^ By “type”, I assume the OP means the text above and below the UL.

The 20px left padding I placed on the UL will get it close, but that is all you can do. We have no control over where the UA actually places the bullet. They are usually within 1-2px depending on the browser.

The only way to get pixel perfection (as far as that is possible) with bullets is by making a bullet BG image and positioning it on the LI

EDIT:
Wow! a lot of <br> tags being abused on that page just for the sake of doing the job of margins

Spans being used for what should be h2 tags for the missing h1 on the page which is just an image.

I would see that as the most pressing thing to get straightened out.

<p><span class="heading1">
<br />
<br />
<br />
<br />
Kentucky Blue Grass Sod Rolls</span>
<br />
At Wintermere Sod Growers we harvest our sod fresh daily for quality guarantee.  
We carry only small sod rolls for easy handling.  Each roll is a standard size of 16 
inches wide x 81 inches long. They cover approximately 9 square feet and weight 
between 15 – 30 lbs.  We stack 85 rolls to a skid for easy truck or trailer pick-up. 
<br />
<br />
</p>
5

Sorry, not sure what you mean by that - can you draw us a picture or explain it in another way?

6

Hi,
I’m not sure where you are getting ul.top from because the ul you described on that page is known as #midebar ul

It has an ID hooked to it so it will carry more weight than a class

Looks like you just need to remove the default margins/paddings (as always) and then define your own left padding.

No need to redefine the font-styles from the UL to the LI, I just moved them to the LI.

list-style-type disc is the default for a UL so it can be excluded as well


#midebar ul {
[COLOR=Blue]margin:0;
padding:0 0 0 20px;[/COLOR]
}
#midebar li {
color:#5D7F39;
font-family:Arial,Helvetica,sans-serif;
font-size:15px;
}
7

I know about the breaks it’s brutal!!!
I took over this project from another designer because the client was not happy with the formatting. I tried to tell them let me do a structured 2 coloumn layout but they would not let me do it so I had to work with what I had.

I’ll try the solutions provided.

Thanks

8

yes I did and it still did not work
I need to move it over to the right.