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 24 3027
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 -
"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
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'."
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
"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
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.
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
> 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
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
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 & 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 -
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
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
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
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
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/
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
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/
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.
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
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
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
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
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/
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. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
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:...
|
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>...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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?
|
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...
|
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...
|
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...
|
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...
|
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)...
|
by: Defcon1945 |
last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
|
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....
|
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
|
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...
| |