19 replies [Last post]
xj22x
Offline
Regular
Atlanta, GA
Last seen: 16 years 10 weeks ago
Atlanta, GA
Joined: 2005-11-14
Posts: 13
Points: 0

ok, i know that SOMEONE must have had this problem before...i can't possibly be the only one on the entire internet...

i've looked high and low for the solution to this and cannot find it anywhere. so here's the deal:

i have a nested list that looks like this:

list
item
subitem
subsubitem
subsubitem
subsubitem
subitem
subsubitem
item
subitem
subsubitem
subsubitem
...etc...

basically, a nested list 4 deep, all semantically correct, XHTML compliant. the subnav is VERTICAL, not horizontal.

my problem is that below any item that has a subitem (basically any <li>something<ul><li>something</li></ul></li>) i get a stubborn space that refuses to go away in IE6 no matter what i try. it also appears as though this space compounds as the number of sublists within a level of lists increases (ie, in level 2, 4 items have sublists, and under the fourth item, the space is 4x the size of the the first item). this has been driving me crazy for almost 3 months now, and no one seems to be able to help me.

i'm 23, but i may be bald by next month from pulling out my hair. please help a youthful, naive (professional) programmer?

--edit: sorry, i forgot to mention that this is styled via CSS...i guess i assumed that since this was a CSS forum yall might take that as a given.

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 3 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

nested list whitespace in IE6

Sounds like they are not properly nested.

This is my big chance . . . yep, I blew it . . .

xj22x
Offline
Regular
Atlanta, GA
Last seen: 16 years 10 weeks ago
Atlanta, GA
Joined: 2005-11-14
Posts: 13
Points: 0

nested list whitespace in IE6

i assure you they are properly nested...my format is as follows (periods are for spacing):

<ul>
...<li>Category
......<ul>
.........<li>Brand
............<ul>
...............<li>SubCategory
..................<ul>
.....................<li>product1</li>
.....................<li>product2</li>
.....................<li>product3</li>
..................</ul>
...............</li>
............</ul>
..........</li>
.......</ul>
...</li>
</ul>

except with more products, subcategories, brands, and categories. making the list is not the problem.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

nested list whitespace in IE6

Hi

Without seeing a live example, I can say you are likely to be suffering from the collapsing margins issue.

You could try fixing the height of the li's and setting overflow to hidden.

We have 2 ways to go. Either post a live demo link, or put your code up, together with a zip file of any images. Make the page as simple as possible but still with the problem. Have the style inline rather than a link.

Otherwise we could be at this for days. With the code or a link, it will take a couple of minutes to spot and fix.

Trevor

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 3 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

nested list whitespace in IE6

Thats odd . . . I am not finding any spaces in this version. . . .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="
    text/xhtml; charset=us-ascii" />
    <title>
      Nested Lists
    </title>

<style type="text/css">
/*<![CDATA[*/

ul.first {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.second {
  list-style: none;
  margin: 0;
  padding: 0 10px;
}

ul.third {
  list-style: none;
  margin: 0;
  padding: 0 20px;
}

/*]]>*/
</style>
  </head>
  <body>
    <ul class="first">
      <li>item
        <ul class="second">
          <li>subitem
            <ul class="third">
              <li>subsubitem</li>
              <li>subsubitem</li>
              <li>subsubitem</li>
            </ul>
          </li>
          <li>subitem
            <ul class="third">
              <li>subsubitem</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>item
        <ul class="second">
          <li>subitem
            <ul class="third">
              <li>subsubitem</li>
              <li>subsubitem</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>etc.</li>
    </ul>
  </body>
</html>

This is my big chance . . . yep, I blew it . . .

xj22x
Offline
Regular
Atlanta, GA
Last seen: 16 years 10 weeks ago
Atlanta, GA
Joined: 2005-11-14
Posts: 13
Points: 0

nested list whitespace in IE6

fair enough, clevatreva...when i get home i will create a working demo page and post the link.

thanks for your quick responses.

xj22x
Offline
Regular
Atlanta, GA
Last seen: 16 years 10 weeks ago
Atlanta, GA
Joined: 2005-11-14
Posts: 13
Points: 0

got it

ok guys...here's the link to the test page

http://www.columbussupply.com/subnavtest.html

in FF it works the way it should...but in IE6 there are huge spaces (i duplicated lists to show the effect)

the list first goes down 1 level, then to the right 2 levels on some.

ideas?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

nested list whitespace in IE6

Hi

You have this before your doctype, which might not ought to be there:



I think becasue your text editor is saving in utf8 mode, not text mode.

Haven't has time to look at the code, got to go to work.

Trevor

xj22x
Offline
Regular
Atlanta, GA
Last seen: 16 years 10 weeks ago
Atlanta, GA
Joined: 2005-11-14
Posts: 13
Points: 0

nested list whitespace in IE6

ClevaTreva wrote:
Hi

You have this before your doctype, which might not ought to be there:



I think becasue your text editor is saving in utf8 mode, not text mode.

Haven't has time to look at the code, got to go to work.

Trevor

hey trevor-

i can't find the characters you're talking about, and utf8 mode is the only mode that would validate for me. do either of these contribute to the whitespace issue? did you see what i was talking about at least? thanks.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

nested list whitespace in IE6

Hi

Its the editor you are using to write your page code, NOT the character set for the page.

View the page in FF and view the source (Ctrl-U), you should see it.

When your editor is saving the code, it is embedding this code at the start.

It doesn't appear to be affecting your page, but it shouldn't be there.

Trevor

xj22x
Offline
Regular
Atlanta, GA
Last seen: 16 years 10 weeks ago
Atlanta, GA
Joined: 2005-11-14
Posts: 13
Points: 0

nested list whitespace in IE6

i looked in FF and still don't see any extra characters...i also don't use an editor (aside from vs.net), my pages are all dynamically created using base page classes in asp.net. the page would not validate with those extra characters in the beginning like that, and the page validates if you click "XHTML" at the bottom.

regardless, the issue at hand is the spaces produced by the subnav in IE6. if you have a chance, please take a look. thanks very much!

if you are searching the CSS, look for "#subnav." also, i have organized the subnav CSS by the elements in the list, like all the ULs are together, all the LIs are together, the LI As, etc etc. and very clearly commented.

thanks!

Jason

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

nested list whitespace in IE6

Hi

Try as I might, I cannot find the problem. Anyone else?

Trevor

xj22x
Offline
Regular
Atlanta, GA
Last seen: 16 years 10 weeks ago
Atlanta, GA
Joined: 2005-11-14
Posts: 13
Points: 0

nested list whitespace in IE6

ClevaTreva wrote:
Hi

Try as I might, I cannot find the problem. Anyone else?

thanks for trying...you saw what i was talking about, though, right?

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 3 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

nested list whitespace in IE6

I see it, and I am still looking for the cause. I thought I was close . . . actually had the gap closed, but I made so many experimental changes that I couldn't figure out which one made it close. . . . :?

This is my big chance . . . yep, I blew it . . .

xj22x
Offline
Regular
Atlanta, GA
Last seen: 16 years 10 weeks ago
Atlanta, GA
Joined: 2005-11-14
Posts: 13
Points: 0

nested list whitespace in IE6

thank you so so much for your efforts!! i am eagerly awaiting your fix!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

nested list whitespace in IE6

Not tested.

Do

a {zoom: 1;}

If that fixes the problem, it's a hasLayout issue in IE. I didn't see any block <a>s without a dimension, but I could easily have missed it. Either way, the test will give one more clue.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

xj22x
Offline
Regular
Atlanta, GA
Last seen: 16 years 10 weeks ago
Atlanta, GA
Joined: 2005-11-14
Posts: 13
Points: 0

nested list whitespace in IE6

tested....doesn't do anything Sad

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

nested list whitespace in IE6

xj22x wrote:
thanks for trying...you saw what i was talking about, though, right?

Indeed I did see it.

If you delete most of the code so only that side nav is there, so is the gap.

If you look at the first option, hover, a second set of options appear. Hover over the first one of those, and a slide out menu appears. Find THAT menu in the code. Delete all but the enclosing UL's, and the problem is still there. Delete the UL's and the problem disappears. My guess is that it is something to do with that UL's css therefore.

Trevor

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

nested list whitespace in IE6

Again, not tested.

A common problem in IE links and lists is the line-height. Try these mods.

#subnav li a, #subnav li a:visited { /*all links/first link */
		width: 128px;
		display : block;
		color : #444;
		text-decoration : none;
		background-color : #ff6a6a;
    padding-left: 4px;
    font-size: 12px;
    line-height: 1.5;
    }
cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

xj22x
Offline
Regular
Atlanta, GA
Last seen: 16 years 10 weeks ago
Atlanta, GA
Joined: 2005-11-14
Posts: 13
Points: 0

nested list whitespace in IE6

line height didn't work either...sooooo i resorted to a kludgy hack:

#subnav li li { /*second-level li */
		width:112px;
		margin-bottom:-2px;
		}

html>body #subnav li li {/*IE6 skips this */
		margin-bottom:1px;
	}

#subnav li li li { /*third-level li */
		width:125px;
		background:#111 url(../images/bg-subsubnav.gif);
		margin-bottom:1px;
		}

it seems to work, although it is not elegant. it validates, too, soooo i guess this is the solution? if you have a better one, i am all ears (eyes?)

thanks to everyone for your efforts