PDA

View Full Version : Image rollover Flicker in IE



niemie
Mar 15th, 2005, 05:27 PM
I'm randomly getting flicker on my rollovers in IE - when I check the page locally with IE there is no flicker but when I upload to the server and check the page online there is. I am not following the update section about flickering in the article (http://wellstyled.com/css-nopreload-rollovers.html) - I don't see the change.....any help is greatly appreciated.

Anyhow here is my code for reference if needed:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title Goes Here</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}

body {
margin:0;
padding:0;
background-color:#cccccc;
}

a img {
border-width:0;
}

#wrapper {
width: 700px;
height: 565px;
margin-left:auto;
margin-right:auto;
margin-top:5px;
border: 1px solid #808080;
background-color:#ffffff;
}

#sidebar {
width: 123px;
height: 565px;
float: left;
background-image:url(images/sidebar.jpg);
}

#content {
margin-left: 125px;
height: auto;
width:auto;
padding: 30px;
}

h1, h2 {
font:Arial, Helvetica, sans-serif;
font-size: 24px;
font-style:oblique;
color: #444444;
}

h2 {
margin-top:100px;
}

/* Begin W Boxes */
#b1w, #b2w, #b3w {
position:relative;
float:left;
height:35px;
width:35px;
border:1px solid;
border-color: #808080;
margin-top: 5px;
margin-right: 5px;
background-color:#ffffff;
}

#b1w {
background-image:url(images/brooke.gif);
}

#b2w {
background-image:url(images/lakeo.gif);
}

#b3w {
background-image:url(images/velagio.gif);
}


/* Begin C Boxes */
#b1c, #b2c, #b3c {
position:relative;
float:left;
height:35px;
width:35px;
border:1px solid;
border-color: #808080;
margin-top: 5px;
margin-right: 5px;
background-color:#ffffff;
}

#b1c {
background-image: url(images/liveit.gif);
}

</style>
<body>
<div id="wrapper">
<div id="sidebar"></div>
<div id="content">
<h1>W Header</h1>
<div id="b1w"></div>
<div id="b2w"></div>
<div id="b3w"></div>
<h2> C Header</h2>
<div id="b1c"></div>
<div id="b2c"></div>
<div id="b3c"></div>
</div>
</div>
</body>
</html>

_Aerospace_Eng_
Mar 15th, 2005, 09:08 PM
can we see your page in action? its hard to know what is happening from just the code if we dont have the images

niemie
Mar 15th, 2005, 09:36 PM
Yeah, my bad.

Here it is:

http://www.portfolio.yourthreshold.com/

It works really smoothly in Firefox but IE flickers...

niemie
Mar 17th, 2005, 06:20 PM
anyone??

evilregis
Mar 17th, 2005, 10:34 PM
Two things:

1) Check your Internet Settings in IE. Temporary Internet Files settings. Is your browser set to: Every visit to the page? If so, that will cause a flicker. Default, I believe, is set to Automatically. That will not show the flicker. So odds are your flicker won't be seen by everyone as very few people get into those settings to change stuff around.

2) Check this: http://www.jcornelius.com/articles/archives/20041004/solving-ie-image-flicker/

That may be the answer you are looking for. I've used it to solve my own flicker problems in the past. Works like a charm now for me.

niemie
Mar 18th, 2005, 08:00 PM
My web settings are set to Automatically....

Unfortunately I can't change my web server settings - is there an ASP or PHP solution that I could create to solve this problem?

Thanks.