Problems with Lists in IE

[millercj]

I've created a strict doctype page and therefore must make nested lists as follows:

 

<ul>
   <li></li>
   <li></li>
   <li></li>
       <ul>
           <li></li>
       </ul>
   </li>
</ul>

 

So i've implemented the example into my code and i thought all was well until i tested it in IE (surprise surprise).

 

When i look at it the third li which the second ul is nested in it shows on it's own line in IE but not firefox.

 

you can view it at http://stjohns.digiconmediagroup.com/aboutus/joel.php

 

I'm not sure how to get rid of it

 

 

 

[millercj]

Sorry, the example i gave was wrong...this is right

<ul>
   <li></li>
   <li></li>
   <li>
       <ul>
           <li></li>
       </ul>
   </li>
</ul>

 

[unsider]

Making a website for your local congregational church, or just a personal project?

 

Just curious 

[haku]

I'm looking at your page, but I don't see what it is you are talking about or where it is.

[eddierosenthal]

are you trying to indent a list within another list?

if so then you need to simply use the <ul>...</ul>

after an item is closed tagged.

so

<ul>

<li>...</li>

<li>...</li>  ( you did not close this one)

  <ul>

<li>...</li>

<li>...</li>

  </ul>

 

...

</ul>

 

 

[dbrimlow]

are you trying to indent a list within another list? if so then you need to simply use the <ul>...</ul>

after an item is closed tagged.

so

<ul>

<li>...</li>

<li>...</li>  ( you did not close this one)

  <ul>

<li>...</li>

<li>...</li>

  </ul>...

</ul>

 

Um ... no, he was right. The proper html 4 way to embed lists is to embed them within the parent level list item.

<ul>
<li>blah blah blah</li>
<li>blah blah blah   ( you SHOULD not close this one)
     <ul>
     <li>blah blah blah</li>
     <li>blah blah blah</li>
    </ul>
</li>
<li>blah blah blah</li>
</ul>

 

That said, the problem with the page is not the lists.

You are tripping every IE bug in the book ... HasLayout, the guillotine effect,

uncleared floats, DoubleMargin bug, box-model bug.

 

LOL. Don't you just LOVE IE?

 

You also have a serious case of "Divitus", and so much code in your markup and css, I can't begin to try to debug it.

 

You need to make life simpler. replace DIV containers wherever you can simple declare the class or id in a block level tag like: p,h1, h2, ul, ol, etc. ... change this:

 

<div id="trail">
<ul>
<li><a href="/"><strong>Home</strong></a></li>
<li><a href="/aboutus">About Us</a></li>
<li class="last">Rev. Joel Risser</li>
</ul>
</div><!--trail-->

to this:

<ul  id="trail">
<li><a href="/"><strong>Home</strong></a></li>
<li><a href="/aboutus">About Us</a></li>
<li class="last">Rev. Joel Risser</li>
</ul>

 

That just eliminated two whole lines of code.

 

Also, a "div" is just a markup html placeholder and NOT a logical tag. You can't just slap text into them without proper semantic logical tag containers: like: p, h1, h2, ul, ol, etc.

 

Spans are NOT html placeholders, the are used to embed a style within a span of text within a markup block tag like p, h1, li, etc.

 

The page is lousy with empty "divs" and paragraphs ... an accessibility/SEO nightmare, un-contained spans, uncleared floats.

 

All in all, the page would be better off if you had used old used table based layout, and transitional doctypes.

 

Because it has almost as much tag soup and page weight. It is a beautiful layout. But it uses div tags as if they were table cells.