IE and a CSS bug

[freemont]

http://cea8.org/

The active menu items turn maroon on hover. In Opera, Firefox, and
Knoqueror it works fine. But then I check with IE7 and - believe it or
not! - there's a problem where a sliver of pink is still visible on the
right edge.

My brain is tired from putting this together and IE has chapped my
backside. Can anyone see an obvious way to "correct" this lawfully, or am
I to resort to a damned IE hack?

 

[dorayme]

http://cea8.org/

The active menu items

which are?

turn maroon on hover.

On my Safari and FF, the blue links on the left turn bright red on hover
and no active seems set. You can set active with a:active: #0c0

In Opera, Firefox, and
Knoqueror it works fine. But then I check with IE7 and - believe it or
not! - there's a problem where a sliver of pink is still visible on the
right edge.

My brain is tired from putting this together and IE has chapped my
backside. Can anyone see an obvious way to "correct" this lawfully, or am
I to resort to a damned IE hack?

Put a background color in (white I guess in your case) when you set a
colour, even for links.

 

[freemont]

which are?


On my Safari and FF, the blue links on the left turn bright red on hover
and no active seems set. You can set active with a:active: #0c0


Put a background color in (white I guess in your case) when you set a
colour, even for links.

Silly me, I thought it would be obvious from my description of a maroon
link with pink showing, that I was referring to the horizontal list of
links with a pink background across the top of the page, where on page
load, the Home link has a maroon background. ;-)

IE acts as though there is some extra padding-right on these <li>s or the
<a>s in them. For the life of me, I can't see what's causing it. Or
rather, I suspect that IE is causing it.

 

[dorayme]

Silly me, I thought it would be obvious from my description of a maroon
link with pink showing, that I was referring to the horizontal list of
links with a pink background across the top of the page, where on page
load, the Home link has a maroon background. ;-)

Sorry, I missed the maroon links but now see that what seemed to me
*black* text on pink is actually maroon on pink! On enlarging a bit. OK.
And I was guessing about IE 7 which I have not got right here. So, while
here, may I suggest to put line-height: 1.6 on your horiz list items or
make other provisions to stop the ugly overlaps that occur when the menu
items wrap on less wide browser widths.

 

[freemont]

Sorry, I missed the maroon links but now see that what seemed to me
*black* text on pink is actually maroon on pink! On enlarging a bit. OK.
And I was guessing about IE 7 which I have not got right here. So, while
here, may I suggest to put line-height: 1.6 on your horiz list items or
make other provisions to stop the ugly overlaps that occur when the menu
items wrap on less wide browser widths.

Thank you, that's helpful. I'd noticed the overlapping you speak of but I
put it on the back burner.

Meanwhile, the original problem remains. The condition I first posted
about exists in IE6 as well, but I've stopped coding for that browser. I
was a little surprised to see it duplicated in IE7 while at work today.

 

[dorayme]

Thank you, that's helpful. I'd noticed the overlapping you speak of but I
put it on the back burner.

Meanwhile, the original problem remains. The condition I first posted
about exists in IE6 as well, but I've stopped coding for that browser. I
was a little surprised to see it duplicated in IE7 while at work today.

Ah! In that case I am certain to be able to help you (Please Dear God,
let this be true and I don't have egg on my antennae). Let me turn on my
Win2000 box (how I hate it!). Just a minute and I will be back. First I
have to save in FF and USB stick it across (don't ask...)

(confession of another motive: just finished a site, client happy but I
have yet to find out what might need doing to it to cope with IE6... so
this is the time...)

 

[BootNic]

On Wed, 09 Jul 2008 22:13:08 +0000

http://cea8.org/

The active menu items turn maroon on hover. In Opera, Firefox, and
Knoqueror it works fine. But then I check with IE7 and - believe it
or not! - there's a problem where a sliver of pink is still visible
on the right edge.

My brain is tired from putting this together and IE has chapped my
backside. Can anyone see an obvious way to "correct" this lawfully,
or am I to resort to a damned IE hack?

Google up on IE hasLayout

Quick fix for the current source.

<!--[if IE]>
<style type="text/css">
#navigation ul * {
zoom:1;
}
</style>
<![endif]-->

--

BootNic Wed Jul 9, 2008 11:49 pm
A person without a sense of humor is like a wagon without springs,
jolted by every pebble in the road.
*Henry Ward Beecher*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.9 (GNU/Linux)

iEYEARECAAYFAkh1hsYACgkQylMUzZO6jeLyPACghvKETxreKS2zkJqzqWMD/Z9E
ECYAn1F3kVFacBVZpl6eOKwB6suXQ/yN
=MLwp
-----END PGP SIGNATURE-----

 

[dorayme]

Thank you, that's helpful. I'd noticed the overlapping you speak of but I
put it on the back burner.

Meanwhile, the original problem remains. The condition I first posted
about exists in IE6 as well, but I've stopped coding for that browser. I
was a little surprised to see it duplicated in IE7 while at work today.

OK, I had a look and I would tend to do this sort of thing rather than
your css:

<http://dorayme.890m.com/alt/justLinks.html>

Sorry for the delay! I was perplexed by some problems in IE6 on a
recently "completed" site I made... <g>

 

[freemont]

Sorry for the delay! I was perplexed by some problems in IE6 on a recently
"completed" site I made... <g>

I feel your pain. o-0

 

[freemont]

Google up on IE hasLayout

Quick fix for the current source.

<!--[if IE]>
<style type="text/css">
#navigation ul * {
zoom:1;
}
</style>
<![endif]-->

For now a quick fix will do. ;-) Thanks a bunch.

 

[GTalbot]

The condition I first posted
about exists in IE6 as well, but I've stopped coding for that browser.

Good decision.

I
was a little surprised to see it duplicated in IE7 while at work today.

I know about this bug. You styled list-item as inline element. And
those list-item have a nested inline (<a>...</a>) inside. IE 7 and IE
8 beta 1 will render a space inside unless there is no space
separating the list-item.

So, a good workaround for IE 7 and IE 8 beta 1 is to remove the blank
spaces between list-item, just like this:

<ul><li><a class="active" href="index.php">Home</a></li><li><a
href="#">About Us</a></li><li><a href="#">Services</a></li><li><a
href="#">Resources</a></li><li><a href="#">Professional Development</
a></li><li><a href="#">Conferences</a></li><li><a href="#">Contact</
a></li></ul>

Tested and working in IE 8 beta 1; also tested and working in IE 7
emulated mode.

It is a bug in IE 7 and IE 8 beta 1.

Regards, Gérard

 

[Lars Eighner]

In our last episode,
<[email protected]>,
the lovely and talented freemont
broadcast on alt.html:

http://cea8.org/

The active menu items turn maroon on hover. In Opera, Firefox, and
Knoqueror it works fine. But then I check with IE7 and - believe it or
not! - there's a problem where a sliver of pink is still visible on the
right edge.

At least some versions of IE have trouble with lists.

<ul>
<li><a somelink>Foo</a></li>
<li><a someotherlink>Bar</a></li>
</ul>

does not work properly with some styling because of white space (namely
the newline) after </li>. Also most other browsers will break some styles
if there is white space between </a> and </li>.

If you want to cater to IE make your lists like this:

<a somelink>Foo</a></li
<li><a someotherlink>Bar</a></li
</ul>

and be sure nothing, including line breaks comes between </a> and </li>.

Tidy and other pretty printers and checkers will "fix" markup like the
above, so you may need to devise an untidy filter to run after whatever
pretty printer or checker you use.

 

[Jonathan N. Little]

Google up on IE hasLayout

Quick fix for the current source.

<!--[if IE]>
<style type="text/css">
#navigation ul * {
zoom:1;
}
</style>
<![endif]-->

For now a quick fix will do. ;-) Thanks a bunch.

Small point, well not so small for we poor folk on dialup, don't use PNG
for your photos unless you really optimize. "atlanta_skyline_300.png" is
125KB but when converted to JPG is only 15KB and you cannot tell the
difference in quality.

 

[freemont]

Google up on IE hasLayout

Quick fix for the current source.

<!--[if IE]>
<style type="text/css">
#navigation ul * {
zoom:1;
}
</style>
<![endif]-->

For now a quick fix will do. ;-) Thanks a bunch.

Small point, well not so small for we poor folk on dialup, don't use PNG
for your photos unless you really optimize. "atlanta_skyline_300.png" is
125KB but when converted to JPG is only 15KB and you cannot tell the
difference in quality.

Yes, it's a good point, and I agree completely, however in my defense I
point out that this picture is merely a placeholder to show the bosses
where a picture can go. I doubt that pic will be on the finished site, in
either format.

Even so, I'll convert the bugger.

 

[freemont]

If you want to cater to IE make your lists like this:

<ul><li
<a somelink>Foo</a></li
<li><a someotherlink>Bar</a></li
</ul>

and be sure nothing, including line breaks comes between </a> and </li>.

You've *got* to be kidding me.

<tries it>

L I B. That "fixes" it, all right. Unbelievable, that browser. I thought
that html was supposed to /ignore/ whitespace. (?)

Many, many thanks, Lars.

 

[GTalbot]

(...) or am
I to resort to a damned IE hack?

I do not agree with a few decisions you make in your CSS code.

One that particularly caught my attention is this one:

#navigation {
margin:0 auto;
text-align:center;
}

If all list-items within #navigation are styled with display: inline,
then the #navigation should *only* use text-align:center;. There is no
need to center the #navigation div (with margin:0 auto within its
parent actually.

Regards, Gérard

 

[Lars Eighner]

In our last episode,
<[email protected]>,
the lovely and talented freemont
broadcast on alt.html:

You've *got* to be kidding me.

<tries it>

L I B. That "fixes" it, all right. Unbelievable, that browser. I thought
that html was supposed to /ignore/ whitespace. (?)

It is, but since when did Micro$oft play by the rules?