I am a graphic designer and I just put a website online for a client. Please be aware I’m a novice in coding so I might have done something wrong and am asking for advise.
Check on http://nancyweisser.com
Everything looks fine in firefox but in IE6 movement between pages gives a nasty blink or flicker; a sort of horizontal flash somewhere (position changes) on screen whenever the page is changed.
I've been on lots of forums and it appears that there is an intermittent IE BUG called Flash of Unstyled Content (FOUC) which this is similar too, except it's not intermittent on my pages. I have tried some of the suggested fixes for it but it is not working so far.
First I thought it was because I was using tables for formatting because this helps in speeding up rendering of the pages and reduces flickering but I did another website without tables and I still have the same problem.
Alternatively, another hint I’ve found that might be contributing to the weirdness is the use of “background-position”.
You must be sure that, for IE, that the “background-position” attribute is NOT set. If you set a background-position for the div, then the flicker will reappear. Mine is set to repeat-x but I don’t know how to change it as I’m not that good on coding.
I know there is an IE browser setting "check for images on every visit to page" or something like that, which used to cause people some "flicker" problems in IE6 and that you can fix it but it means that other people visiting the site won’t be able to fix it on their computers so will still see the flickering.
I have tried the possible solutions under without results
1/ "adding this IE Only meta tag stops the flicker: <meta http-equiv="Page-Enter" content="revealtrans(duration=0.0)"> "
2/ to use simply add the following 2 tags into your <head> section on your page:
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0)">3/
<!--[if lte IE 6]>
<style type=text/css">
div.nav {background-repeat:no-repeat;}
div.nav a:hover {visibility:visible;}
</style>
<![endif]-->4/ I have tried to put the css in a separate, external file but won’t change anything
5/ another solution would be the .htaccess like mentioned below (http://www.explainth.at/en/tricks/flickfix.shtml)
By default, whenever IE encounters an image during the course of rendering an HTML page it checks the server for an updated version of the image - even when it has a recently downloaded cached copy available. This can result in a noticeable flicker when viewers navigate around a site. The problem is at its worst with background images. Client-side solutions to the problem that use JavaScript have been suggested but do not always work reliably. Here we present two server-side alternatives that always work.
The .htaccess Fix
By far the most elegant solution - on webservers running Apache - is to use .htaccess. The instructions required are shown below
ExpiresActive On
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/gif A2592000This might be the solution but the website is hosted on gate.com and I cannot find the htaccess page.
Anybody having a solution for me ? As I said, it might be pretty easy for someone code savvy but for me, I’m in complete dark and wonders if someone can help me with that frustrating issue.
Thanks in advance for any help, this will be greatly appreciated as I’m FRUSTRATED !!!!
Here is the code (CSS is in the page, I’m using a template too):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.menu a:link{
color:#656556;
font-family:Arial, Helvetica, sans-serif;
size:9px;
text-decoration:none;
position:relative;
right:15px;
top:10px;
}
.menu a:visited{
color:#656556;
font-family:Arial, Helvetica, sans-serif;
size:9px;
text-decoration:none;
position:relative;
right:15px;
top:10px;
}
.menu a:hover{
color:#FFFFFF;
position:relative;
right:15px;
top:10px;
}
.menu{
background:#bdbdbd;
border-bottom:solid 1px #666;
border-right:solid 1px #666;
}
.text_images {scrollbar-face-color: #FFFFFF ;
scrollbar-shadow-color: #666666;
scrollbar-highlight-color: #666666;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #000000;
width:599px;
height:400px;
overflow:auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color:#656556;
background:#FFF;
padding:10px;
position:relative;
border-left:solid 1px #666;
}
.images{
position:absolute;
top:188px;
right:389px;
background-color:#FFF;
width:284px;
height:400px;
padding-left:10px;
border-right:solid 1px #666;
}
.text_normal {scrollbar-face-color: #FFFFFF ;
scrollbar-shadow-color: #666666;
scrollbar-highlight-color: #666666;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #000000;
height:420px;
overflow:auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration:none;
color:#656556;
background:#FFF;
padding:10px;
border-left:solid 1px #666;
border-right:solid 1px #666;
}
.titre{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color:#8b9298;
}
.photos{
border:solid 1px #8b9298;
}
.mytable{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color:#656556;
text-decoration:none;
}
</style>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Nancy Weisser</title>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0)">
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body style="background:url(../images/Clipboard04.jpg) repeat-x #1A181D">
<table width="881" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td height="20"> </td> </tr>
<tr>
<td height="125" colspan="2" style="background:#bdbdbd;border-top:solid 1px #666;border-left:solid 1px #666;border-right:solid 1px #666;border-bottom:solid 1px #666;"><img src="../images/header2.jpg" width="881" height="125" /></td>
</tr>
<tr>
<td width="367" height="44" align="left" valign="top" style="border-left:solid 1px #666;border-bottom:solid 1px #666;background:#bdbdbd;"><img src="../images/banner-weisser-short2.jpg" width="367" height="44" align="top" /></td>
<td width="515" height="44" align="right" valign="top" class="menu" ><a href="../index.html">HOME</a> <a href="../about.html">ABOUT</a> <a href="../artwork.html">ARTWORK</a> <a href="../exhibitions.html">EXHIBITIONS</a> <a href="../teaching.html">TEACHING</a> <a href="../contact.html">CONTACT</a></td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="74%" align="left" valign="top" class="text_normal"><p><span class="titre"><!-- TemplateBeginEditable name="title" -->title<!-- TemplateEndEditable --></span></p>
<div style="height:420px; width:840px; overflow:auto;padding:10px;" ><!-- TemplateBeginEditable name="text" -->text<!-- TemplateEndEditable --> </div></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"><img src="../images/bottom-talullah.jpg" width="881" height="86" /></td>
</tr>
</table>
</body>
</html>