473,320 Members | 1,744 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Can't remove spacing between <li> items in IE6

JB
Hi All,

This is doing my head in! Please help.

I've built a simple <ul> to serve as a menu for a page I'm working on. I
have tested the menu in Mozilla Fireworks 1.5 and it's fine - nice and
compact with no extra spacing - but in Microsoft Internet Explorer 6 there
are huge gaps between each list item.

URL :http://217.154.67.191/left_menu.htm

It's got to be a simple thing I'm missing so please point it out to me.

Many thanks,

JB
Jan 13 '06 #1
24 3027
Els
JB wrote:
This is doing my head in! Please help.

I've built a simple <ul> to serve as a menu for a page I'm working on. I
have tested the menu in Mozilla Fireworks 1.5 and it's fine - nice and
compact with no extra spacing - but in Microsoft Internet Explorer 6 there
are huge gaps between each list item.

URL :http://217.154.67.191/left_menu.htm

It's got to be a simple thing I'm missing so please point it out to me.


There are no gaps. When hovering, the blue backgrounds aren't
separated from each other. I think you have to look at the line-height
on the a element.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Jan 13 '06 #2
JB

"Els" <el*********@tiscali.nl> wrote in message
news:8y***************************@40tude.net...
JB wrote:
This is doing my head in! Please help.

I've built a simple <ul> to serve as a menu for a page I'm working on. I
have tested the menu in Mozilla Fireworks 1.5 and it's fine - nice and
compact with no extra spacing - but in Microsoft Internet Explorer 6
there
are huge gaps between each list item.

URL :http://217.154.67.191/left_menu.htm

It's got to be a simple thing I'm missing so please point it out to me.


There are no gaps. When hovering, the blue backgrounds aren't
separated from each other. I think you have to look at the line-height
on the a element.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -


Thanks for that Els but apparently this is a documented issue:
http://www.hicksdesign.co.uk/journal/ie-whitespace-bug

None of the solutions there worked but I eventually found a fix by hiding a
couple of commands from all browsers except IE by putting an underscore
before them.

#navigationContainer ul {
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size:0.6em;
padding-bottom:8px;
_float:left;
_clear:both;
}

Not ideal but it works!

JB
Jan 13 '06 #3
On Fri, 13 Jan 2006, JB wrote:
font-size:0.6em;
Ouch!
Not ideal but it works!


"For very small values of the term 'works'."

Jan 13 '06 #4
JB
New problem in Firefox. Tell me why there is a large left margin when margin
is set to 0 and there are no instance of huge amounts of padding.

http://217.154.67.191/left_menu.htm

Thanks,

Jeff
Jan 13 '06 #5
JB

"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote in message
news:Pi*******************************@ppepc56.ph. gla.ac.uk...
On Fri, 13 Jan 2006, JB wrote:
font-size:0.6em;


Ouch!
Not ideal but it works!


"For very small values of the term 'works'."


0.6em is bad is it?

I've changed it to x-small.

Thanks,

JB
Jan 13 '06 #6
JB wrote:
New problem in Firefox. Tell me why there is a large left margin when margin
is set to 0 and there are no instance of huge amounts of padding.

http://217.154.67.191/left_menu.htm

Thanks,

Jeff


changing the padding on navigationContainer ul to

padding: 0 0 8px 0;

fixes it. Not sure where it got the larger left padding from though.

Jan 13 '06 #7
JB wrote:
"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote in message
news:Pi*******************************@ppepc56.ph. gla.ac.uk...
On Fri, 13 Jan 2006, JB wrote:
font-size:0.6em;


Ouch!
Not ideal but it works!


"For very small values of the term 'works'."


0.6em is bad is it?

I've changed it to x-small.


Just as bad. Use: font-size: 100%;
so most people can read it, and in doing so you respect their chosen
default size.

BTW, the comment tags in your style sheet need to be removed.
The <!-- and the -->. There can't be any HTML in a style sheet.

When you are ready:
http://jigsaw.w3.org/css-validator/validator-uri.html

--
-bts
-Warning: I brake for lawn deer
Jan 13 '06 #8
JB
> changing the padding on navigationContainer ul to

padding: 0 0 8px 0;

fixes it. Not sure where it got the larger left padding from though.


Thanks for that. All sorted in Firefox but the problem has transferred to
IE6! I now have the list starting from the center of the page!

Help!

Jeff
Jan 13 '06 #9
On Fri, 13 Jan 2006, JB wrote:
changing the padding on navigationContainer ul to

padding: 0 0 8px 0;

fixes it. Not sure where it got the larger left padding from though.


Thanks for that. All sorted in Firefox but the problem has
transferred to IE6! I now have the list starting from the center of
the page!


You know, this isn't a write-only newsgroup: most of the simple issues
have been discussed before and solutions presented, and can be
consulted in newsgroup archives such as google groups.

The fact is that different browsers have different in-built default
styles for formatting list items, even though the final results look
similar.

As a starting point, if one it trying to apply one's own style to list
items, it's necessary to specify at least the following properties
explicitly: left margin and left padding for ul and li (and for ol, of
course, if you're using that).

This doesn't seem to be the case yet for your posted sample URL
http://217.154.67.191/left_menu.htm

I haven't seen any reason yet (or justification for) using CSS
constructs which fail at the W3C CSS checker. Sometimes, such syntax
trickery can solve an otherwise insoluble browser defect - but at
least get all the other things right *first* before deciding whether
to go for that "last resort".

Don't overlook the diagnostic technique of defining distinctive
visible borders on different elements, to help to understand how
various browsers are interpreting your CSS.

As for text sizing, I recommend
http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html

Jan 13 '06 #10
Els
JB wrote:
"Els" <el*********@tiscali.nl> wrote in message
news:8y***************************@40tude.net...
JB wrote:
I've built a simple <ul> to serve as a menu for a page I'm working
on. I have tested the menu in Mozilla Fireworks 1.5 and it's fine
- nice and compact with no extra spacing - but in Microsoft
Internet Explorer 6 there are huge gaps between each list item.

URL :http://217.154.67.191/left_menu.htm

It's got to be a simple thing I'm missing so please point it out
to me.
There are no gaps. When hovering, the blue backgrounds aren't
separated from each other. I think you have to look at the line-height
on the a element.


Thanks for that Els but apparently this is a documented issue:
http://www.hicksdesign.co.uk/journal/ie-whitespace-bug


I wonder why I don't have that bug in my menu, while I don't recall
any special measures, I did use display:block;, and I didn't eliminate
the whitespace/carriagereturns between the <li> elements.

Hmm.. after having fiddled with your page (see below), I think it
might be because I always float my menus, and therefore eliminate the
bug without noticing :-)
None of the solutions there worked
but I eventually found a fix by hiding a
couple of commands from all browsers except IE by putting an underscore
before them.


I think you're making your code far more complicated than necessary.
Just take out the clear property, put the float:left; (without
underscore) on the #navigationContainer (I'm guessing you wanted to
float it left anyway, as navigations usually are used alongside
content).
Put the font-size on the #navigationContainer instead of on the <ul>.

In the mean time I see you resorted to writing the <li> elements back
to back.
To make it easier to read, you could write it thus:
<li class="heading">Products &amp; Services</li><
li><a href="office.htm">Office System</a></li><
li><a href="office.htm">Windows XP</a></li><
li><a href="office.htm">Servers</a></li><
li><a href="office.htm">Developer Tools</a></li>

Nevertheless, with above changes you don't need to write them back to
back, as you can see here:
http://here.locusmeus.com/temp/jb.html
By setting the width of the <a> element to 100%, the block is
clickable outside the text in IE as well. All you need to do now, is
set a width to the left-floated #navigationContainer, to restrict the
width in IE, as IE doesn't 'shrink-wrap' like Opera and FF when
floating stuff. I recommend a width of 16em :-)

Last but not least: why are you using a transitional doctype? Are you
planning on leaving any old deprecated code in it? Personally, I'd use
Strict.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Jan 13 '06 #11
JB wrote:
Hi All,

This is doing my head in! Please help.

I've built a simple <ul> to serve as a menu for a page I'm working on. I
have tested the menu in Mozilla Fireworks 1.5 and it's fine - nice and
compact with no extra spacing - but in Microsoft Internet Explorer 6 there
are huge gaps between each list item.

URL :http://217.154.67.191/left_menu.htm

It's got to be a simple thing I'm missing so please point it out to me.

Many thanks,

JB


In addition to all the other stuff, you have a lingering outline on the
links after they are clicked. To prevent this you can change the link
code thusly:

<li><a onfocus="if(this.blur)this.blur();" href="test.htm">Servers</a></li>

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Jan 13 '06 #12
Ed Mullen wrote:
JB wrote:
Hi All,

This is doing my head in! Please help.

I've built a simple <ul> to serve as a menu for a page I'm working on.
I have tested the menu in Mozilla Fireworks 1.5 and it's fine - nice
and compact with no extra spacing - but in Microsoft Internet Explorer
6 there are huge gaps between each list item.

URL :http://217.154.67.191/left_menu.htm

It's got to be a simple thing I'm missing so please point it out to me.

Many thanks,

JB


In addition to all the other stuff, you have a lingering outline on the
links after they are clicked. To prevent this you can change the link
code thusly:

<li><a onfocus="if(this.blur)this.blur();" href="test.htm">Servers</a></li>


Should have also mentioned that this happens in SeaMonkey 1.0 Beta and
Firefox 1.5. Screen shot: http://edmullen.net/temp/cap200.jpg

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Jan 13 '06 #13
Ed Mullen <ed@edmullen.net> writes:
In addition to all the other stuff, you have a lingering outline on
the links after they are clicked. To prevent this you can change the
link code thusly:

<li><a onfocus="if(this.blur)this.blur();" href="test.htm">Servers</a></li>


Out of interest, what happens if you use the keyboard to tab to the
links when this is being done?

--
Chris
Jan 13 '06 #14
Chris Morris wrote:
Ed Mullen <ed@edmullen.net> writes:
In addition to all the other stuff, you have a lingering outline on
the links after they are clicked. To prevent this you can change the
link code thusly:

<li><a onfocus="if(this.blur)this.blur();" href="test.htm">Servers</a></li>


Out of interest, what happens if you use the keyboard to tab to the
links when this is being done?


If only one of the links has the onfocus code then tabbing to links will
fail at that link. Example at: http://edmullen.net/temp/test.html.
The "Servers" link is the only one with that code in it. This only
happens in FF and SM, not IE.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Jan 13 '06 #15
Ed Mullen <ed@edmullen.net> wrote:
In addition to all the other stuff, you have a lingering outline on the
links after they are clicked.
The issue was spacing, not outline (which does not affect spacing).
To prevent this
Why would you prevent the usability feature (which exists on some browsers -
IE, maybe others)?
you can change the link code thusly:

<li><a onfocus="if(this.blur)this.blur();" href="test.htm">Servers</a></li>


As a proposed solution to a problem that was not asked and that is not a
problem but a useful feature, your suggestion is destructive. When
"successful", it prevents focusing on the link.

If you feel compelled to remove the usability feature, using the IE-specific
hidefocus attribute would remove this currently (mostly?) IE-specific
behavior without doing other damage.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jan 14 '06 #16
Jukka K. Korpela wrote:
Ed Mullen <ed@edmullen.net> wrote:
In addition to all the other stuff, you have a lingering outline on the
links after they are clicked.
The issue was spacing, not outline (which does not affect spacing).


So, if someone asked for help because his house was on fire you wouldn't
mention that his pants were also burning?
To prevent this
Why would you prevent the usability feature (which exists on some browsers -
IE, maybe others)?


See below.
you can change the link code thusly:

<li><a onfocus="if(this.blur)this.blur();" href="test.htm">Servers</a></li>
As a proposed solution to a problem that was not asked and that is not a
problem but a useful feature, your suggestion is destructive. When
"successful", it prevents focusing on the link.


I think you missed the point. If you looked at the test cases I posted
you'll see that the colored highlight/focus works fine as you mouseover
the links /including/ the one with the "fix" I offered. It isn't
destructive of the outline function although, admittedly, it does
interfere with tabbing from link to link. It's when you click a link,
and then return to the source page, that a dotted outline remains around
the last selected link. You may like that or consider it useful but as
a user I, personally, find it incredibly annoying.

If you feel compelled to remove the usability feature, using the IE-specific
hidefocus attribute would remove this currently (mostly?) IE-specific
behavior without doing other damage.


You obviously didn't carefully read what I wrote. As I noted subsequent
to my original post, this is an issue NOT on IE but on Mozilla-based
browsers, specifically Firefox, the Mozilla Suite, and SeaMonkey. It
most likely also is an issue for Netscape 7.2 since it's based on the
Mozilla Suite (1.2 if my memory serves me correctly).

http://edmullen.net/temp/test.html

Cheers.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Jan 14 '06 #17
Ed Mullen <ed@edmullen.net> wrote:
So, if someone asked for help because his house was on fire you wouldn't
mention that his pants were also burning?
You suggested that he set his pants into fire.
It's when you click a link,
and then return to the source page, that a dotted outline remains around
the last selected link.


You defined that as a problem and then suggested a "fix" that creates a
problem where none existed. You apparently didn't even test how it affects
navigation.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jan 14 '06 #18
Ed Mullen wrote:
Jukka K. Korpela wrote:
Ed Mullen <ed@edmullen.net> wrote:
In addition to all the other stuff, you have a lingering outline on the
links after they are clicked.
The issue was spacing, not outline (which does not affect spacing).


So, if someone asked for help because his house was on fire you wouldn't
mention that his pants were also burning?


Seems to me you just set fire to the garage, too.
If you looked at the test cases I posted
you'll see that the colored highlight/focus works fine as you mouseover
the links /including/ the one with the "fix" I offered. It isn't
destructive of the outline function although, admittedly, it does
interfere with tabbing from link to link.
I'm confused why you think this isn't "destructive" behavior. Obviously,
you aren't a keyboard user. If you were, it is unlikely you would have
suggested removing the focus outline.
It's when you click a link,
and then return to the source page, that a dotted outline remains around
the last selected link. You may like that or consider it useful but as
a user I, personally, find it incredibly annoying.
As a user I, personally, find this an incredibly useful feature. The
browser makers must have thought so too, otherwise they probably
wouldn't have implemented such a thing.
As I noted subsequent
to my original post, this is an issue NOT on IE but on Mozilla-based
browsers, specifically Firefox, the Mozilla Suite, and SeaMonkey.
The only issue is in your mind. If you don't like the way gecko browsers
behave, then don't use them. Don't use it as an excuse to degrade the
usability of a page for other people.
http://edmullen.net/temp/test.html


You have just created a big accessibility barrier for a lot of keyboard
users. Thanks a lot, mate. :-\

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jan 14 '06 #19
Jukka K. Korpela wrote:
Ed Mullen <ed@edmullen.net> wrote:
So, if someone asked for help because his house was on fire you wouldn't
mention that his pants were also burning?


You suggested that he set his pants into fire.
It's when you click a link,
and then return to the source page, that a dotted outline remains around
the last selected link.


You defined that as a problem and then suggested a "fix" that creates a
problem where none existed. You apparently didn't even test how it affects
navigation.

And this is responsive exactly how? You know what, never mind. You
like to hear yourself talk and ignore factual point-by-point exchanges.
fine. Whatever. go amuse yourself or speak to what I wrote. Sigh.
What a waste of bandwidth.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Jan 15 '06 #20
kchayka wrote:
Ed Mullen wrote:
Jukka K. Korpela wrote:
Ed Mullen <ed@edmullen.net> wrote:

In addition to all the other stuff, you have a lingering outline on the
links after they are clicked.
The issue was spacing, not outline (which does not affect spacing).

So, if someone asked for help because his house was on fire you wouldn't
mention that his pants were also burning?


Seems to me you just set fire to the garage, too.
If you looked at the test cases I posted
you'll see that the colored highlight/focus works fine as you mouseover
the links /including/ the one with the "fix" I offered. It isn't
destructive of the outline function although, admittedly, it does
interfere with tabbing from link to link.


I'm confused why you think this isn't "destructive" behavior. Obviously,
you aren't a keyboard user. If you were, it is unlikely you would have
suggested removing the focus outline.
It's when you click a link,
and then return to the source page, that a dotted outline remains around
the last selected link. You may like that or consider it useful but as
a user I, personally, find it incredibly annoying.


As a user I, personally, find this an incredibly useful feature. The
browser makers must have thought so too, otherwise they probably
wouldn't have implemented such a thing.
As I noted subsequent
to my original post, this is an issue NOT on IE but on Mozilla-based
browsers, specifically Firefox, the Mozilla Suite, and SeaMonkey.


The only issue is in your mind. If you don't like the way gecko browsers
behave, then don't use them. Don't use it as an excuse to degrade the
usability of a page for other people.
http://edmullen.net/temp/test.html


You have just created a big accessibility barrier for a lot of keyboard
users. Thanks a lot, mate. :-\


Do you have a statistical analysis of how many Web users tab between
links on a Web page using the keyboard? Mate.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Jan 15 '06 #21
Ed Mullen wrote:
Do you have a statistical analysis of how many Web users tab between
links on a Web page using the keyboard? Mate.


<waves/>

No, I don't have a real analysis, but I will venture that experienced
users, power users, do use the tab key. My wife (not a power user) uses
the tab key. It is practical to do so on pages with just a few links.

Don't ask in an AOL forum. "Huh? Tab?"

--
-bts
-Warning: I brake for lawn deer
Jan 15 '06 #22
Beauregard T. Shagnasty wrote:
Ed Mullen wrote:
Do you have a statistical analysis of how many Web users tab between
links on a Web page using the keyboard? Mate.


<waves/>

No, I don't have a real analysis, but I will venture that experienced
users, power users, do use the tab key. My wife (not a power user) uses
the tab key. It is practical to do so on pages with just a few links.

Don't ask in an AOL forum. "Huh? Tab?"


Even given declining fortunes and demographics, that's my point. AOL
users, and AOL-type users, meaning "consumers" don't even know you can
TAB or use the keyboard to navigate.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Jan 15 '06 #23
Ed Mullen <ed@edmullen.net> wrote:
AOL
users, and AOL-type users, meaning "consumers" don't even know you can
TAB or use the keyboard to navigate.


You seem to have decided to make your contribution to keeping people,
including yourself, as ignorant as possible. You have clearly failed to see
the drawbacks of your proposed non-solution to a non-problem, and now you are
babbling about off-topic issues that are basic accessibility and usability
issues (which you apparently know nothing about).

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jan 15 '06 #24
Ed Mullen wrote:

AOL-type users, meaning "consumers" don't even know you can
TAB or use the keyboard to navigate.


Yeah, sure. Substitute "change the default text size" for tabbing and
this discussion has been done ad nauseam.

You are merely rationalizing your use of a bad practice. Rationalizing
it doesn't make it right.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jan 15 '06 #25

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Kelvin | last post by:
Basically, my texts consists of normal text stream and some quotations. This is my text stream, and inside "this streams" there are some "quotation pairs" which are to be replaced like this:...
8
by: Michael | last post by:
This is a two-part question to which I haven't been able to find an answer anywhere else. 1. Is it possible to format the bullet/number character of the <li>? In my styles sheet, I have the <li>...
5
by: toylet | last post by:
Attached is some css codes for a website. It has 3 parts: top-bar, side-bar (on the left) and main-body. The top-bar has a mouseover menu called top-menu implemented via ul:hover. When the mouse...
3
by: abro | last post by:
Problem: A list contained in a div contains several items that are made of two parts: itemName and itemValue. ie: <div id="data"> <li>longtime1 <span> 1326 mins></span></li> <li>longtime2...
11
by: A.Translator | last post by:
On this page http://www.xs4all.nl/~hogen/MvK_nieuw/ I have a horizontal menu made up of an ul (bit scary, this, feel much more comfortable with a table there, but I keep reading I should use css...
5
by: Joakim Braun | last post by:
I'd like to show tree structures using collapsible multi-level nested <ul> lists (with open/closed "disclosure triangles" as list-style-images). Something like this: <ul> <li...
2
by: Shaun | last post by:
Hello! I have a quick question regarding CSS and having it applied to all elements. I am trying to eliminate the gap between a paragraph and a list that usually occurs in html and I've found...
2
by: Andrew Donaldson | last post by:
I'd welcome some help in understanding what's going on with graphical browsers in the navigation list at: http://www.bounceandtickle.org.uk/index.html (This site is not about what it might...
9
by: eros | last post by:
<li>List <ul> <li>List1</li> <li>List2</li> <li>List3</li> </ul> </li> How to call the php code from that html tags... when I click List1?
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.