By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,645 Members | 1,226 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,645 IT Pros & Developers. It's quick & easy.

Help taming lists needed

P: n/a
Howdy all,

After following a tutorial on ALA (taming lists) I converted my
navigation box from a table to a list. Generally very happy with it with
the exception of IE6 on the Win platform (haven't tested earlier
versions of IE on Win)

On IE6 for Win the <li>'s are spaced apart vertically, almost looks as
though there is an additional blank line between each one.
URL is: http:www.slidenight.com
Screenshots (Mac - how it should be):
http://www.slidenight.com/temp/iemac.jpg
http://www.slidenight.com/temp/moz1.4.jpg
http://www.slidenight.com/temp/camino07.jpg
http://www.slidenight.com/temp/mozfirebird.jpg
http://www.slidenight.com/temp/safari.jpg

the navigation box comes from an include:
http://www.slidenight.com/includes/navbox.php

stylesheet is at:
http://www.slidenight.com/styles/layout1.css

Any help in getting it right for IE6 win (and lower versions if the same
problem exists) would be much appreciated.

Cheers

Jon

Jul 20 '05 #1
Share this Question
Share on Google+
9 Replies


P: n/a
lists(nospam)at wrote:
Howdy all,

After following a tutorial on ALA (taming lists) I converted my
navigation box from a table to a list. Generally very happy with it with
the exception of IE6 on the Win platform (haven't tested earlier
versions of IE on Win)

On IE6 for Win the <li>'s are spaced apart vertically, almost looks as
though there is an additional blank line between each one.
URL is: http:www.slidenight.com
Screenshots (Mac - how it should be):
http://www.slidenight.com/temp/iemac.jpg
http://www.slidenight.com/temp/moz1.4.jpg
http://www.slidenight.com/temp/camino07.jpg
http://www.slidenight.com/temp/mozfirebird.jpg
http://www.slidenight.com/temp/safari.jpg

the navigation box comes from an include:
http://www.slidenight.com/includes/navbox.php

stylesheet is at:
http://www.slidenight.com/styles/layout1.css

Any help in getting it right for IE6 win (and lower versions if the same
problem exists) would be much appreciated.

Cheers

Jon

Remove all the spaces between </li> and <li> also line-breaks. You code
will look horrible, but it will work.

If you don't want this, you will have to use a border-bottom.

--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #2

P: n/a
In article <bp**********@reader11.wxs.nl>,
Anne van Kesteren <ma**@annevankesteren.nl> wrote:
Remove all the spaces between </li> and <li> also line-breaks. You code
will look horrible, but it will work.


This may also work, but will look less horrible:

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

--
Kris
kr*******@xs4all.netherlands (nl)
Jul 20 '05 #3

P: n/a
Kris wrote:
This may also work, but will look less horrible:

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


Or use the proper way to get rid of white space:

<ul><!--
--><li>item</li><!--
--><li>item</li><!--
--><li>item</li><!--
--></ul>

--
Spartanicus
Jul 20 '05 #4

P: n/a
Spartanicus <me@privacy.net> writes:
Kris wrote:
This may also work, but will look less horrible:
|| <ul><
|| li>item</li><

That's illegal, and I think even tagsoup manglers will get confused.
See also:

<http://www.w3.org/MarkUp/SGML/productions.html#prod14>
Or use the proper way to get rid of white space:
| <ul><!--
| --><li>item</li><!--

That's bloated for its own sake, and quite unnecessary.

<ul<li
item</li


will do.
--
| ) Eric Bednarz
-(
| ) http://bednarz.nl/
Jul 20 '05 #5

P: n/a
lists(nospam)at wrote:

After following a tutorial on ALA (taming lists) I converted my
navigation box from a table to a list. Generally very happy with it with
the exception of IE6 on the Win platform (haven't tested earlier
versions of IE on Win)

On IE6 for Win the <li>'s are spaced apart vertically, almost looks as
though there is an additional blank line between each one.


Sounds like a box model problem.

The width of the a element, whose display you've set to "block," is
auto by default. But IE/Win screws up width: auto, inserting an extra
line. Thus, you need to set the width to 100%. That will cause the a
elements to stick out on browsers that get the box model correct.
Thus, override it using the child selector, which you already have.

html>body #navbox li a {
width: auto;
}

BTW, please get rid of the css instructions that call for micro fonts.
I have already chosen a font-size that works for me, thank you. And
never use px for font size, as IE/Win does not allow users to resize
the text.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #6

P: n/a
It seems to me that the CSS and HTML can be simplified and achieve the
desired effect by doing away with the list. As is, the CSS turns off
the list style and the anchor becomes a block element, so I don't see
the purpose served by using "ul" and "li" tags.

Instead, put the anchors inside of "divs". Or just use anchors with
"br"s between.
Jul 20 '05 #7

P: n/a
Jeff Gutsell wrote:
It seems to me that the CSS and HTML can be simplified and achieve the
desired effect by doing away with the list. As is, the CSS turns off
the list style and the anchor becomes a block element, so I don't see
the purpose served by using "ul" and "li" tags.

Instead, put the anchors inside of "divs". Or just use anchors with
"br"s between.


I wonder why no one came up with that before. O wait, he forgot about
accessibility (and backwards-compatibility).

--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #8

P: n/a

"Jeff Gutsell" <je*********@fuse.net> wrote in message
news:27**************************@posting.google.c om...
I don't see
the purpose served by using "ul" and "li" tags.


I think the purpose is that those who must use a browser that won't execute
our lovely designs ought to see a nicely formatted list instead of a
meaningless formatless list of words.

By your thinking, h1 thru h6 and p are all the same too. I can format p's to
be 24pt and boldface and h1s to be 10pt and justified in a paragraph. To the
majority of viewers it wo=ill look ok, To those who require the text to be
marked for what it is so their browser can present it in a way it makes
sense, it will look stupid.

We use h1, p, ul and table for what they are because that's what they are
meant to do. Because that blind guy who happens along that site with his
speech browser might be the guy to make you rich if the site appeals to him.
Jul 20 '05 #9

P: n/a
(I got a server error when I tried to submit this before. Hope it
doesn't post twice.)
Thanks for the explanation. I certainly agree with supporting
accessibility conventions. My wife is blind and works in the field of
inclusion. I've seen firsthand the frustration of trying to use poorly
designed pages.\

Of course, HTML elements should be used for their intended,
fundamental purposes. I just hadn't thought that there are any
elements that really are natural fits for a table of contents. It
makes sense now that I think of it.
Jul 20 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.