Why are my links spaced out in IE?

[Alan Silver]

Hello,

I have just been trying a CSS-based design that works as I expected in
FF and Opera, but has a problem with IE. If you look at my current
version at http://www.kidsinaction.org.uk/FredsBoots/Freds.html in FF or
Opera, the links in the left margin appear close together as expected.

If you look at the same page in IE, these links are quite spaced out,
with more vertical space between them than I want. Any idea why this is?
I guess that it is connected to the fact that I made the links
"display:bl ock" as I wanted the hover effect (change of colours) to
affect the full width of the margin, not just the width of the text in
the link.

Anyone any explanation of what is happening, and what I can do to fix
it. Please forgive any obvious blunders, I don't claim to be an expert
on this!!

TIA

--
Alan Silver
(anything added below this line is nothing to do with me)

[Beauregard T. Shagnasty]

Alan Silver wrote:

Hello,

I have just been trying a CSS-based design that works as I expected in
FF and Opera, but has a problem with IE. If you look at my current
version at http://www.kidsinaction.org.uk/FredsBoots/Freds.html in FF or
Opera, the links in the left margin appear close together as expected.

If you look at the same page in IE, these links are quite spaced out,
with more vertical space between them than I want. Any idea why this is?

IE works if you do this:

<ul>
<li><a href="">Workwea r</a></li><li><a
href="">Safety Boots</a></li><li><a
href="">Boilers uits</a></li><li><a
href="">Safety Jackets</a></li><li><a
href="">HiViz Vests</a></li><li><a
href="">Work Boots</a></li><li><a
href="">Jackets </a></li><li><a
href="">T-shirts</a></li><li><a
href="">Eye Protection</a></li><li><a
href="">Hard Hats</a></li>
</ul>

It sees the line feed at the end of the </li> as .. a line feed?
Bad browser, no donut.

Why are you creating new documents with a Transitional doctype? You
should be using Strict.

--
-bts
-Warning: I brake for lawn deer

[Alan Silver]

In article <ml************ *****@bgtnsc05-news.ops.worldn et.att.net>,
Beauregard T. Shagnasty <a.*********@ex ample.invalid> writes
<snip>

IE works if you do this: <snip>It sees the line feed at the end of the </li> as .. a line feed?
Bad browser, no donut.
Ah ha, that was it.

Life would be so dull without IE, don't you think? Imagine writing web
pages and having them look the same in all browsers right from the
start. What would we do with ourselves all day?

Anyway, removing the line feeds fixed the problem, but still leaves a
gap between these links. I have set a zero margin on both the <li> and
<a> elements, and FF and Opera do not leave any space between the links,
but IE still does. You can see this by moving your mouse from one link
to another and noting that there is a point in between where neither
link is in the hover state. In FF and Opera, you go directly from the
hover state of one link to the hover state of the next.

Any explanation?
Why are you creating new documents with a Transitional doctype? You
should be using Strict.

Oops, mistake. I knocked up that test on an old machine that had an
outdated template for HTML pages. I didn't notice the doctype. Thanks
for pointing it out.

Thanks very much for the help. Any answers to the supplementary would be
gratefully received too.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Beauregard T. Shagnasty]

Alan Silver wrote:

In article <ml************ *****@bgtnsc05-news.ops.worldn et.att.net>,
Beauregard T. Shagnasty <a.*********@ex ample.invalid> writes
<snip>

IE works if you do this: <snip>

It sees the line feed at the end of the </li> as .. a line feed? Bad
browser, no donut.

Ah ha, that was it.

Life would be so dull without IE, don't you think? Imagine writing
web pages and having them look the same in all browsers right from
the start. What would we do with ourselves all day?

Well, I would go for a motorcycle ride and find a good cheeseburger
somewhere down the road.
Anyway, removing the line feeds fixed the problem, but still leaves a
gap between these links. I have set a zero margin on both the <li>
and <a> elements, and FF and Opera do not leave any space between the
links, but IE still does.
Yes, there is a wee bit of gap in IE; however, I don't think it is
detrimental to the display of the page. My opinion, of course.
You can see this by moving your mouse from one link to another and
noting that there is a point in between where neither link is in the
hover state. In FF and Opera, you go directly from the hover state of
one link to the hover state of the next.
Why not style them to look like buttons instead? No change to anything
other than the CSS.

I would show you an example used at a site of mine, 'cept the damn
server is down today. [I will not mention the name of this affordable
server...]
Any explanation?

No, unless you've just changed the page since your post. It looks fine
to me in IE and the hover color change extends to the end of the block.

Why are you creating new documents with a Transitional doctype? You
should be using Strict.

Oops, mistake. I knocked up that test on an old machine that had an
outdated template for HTML pages. I didn't notice the doctype. Thanks
for pointing it out.

Welcome. <g>

--
-bts
-Warning: I brake for lawn deer

[Alan Silver]

In article <18************ *******@bgtnsc0 4-news.ops.worldn et.att.net>,
Beauregard T. Shagnasty <a.*********@ex ample.invalid> writes
<snip>

What would we do with ourselves all day?

Well, I would go for a motorcycle ride and find a good cheeseburger
somewhere down the road.

I'd go and tickle some of the children. Motorbikes frighten me (too old
I guess), and children are far more fun than sitting in front of a
computer!! Each to his own I guess.

Anyway, removing the line feeds fixed the problem, but still leaves a
gap between these links. I have set a zero margin on both the <li>
and <a> elements, and FF and Opera do not leave any space between the
links, but IE still does.

Yes, there is a wee bit of gap in IE; however, I don't think it is
detrimental to the display of the page. My opinion, of course.

No, not terrible, I just wondered what the reason was. However, you
confused me a bit. Here you agree there's a wee gap, but below, you say
there isn't. Not sure what you mean.

You can see this by moving your mouse from one link to another and
noting that there is a point in between where neither link is in the
hover state. In FF and Opera, you go directly from the hover state of
one link to the hover state of the next.

Why not style them to look like buttons instead? No change to anything
other than the CSS.

I would show you an example used at a site of mine, 'cept the damn
server is down today. [I will not mention the name of this affordable
server...]

Maybe you could post the URL when the server comes back. I would be
interested in seeing it.

Any explanation?

No, unless you've just changed the page since your post. It looks fine
to me in IE and the hover color change extends to the end of the block.

OK, here's where you confused me. Above you said you could see the gap
between the links, here you say you can't. Are we talking about the same
thing? I was referring to the links under the word "Categories " in the
left margin of http://www.kidsinaction.org.uk/FredsBoots/Freds.html. If
you move your mouse from (say) "Workwear" to "Safety Boots," there is a
small gap in between where you don't get the hover sate of either link
in IE, but you do in FF and Opera. As you said, it's not too much of a
problem here, but I can see other designs where it would spoil the
effect. I would be interested in knowing why IE does this (assuming that
there's areason why IE does anything of course!!)

Ta ra and thanks again.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Beauregard T. Shagnasty]

Alan Silver wrote:

Beauregard T. Shagnasty <a.*********@ex ample.invalid> writes
<snip>

What would we do with ourselves all day?
Well, I would go for a motorcycle ride and find a good cheeseburger
somewhere down the road.

I'd go and tickle some of the children. Motorbikes frighten me (too
old I guess),

Never too old. I'm a retired guy and I've been riding for 43 years.
and children are far more fun than sitting in front of
a computer!! Each to his own I guess.
We enjoy it when our grandbaby (not quite two) comes to visit. <g>

Yes, there is a wee bit of gap in IE; however, I don't think it is
detrimental to the display of the page. My opinion, of course.

No, not terrible, I just wondered what the reason was. However, you
confused me a bit. Here you agree there's a wee gap, but below, you
say there isn't. Not sure what you mean.

You can see this by moving your mouse from one link to another and
noting that there is a point in between where neither link is in
the hover state. In FF and Opera, you go directly from the hover
state of one link to the hover state of the next.

Why not style them to look like buttons instead? No change to
anything other than the CSS.

I would show you an example used at a site of mine, 'cept the damn
server is down today. [I will not mention the name of this
affordable server...]

Maybe you could post the URL when the server comes back. I would be
interested in seeing it.

I'll do that.
OK, here's where you confused me. Above you said you could see the
gap between the links, here you say you can't. Are we talking about
the same thing?
Most likely. What I meant was the really small space, that one actually
has to work at with the mouse pointer, isn't a big deal, or at least in
my opinion.
I was referring to the links under the word
"Categories " in the left margin of
...as was I.
http://www.kidsinaction.org.uk/FredsBoots/Freds.html. If you move
your mouse from (say) "Workwear" to "Safety Boots," there is a small
gap in between where you don't get the hover sate of either link in
IE, but you do in FF and Opera. As you said, it's not too much of a
problem here, but I can see other designs where it would spoil the
effect. I would be interested in knowing why IE does this (assuming
that there's areason why IE does anything of course!!)

Been playing with it for a bit, and I don't see what might be done to
remove the little vertical space. Maybe if someone else has been
following along...

--
-bts
-Warning: I brake for lawn deer

[Alan Silver]

In article <oP************ *****@bgtnsc05-news.ops.worldn et.att.net>,
Beauregard T. Shagnasty <a.*********@ex ample.invalid> writes

I'd go and tickle some of the children. Motorbikes frighten me (too
old I guess),
Never too old. I'm a retired guy and I've been riding for 43 years.

OK, you're older than me then!! Unless you were riding at a *very* young
age. Either way, they still scare the willies out of me!!

and children are far more fun than sitting in front of
a computer!! Each to his own I guess.

We enjoy it when our grandbaby (not quite two) comes to visit. <g>

We're still at the children stage, so you beat me again!!

<snip>

Maybe you could post the URL when the server comes back. I would be
interested in seeing it.

I'll do that.

Ta

<snip>Been playing with it for a bit, and I don't see what might be done to
remove the little vertical space. Maybe if someone else has been
following along...

Thanks anyway. Ta ra

--
Alan Silver
(anything added below this line is nothing to do with me)

[kchayka]

Alan Silver wrote:

http://www.kidsinaction.org.uk/FredsBoots/Freds.html in FF or
Opera, the links in the left margin appear close together as expected.

If you look at the same page in IE, these links are quite spaced out,
with more vertical space between them than I want.
Happens all the time. The work-around BTS gave is one way to do it.
Another is to add the zoom property to the link and/or list item rules
li {zoom: 1}
li a {zoom: 1}

Try it on one element first. If that doesn't give the desired result,
try it on the other.

If you want more info on the zoom property, search google.
Any idea why this is?

IE sucks? ;)

BTW, you have a logic error with your widths. Mixing em and % units
doesn't add up to any predictable value. Zoom text in Firefox up a
couple notches and/or make the browser window narrower and see where the
content ends up. If you use % for padding as well as widths, you get
more consistent results.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Neredbojias]

To further the education of mankind, Alan Silver <alan-
si****@nospam.t hanx.invalid> vouchsafed:

Anyway, removing the line feeds fixed the problem, but still leaves a
gap between these links. I have set a zero margin on both the <li> and
<a> elements, and FF and Opera do not leave any space between the links,
but IE still does. You can see this by moving your mouse from one link
to another and noting that there is a point in between where neither
link is in the hover state. In FF and Opera, you go directly from the
hover state of one link to the hover state of the next.

The gap itself might be an IE whitespace problem, but you can make the
vertical spacing the same by adding line-height:1.2 to #productlinks a {
}.

--
Neredbojias
Infinity has its limits.

[Alan Silver]

In article <4b************ *@individual.ne t>, kchayka <us****@c-net.us>
writes
<snip>

Thanks to both you and BTS for the ideas. I'll play with them.

Any idea why this is?
IE sucks? ;)

<g> I was meaning a more technical explanation!!
BTW, you have a logic error with your widths. Mixing em and % units
doesn't add up to any predictable value. Zoom text in Firefox up a
couple notches and/or make the browser window narrower and see where the
content ends up. If you use % for padding as well as widths, you get
more consistent results.

Thanks for pointing that out, I hadn't noticed that. I'll change them
all to % as that seems safer. I was assuming ems were a better bet as
they scale with the user's choice of font size, but I can see that this
will only be useful in certain circumstances. This obviously isn't one
of them!!

Thanks again

--
Alan Silver
(anything added below this line is nothing to do with me)