Hi everyone, happy after holiday,
I have a CSS rollover flickering problem that not just occurs in IE
but all browsers.
The problem only happens when I have different images for link and
hover, and a background image for the #menu.
The problem has been there for a long time with other sites,
I would do a preload images on the body tag for the over state
images since as it is they seem to load for the first time when you
do a mouse over.
bob
Hi everyone, happy after holiday,
I have a CSS rollover flickering problem that not just occurs in IE
but all browsers.
The problem
tee,
you need a preloader (javascript) or better use css rollovers:
http://wellstyled.com/css-nopreload-rollovers.html
http://www.alistapart.com/articles/slidingdoors2/
and the flicker will disappear.
regards
Martin
**
The
G'day
I have a CSS rollover flickering problem that not just occurs in IE but
all browsers.
Two options I can think of:
1. Pre-load the hover images (using javascript)
2. Use a single background image with both states for each button
and shift the background-position on hover.
I prefer
Hello
IMHO i think Bob has a good idea. I usually use a method called Farner
image replacement,which works great in such cases.
I`ve put an example below. You need two graphics, one for the normal
state ( home.png ) and one for the hover state ( home-red.png).
html
head
title/title
Hi
Why not make the background image of the li the same as the hover. That
way it preloads itself?
E.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of tee
Sent: 27 December 2005 09:36
To: wsg@webstandardsgroup.org
Subject: [WSG] CSS Rollover Flicker
Hi
Thanks all for the pointers, I am trying the sliding doors method
now. For other sites, I may have to use javascript preloader as going
back to recreate images for menus can be quite a hassle.
tee
On Dec 27, 2005, at 1:48 AM, Bob Schwartz wrote:
I would do a preload images on the body tag
On Dec 27, 2005, at 3:03 AM, Web Man Walking wrote:
Hi
Why not make the background image of the li the same as the
hover. That
way it preloads itself?
E.
Hi mysterious E. Interesting approach! It seems to work and a real
quick fix.
I have tested on PC/Mac: Safari, FF, Netscape,
tee,
on Tuesday, December 27, 2005 at 13:03 wsg@webstandardsgroup.org wrote:
Hi mysterious E. Interesting approach! It seems to work and a real
quick fix.
I have tested on PC/Mac: Safari, FF, Netscape, Mozilla, iE and Opera.
Can you guys confirm?
http://gb.lotusseeds.com/menutest_2.html
Any good? Is the better version reliable enough?
- Original Message -
From: sam sherlock [EMAIL PROTECTED]
Sent: Tuesday, December 27, 2005 4:00 AM
I have just installed the web developer tool bar for internet explorer
Hello
Seems to work fine now in FF1.5. One thing, your About button still seems
to flicker, don't know if there is a problem or you just forgot to do that
one :-)
had wasted some 4 hours trying out one of the Stu
Nicholls' method (http://www.webreference.com/programming/
css_flicker/) and
This one will work if the a covers 100% of the li's area, otherwise
the li's background could shine through. But for this menu it's real
quick and simple fix.
Sorry, I neglected to mention that, I was thinking it, just not typing it.
That what you get when you come into the office to find your
On Dec 27, 2005, at 4:45 AM, Martin Heiden wrote:
This one will work if the a covers 100% of the li's area, otherwise
the li's background could shine through. But for this menu it's real
quick and simple fix.
Thanks Martin, I'll keep this in mind when fixing other sites. It
looks like I
On 12/26/05, Paula Petrik [EMAIL PROTECTED] wrote:
Well, the problem is solved--for the time being. It still does not work on Win98 with IE4, but I think that I have to draw the line. As Drew suggested, it was a rounding problem, but I did get a lot of practice writing if statement for the IE
Hi Martin, thought you might want to know, further browsers testing
shows that
#siteOption li a span {
position: absolute;
left: -1000px;
font-size: 1px;
}
causes entire menu disappears in Mac IE, because my site holds up
quite nicely in this browser with no single
A speculative thought: Would it be that the universal margin and
padding declaration get in the way because it has highest specificity?
* {margin: 0; padding: 0;}
I only started using it very recently in three sites but two of them
didn't require me to use extra classess for padding and
tee,
on Tuesday, December 27, 2005 at 18:19 wsg@webstandardsgroup.org wrote:
and this is the cure (without causing problem in PC' IEs):
#siteOption li a span {
text-indent: -16000px;
font-size: 1px;
}
http://gb.lotusseeds.com/macie.html
Vertical align, it really works ? Example:style#box{widht:200px;height:200px}#box span{float:left}#box img{vertical-align:middle}/stylediv id=box
spanSome text/spanimg src="">/divAny idea ?Thanks
Hello Tee,
You wrote:
Thanks all for the pointers, I am trying the sliding doors method
now. For other sites, I may have to use javascript preloader as
going back to recreate images for menus can be quite a hassle.
If that's the case, there's no need to use JS. Long ago, I had this problem
Hi all,
Just wondering if anyone's had any luck with using JUST the PNG
component of Dean Edwards' IE7 JavaScript? The full thing seems like
overkill, because that's the only feature I really need.
Alternatively, how does one go about getting alpha support for CSS
background images? Not having a
Joshua Street wrote:
Hi all,
Just wondering if anyone's had any luck with using JUST the PNG
component of Dean Edwards' IE7 JavaScript? The full thing seems like
overkill, because that's the only feature I really need.
Alternatively, how does one go about getting alpha support for CSS
Josh asked: Alternatively, how does one go about getting alpha support for CSS
background images? Not having a great deal of luck with this...I could not get alpha support for CSS background images to work in IE. I tried pngbehaviour.htc (
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html )
Joshua,
you wrote:
Just wondering if anyone's had any luck with using JUST the PNG
component of Dean Edwards' IE7 JavaScript?
Aaron Boodman published Sleight a good while back. It has reportedly
been adapted for background images by Drew McLellan:
Hmm, thanks. Should learn to RTF... website... or something :P
HOWEVER! When I do that, IE6 with XPSP2 gives me security warnings and
blocks it by default... then, it kills my typography (though
positioning and image replacement and backgrounds all stay okay)
whilst doing absolutely for PNG
Just tried with Sleight (which, incidentally, I'd read about before
but forgotten existed!) and got the same security warning from
IE6/XPSP2. =( Any suggestions welcome at this point! (Except for using
GIFs/indexed transparency :P)
On 12/28/05, Joshua Street [EMAIL PROTECTED] wrote:
Hmm,
I'm experiencing an issue with using negative margins that I've never
had before, and it's only occurring in IE. I basically have a div
container with a small padding added to it (.8em to be exact), and
inside of it I have a series of paragraphs. I wanted to add horizontal
rules between each
I have recently been re-evaluating my thinking on the subject of
designing semantic forms and the use of fieldsets has raised a few
questions for me. What I'd like to know is: at what point does it become
semantically correct to include a fieldset? (Presentational effects
aside) My first
G'day
I've setup a test case for the issues I'm having:
http://www.epiphanize.com/NegativeMarginsTest.htm
You'll notice both the hr and h1 separators work nicely in FF, and
only the h1 works in IE while the hr doesn't want to cooperate.
If the hr is only there for decorative purposes (i.e.
Thanks Bert,
I had a feeling someone was going to reply with that suggestion, and
you're right :) The whole test case I setup was merely to display the
point that the hr element was no cooperating with the negative margins.
I'm hoping more specifically for an explanation on why that is, not
Joshua Street wrote:
Hmm, thanks. Should learn to RTF... website... or something :P
HOWEVER! When I do that, IE6 with XPSP2 gives me security warnings and
blocks it by default... then, it kills my typography (though
positioning and image replacement and backgrounds all stay okay)
whilst doing
G'day
I had a feeling someone was going to reply with that suggestion, and
you're right :) The whole test case I setup was merely to display the
point that the hr element was no cooperating with the negative margins.
I'm hoping more specifically for an explanation on why that is, not on
how
31 matches
Mail list logo
