IE and a CSS bug
freemont
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?
--
"Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> freemont© <-·´¯`·.¸¸.·´¯
dorayme
freemont <freemont....@freemontsoffice.com> wrote:
> 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.
--
dorayme
freemont
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
freemont <freemont....@freemontsoffice.com> wrote:
> On Thu, 10 Jul 2008 08:51:20 +1000, dorayme writ:
>
> > In article <56c83$487537f4$a228e125$18...@ALLTEL.NET>,
> > freemont <freemont....@freemontsoffice.com> wrote:
> >
> >> http://cea8.org/
> >>
> >> The active menu items
> >
> > which are?
> >
>
> 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.
--
dorayme
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
freemont <freemont....@freemontsoffice.com> wrote:
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...)
--
dorayme
BootNic
freemont <freemont....@freemontsoffice.com> wrote in:
<56c83$487537f4$a228e125$18...@ALLTEL.NET>
> 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*
dorayme
freemont <freemont....@freemontsoffice.com> wrote:
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>
--
dorayme
GTalbot
wrote:
> On Thu, 10 Jul 2008 11:59:22 +1000, dorayme writ:
> 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
--
Internet Explorer 7 bugs (157 bugs so far)
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 8 bugs (130 bugs so far)
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
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.
Lars Eighner
<56c83$487537f4$a228e125$18...@ALLTEL.NET>,
the lovely and talented freemont
broadcast on alt.html:
> 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:
<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>.
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.
> 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?
--
Lars Eighner <http://larseighner.com/> use...@larseighner.com
War on Terrorism: Bad News from the Sanity Front
"In this autumn of anger, even a liberal can find his thoughts turning to ...
torture." --Jonathan Alter,_Newsweek_
Jonathan N. Little
> On Wed, 09 Jul 2008 23:49:19 -0400, BootNic writ:
>
>> 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.
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
freemont
> freemont wrote:
>> On Wed, 09 Jul 2008 23:49:19 -0400, BootNic writ:
>>
>>> 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. :-)
GTalbot
wrote:
> (...) 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
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. :-)
Lars Eighner
<3813a$48761732$4b5b4687$4...@ALLTEL.NET>,
broadcast on alt.html:
> On Thu, 10 Jul 2008 13:08:11 +0000, Lars Eighner writ:
>> 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. (?)
It is, but since when did Micro$oft play by the rules?
> Many, many thanks, Lars. :-)
--
Lars Eighner <http://larseighner.com/> use...@larseighner.com
I hate laundry month.