SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Unordered list

  1. #1
    SitePoint Enthusiast mslee's Avatar
    Join Date
    Dec 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unordered list

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

    Pls help


    here is the HTML
    HTML Code:
    <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
    Code:
    ul li {
    text-align: left;
    margin: 10px 500px;
    
    }
    Last edited by spikeZ; Feb 7, 2013 at 04:08. Reason: moved thread and added code tags

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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?
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Enthusiast mslee's Avatar
    Join Date
    Dec 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why cant you use h1-h6 inbetween <li> tags?

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

  4. #4
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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/Comple..._a_target_tag/ or
    http://jalada.co.uk/2011/02/10/why-y...e-instead.html for code tips and discussions.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

    Code:
    <div id="cocontent">
      <h2>O &amp; 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; in CSS
      <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:
    Code:
    <div id="cocontent">
      <h2>O &amp; M MANUALS</h2> 
      <h3>CONTRACT LIST</h3>
      <ul>
        <li><a href="#">blah</a></li>
        ...
      </ul>
      <h3>OTHER LIST</h3>
      <ul>
        <li><a href="#">blah</a></li>
        ...
      </ul>
    </div>
    And if you needed to have a sublist in a list
    Code:
    <div id="cocontent">
      <h2>O &amp; M MANUALS</h2>
      <h3>CONTRACT LIST</h3>
      <ul>
        <li><a href="">blah</a></li>
        ...
         <li><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>
      </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".


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •