Unordered list

HTML & CSS
1

For some reason the unordered list has spaces in between the bullet points and the words in IE9?

Pls help

here is the HTML


<div id="cocontent">
<ul>
<h2 align="left">O & M MANUALS</h2>
<br></br>
<li><a href="" target="_blank"><h3>CONTRACT LIST</h3></a></li>
<li><a href="http://galcorint001/OmManuals/BearLane/default.htm" target="_blank"><h3>BEAR LANE</h3></a></li>
<li><a href="http://galcorint001/OmManuals/Bonfire%20Hill/default.htm" target="_blank"><h3>BONFIRE HILL</h3></a></li>
<li><a href="http://galcorint001/OmManuals/CheshireSt/default.htm" target="_blank"><h3>CHESHIRE STREET</h3></a></li>
<li><a href="http://galcorint001/OmManuals/ClaphamRoad/default.htm" target="_blank"><h3>CLAPHAM ROAD</h3></a></li>
<li><a href="" target="_blank"><h3>CLOWELL HOUSE</h3></a></li>
<li><a href="http://galcorint001/OmManuals/Drayton/default.htm" target="_blank"><h3>DRAYTON PARK</h3></a></li>
<li><a href="http://galcorint001/OmManuals/GreenwichCommercialNew/default.htm" target="_blank"><h3>GREENWICH COMMERCIAL</h3></a></li>
<li><a href="http://galcorint001/OmManuals/GreenwichReach-Mothballed/default.htm" target="_blank"><h3>GREENWICH REACH - MOTHBALLED</h3></a></li>
<li><a href="http://galcorint001/OmManuals/GreenwichReach%20Commercial%20Block%20E/default.htm" target="_blank"><h3>GREENWICH REACH COMMERCIAL BLOCK E</h3></a></li>
<li><a href="http://galcorint001/OmManuals/Harte&Garter/default.htm" target="_blank"><h3>HARTE AND GARTER</h3></a></li>
<li><a href="http://galcorint001/OmManuals/HighRoadIlford/default.htm" target="_blank"><h3>HIGH ROAD ILFORD</h3></a></li>
<li><a href="http://galcorint001/OmManuals/Indescon/default.htm" target="_blank"><h3>INDESCON</h3></a></li>
<li><a href="" target="_blank"><h4>KEW ROAD</h4></a></li>
<li><a href="http://galcorint001/OmManuals/PoplarNorthBlk/default.htm" target="_blank"><h3>POPLAR NORTH BLOCK</h3></a></li>
<li><a href="http://galcorint001/OmManuals/PoplarSouthBlock/default.htm" target="_blank"><h3>POPLAR SOUTH BLOCK</h3></a></li>
<li><a href="http://galcorint001/OmManuals/Seager/default.htm" target="_blank"><h3>SEAGER</h3></a></li>
<li><a href="http://galcorint001/OmManuals/SnakesLane/default.htm" target="_blank"><h3>SNAKES LANE</h3></a></li>
<li><a href="http://galcorint001/OmManuals/South%20City%20Court/default.htm" target="_blank"><h3>SOUTH CITY COURT</h3></a></li>
<li><a href="http://galcorint001/OmManuals/StJames/default.htm" target="_blank"><h3>ST JAMES</h3></a></li>
<li><a href="http://galcorint001/OmManuals/Unison%20Apartments/default.htm" target="_blank"><h3>UNISON APARTMENTS</h3></a></li>
</ul>
</div>

here is the CSS


ul li {
text-align: left;
margin: 10px 500px;

}
2

You really shouldnt be using <h3> and <h4> inside the <li>'s.
Perhaps you have a style that is being applied to h3 and h4 tags as well?

3

Why cant you use h1-h6 inbetween <li> tags?

I dont have a style applied to the h2 and h3 tags

4

It not semantically correct!
A heading tag should be just that - a tag to denote a heading within the page content.
H1 - H6 depending on where the heading fits within the document/ content structure.

If you want the <li> content to look like a heading, style it in the CSS.

Also as an aside, target=“_blank” is deprecated and you should use alternative methods.
Have a look at http://www.infranet.com/_blog/Complete_Website_Optimization_Blog/post/Replacing_the_XHTML_deprecated_a_target_tag/ or
http://jalada.co.uk/2011/02/10/why-you-shouldnt-use-target_blank-and-what-to-use-instead.html for code tips and discussions.

5

Now, I do use headings within my lists. They can be awesome AND relevant. Just depends. However, having every element in a list does indeed defeat the whole purpose of headings. Headings work like this:
<h2>HEADING</h2>
<stuff>This content is “headed” by the heading. The heading is grouping all this content underneath as belonging to this topic!</stuff>
<h3>SUB-HEADING! I BELONG TO H2 ABOVE!</h3>
<stuff>This content is H3’s content, but H3 is a part of h2’s topic too.</stuff>

<h2>NEW HEADING, NEW TOPIC</h2>
<stuff>I’m some totally different stuff from the stuff above, cause we went back to h2.</stuff>

For some reason the unordered list has spaces in between the bullet points and the words in IE9?

It’s trying to figure out what your bad markup means, and made some guesses. Your markup is invalid as SpikeZ mentioned, and IE9 might behave the way you want after you fix it.

Here are the rules:
A <ul> can only have <li> tags as direct children. So you cannot do
<ul>
<h3>blah</h3>
<li>…</li>
<br></br>
<div> more stuff</div>
<li>…</li>
<ul>also no nesting other lists directly</ul>
</ul>

None of that is allowed.

Also, while HTML5 made <a><block element>text</block element></a> legal, it still smells and while IE9 should be new enough to not have issues, older IE still does. Go the other way with those:
<h3><a href=“”>Text</a></h3>
In your CSS you might need to explicitly state the color again even if it’s stated for the h3, since anchors generally can override parent colour. This isn’t bad though.

So, how to do headers and nested lists? <li> tags can hold pretty much anything, and as SpikeZ said, headings usually belong outside lists. Like, before lists. So if you need to use CSS to move both headings and the lists underneath around together, like floating them all left, you will need to wrap a div around the whole group. You already have that tho I think.


<div id="cocontent">
  <h2>O &[b]amp;[/b] M MANUALS</h2> //escape your & symbols!
   //instead of a br here, with CSS set a bottom margin or padding on the h2. Also to align it left if they're centered, with text-align: left; [b]in CSS[/b]
  <h3><a href="" target="_blank">CONTRACT LIST</a></h3> //agreed with SpikeZ about the target=blank but leaving it in for now
  <ul>
    <li><a href="http://galcorint001/OmManuals/BearLane/default.htm" target="_blank">BEAR LANE</a></li>
    <li><a href="http://galcorint001/OmManuals/Bonfire%20Hill/default.htm" target="_blank">BONFIRE HILL</a></li>
    <li><a href="http://galcorint001/OmManuals/CheshireSt/default.htm" target="_blank">CHESHIRE STREET</a></li>
    <li><a href="http://galcorint001/OmManuals/ClaphamRoad/default.htm" target="_blank">CLAPHAM ROAD</a></li>
    <li><a href="" target="_blank">CLOWELL HOUSE</a></li>
    <li><a href="http://galcorint001/OmManuals/Drayton/default.htm" target="_blank">DRAYTON PARK</a></li>
    <li><a href="http://galcorint001/OmManuals/GreenwichCommercialNew/default.htm" target="_blank">GREENWICH COMMERCIAL</a></li>
    <li><a href="http://galcorint001/OmManuals/GreenwichReach-Mothballed/default.htm" target="_blank">GREENWICH REACH - MOTHBALLED</a></li>
<li><a href="http://galcorint001/OmManuals/GreenwichReach%20Commercial%20Block%20E/default.htm" target="_blank">GREENWICH REACH COMMERCIAL BLOCK E</a></li>
...etc
</ul>
</div>

Now if your list were actually under two topics, you’d use 2 lists:


<div id="cocontent">
  <h2>O &amp; M MANUALS</h2> 
  <h3>CONTRACT LIST</h3>
  <ul>
    <li><a href="#">blah</a></li>
    ...
  [b]</ul>
  <h3>OTHER LIST</h3>
  <ul>[/b]
    <li><a href="#">blah</a></li>
    ...
  </ul>
</div>

And if you needed to have a sublist in a list


<div id="cocontent">
  <h2>O &amp; M MANUALS</h2>
  <h3>CONTRACT LIST</h3>
  <ul>
    <li><a href="">blah</a></li>
    ...
     <li>[b]<h4>SUBLIST HEADING!</h4>
       <ul>
          <li><a href="">blah</a></li>
          <li><a href="">blah</a></li>
          <li><a href="">blah</a></li>
          <li><a href="">blah</a></li>
          <li><a href="">blah</a></li>
        </ul>
    </li>[/b]
  </ul>
</div>

That’s the way to use headings, and when you have a lot of headings, it’s time to look at your content again later with fresh eyes and look at how to remove some of them. Headings work best when there aren’t so darn many of them. They just give titles/names to groups of related content, to aid in readability and stuff.

You can use CSS styles to make the anchors in your list look like headings, by making them bold and whatever. But I would only use headings if they have some regular content underneath that they can “head”.