Can any of you guys look at
B&B - Chambres des hotes - Marciac - Gers - France
in IE and tell me if the rollovers on the side images are smooth or not.
Here Im getting blanking of the images in IE, fine in other browsers, all images are being preloaded, strange thing is if I go to another page then browser back to my page the rollover is quick and clean until I refresh the page then I get the delay back.
Thank for the check 
Yep, because you are using images and javascript as rollovers for buttons. It would be smoother to use CSS a:hover to acheive the same thing.
Have a look at Navigation Image replacement for an idea of how to do it.
or http://wellstyled.com/css-nopreload-rollovers.html
or if you are feeling REALLY adventurous: http://www.alistapart.com/articles/sprites
Hi,
You really need a doctype from this century 
You can’t put anchors around divs (unless you’re using html5 and even then I’d advise against it for a few years) because anchors are inline elements and cannot hold block content.
You can reduce that code in half.
Here it is tidied up.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
border:0;
height:100%;
}
html {
overflow:auto; /*get rid of scroll bars in IE */
}
body {
text-align: center;
color: #FFF;
background-color: #8D000A;
font-family:"trebuchet ms", tahoma, verdana, arial, sans-serif; /* set default font */
font-size:80%; /*set default font size */
}
a,a:visited {
text-decoration: none;
color: #AAA;
}
a img {
border: none;
}
#screen {
background: #8D000A;
position: relative;
width: 1048px;
text-align: left;
margin:0 auto;
}
#header,#header span{
width: 500px;
height: 133px;
margin:0 auto;
position:relative;
overflow:hidden
}
#header span{
background:#8D000A url(http://www.mandes.co.uk/iangaye/images/title.jpg) 50% 0 no-repeat;
position:absolute;
left:0;
top:0;
}
#leftmenu {
float: left;
text-align: left;
font-size: 12px;
width: 200px;
}
#rightmenu {
float: left;
text-align: right;
font-size: 12px;
width: 200px;
}
ul.menu{
margin:0;
padding:0;
list-style:none;
width:200px;
}
ul.menu li,
ul.menu li a{
width:200px;
display:block;
color: #8D000A;
font-size: 20px;
font-family: Times New Roman, arial, sans-serif;
font-weight: bold;
text-decoration: none;
line-height:25px
}
ul.menu li a:visited{ color: #8D000A;}
ul.menu li a {padding-top: 67px;}
ul.menu li{
width: 190px;
height: 100px;
text-align:center;
margin-bottom: 10px;
text-transform:uppercase;
}
#buttonhome {background: url(http://www.mandes.co.uk/iangaye/buttonimages/homebutton_on.jpg) no-repeat 0 0;}
#buttonhome a{background: url(http://www.mandes.co.uk/iangaye/buttonimages/homebutton.jpg) no-repeat 0 0;}
#buttongallery {background: url(http://www.mandes.co.uk/iangaye/buttonimages/gallerybutton_on.jpg) no-repeat 0 0;}
#buttongallery a{background: url(http://www.mandes.co.uk/iangaye/buttonimages/gallerybutton.jpg) no-repeat 0 0;}
#buttonevent {background: url(http://www.mandes.co.uk/iangaye/buttonimages/eventbutton_on.jpg) no-repeat 0 0;}
#buttonevent a{background: url(http://www.mandes.co.uk/iangaye/buttonimages/eventbutton.jpg) no-repeat 0 0;}
#buttonsituation {background: url(http://www.mandes.co.uk/iangaye/buttonimages/situationbutton_on.jpg) no-repeat 0 0;}
#buttonsituation a{background: url(http://www.mandes.co.uk/iangaye/buttonimages/situationbutton.jpg) no-repeat 0 0;}
#buttonaccom {background: url(http://www.mandes.co.uk/iangaye/buttonimages/accombutton_on.jpg) no-repeat 0 0;}
#buttonaccom a{background: url(http://www.mandes.co.uk/iangaye/buttonimages/accombutton.jpg) no-repeat 0 0;}
#buttonbike {background: url(http://www.mandes.co.uk/iangaye/buttonimages/bikebutton_on.jpg) no-repeat 0 0;}
#buttonbike a{background: url(http://www.mandes.co.uk/iangaye/buttonimages/bikebutton.jpg) no-repeat 0 0;}
#buttontariffs {background: url(http://www.mandes.co.uk/iangaye/buttonimages/tariffsbutton_on.jpg) no-repeat 0 0;}
#buttontariffs a{background: url(http://www.mandes.co.uk/iangaye/buttonimages/tariffsbutton.jpg) no-repeat 0 0;}
#buttoncontact {background: url(http://www.mandes.co.uk/iangaye/buttonimages/contactbutton_on.jpg) no-repeat 0 0;}
#buttoncontact a{background: url(http://www.mandes.co.uk/iangaye/buttonimages/contactbutton.jpg) no-repeat 0 0;}
ul.menu li a:hover{background:transparent!important}
#content {
float:left;
width: 626px;
height: 420px;
padding:5px 0;
border: 1px solid #fff;
background: #FFFFC5;
overflow: auto;
margin:0 10px 0 0;
}
#content p {
font-family: verdana, arial, sans-serif;
font-size: 16px;
text-align: justify;
color: #000;
padding:0 10px;
}
#content p.newsflash {
font-family: verdana, arial, sans-serif;
font-size: 14px;
background-color: red;
text-align: justify;
}
#content p a {
text-decoration: underline;
color: #AAA;
}
#footer{clear:both;}
.clear {
clear: both;
}
.table {
font-family: Verdana, Helvetica, sans-serif;
font-size: 9pt;
border: none;
margin-left: auto;
margin-right: auto;
}
.table th {
color: #AFF;
padding: 3px;
}
.table td {
color: #FFCCAA;
padding: 3px;
text-align: left;
}
#test {
height: 600px;
}
#lightbox {
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails {
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption {
float: left;
}
#keyboardMsg {
float: right;
}
#closeButton {
top: 5px;
right: 5px;
}
#lightbox img {
border: none;
clear: both;
}
#overlay img {
border: none;
}
#overlay {
background-image: url(http://www.mandes.co.uk/javascript/overlay.png);
}
* html #overlay {
background-color: #333;
back\\ground-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.mandes.co.uk/javascript/overlay.png", sizingMethod="scale");
}
</style>
</head>
<body>
<div id="screen">
<h1 id="header">Les Carillons - Chambres des Hotes <span></span></h1>
<div id="leftmenu">
<ul class="menu">
<li id="buttonhome"><a href="#">Home</a></li>
<li id="buttongallery"><a href="#">Gallery</a></li>
<li id="buttonevent"><a href="#">Events Links</a></li>
<li id="buttonsituation"><a href="#">Situation</a></li>
</ul>
</div>
<div id="content">
<p>Opening early 2011 as well-appointed bed and breakfast accommodation, Ian and Gaye Badcock welcome you to <<Les Carillons>>, a spacious 'Maison Maitre' built in the early 19th century and centrally situated in the Bastide village of Marciac. </p>
<p>The house has been extensively renovated to a high standard but retains its French charm with many restored period features. The bedrooms are of a generous size with high ceilings and good natural light with good quality beds and comfortable seating areas. They each have a new en-suite shower, toilet and basin. </p>
<p>Breakfast is served in the welcoming open plan kitchen/day room or on the terrace of the south-facing walled garden.</p>
</div>
<div id="rightmenu">
<ul class="menu">
<li id="buttonaccom"><a href="#">Accomodation</a></li>
<li id="buttonbike"><a href="#">Motorcycles</a></li>
<li id="buttontariffs"><a href="#">Tariffs</a></li>
<li id="buttoncontact"><a href="#">Contact</a></li>
</ul>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Th over state is placed into the list to preload it and the normal state is placed into the anchor. On hover you make the anchor transparent and the image underneath shows through. This just saves you making double images for the background position method (which is a goo method also).
Lists are used for the menu (and we don’t really need the) surrounding div for those menus but I left them in place in case you had different content on other pages.
Don’t duplicate unnecessary styles. All the menu items are the same size so just define them once via context and nt on every single id.
The result is code that is about a third of the size of your original.
Lastly you must optimise your images better. This image is 28k and realistically it could be about 5k or less without noticeable loss…
Thanks Spike and Paul O’B for your input on this.
Ive got it all working, but still working through Pauls code to see what I can learn from it on teh CSS side.
