10 replies to this topic

[shawson]

Afternoon All,

I'm having an awesome time making my roll overs work in ie6- they're fine in every other stinking browser- its just good ol ie. Point your copy of this horrifically produced poiece of software over to http://www1devalt.lbsltd.co.uk/ and have a butchers at the top 4 buttons "First books", "Girls Books" etc. Notice, on mouse out, the image sometimes restores to the correct image, but other times shows a totally random chunk of the browser in that space.

Any ideas at all would be greatly appreciated as i'm at a total loss!

Cheers all,

Shaw.

[lee.n3o]

Hmmm that is fricking weird.... Try caching the backgroundimages for IE6, it stops them flickering on roll over so might help with this

<script type="text/javascript">
//<![CDATA[
try {
  document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}
//]]>
</script>

[shawson]

hey- cheers for the quick response! well i wacked that code in and they do seem to respond a bit quicker, but still got the weirdness- i really dont understand what is happening with this!

[lee.n3o]

I'll try and have a look later on when I get home see if I can see anything out of the ordinary B)

[Autocrat]

Okay... the belwo should work fine... it is a little different though.


Markup

<div id="navmenu">
	<ul>
		<li>
			<a href="http://www1devalt.lbsltd.co.uk/category_fake.aspx?ID=1&amp;page=1" title="whatever">
				<strong>
					First Books
				</strong>
				<span id="firstlinkbgimg">
					<span id="firstlinkfgimg">
					</span>
				</span>
			</a>
		</li>
		<li>
			<a href="http://www1devalt.lbsltd.co.uk/category_fake.aspx?ID=2&amp;page=1" title="whatever">
				<strong>
					Girls Books
				</strong>
				<span id="secondlinkbgimg">
					<span id="secondlinkfgimg">
					</span>
				</span>
			</a>
		</li>
		<li>
			<a href="http://www1devalt.lbsltd.co.uk/category_fake.aspx?ID=3&amp;page=1" title="whatever">
				<strong>
					Boys Books
				</strong>
				<span id="thirdlinkbgimg">
					<span id="thirdlinkfgimg">
					</span>
				</span>
			</a>
		</li>
		<li>
			<a href="http://www1devalt.lbsltd.co.uk/category_fake.aspx?ID=4&amp;page=1" title="whatever">
				<strong>
					Older Readers
				</strong>
				<span id="fourthlinkbgimg">
					<span id="fourthlinkfgimg">
					</span>
				</span>
			</a>
		</li>
	</ul>
</div>

Styling

#navmenu
{width: 100%; float: left;}

#navmenu ul
{
margin: 0;
padding: 0;
list-style: none;
float:left;
clear: left;
width: 572px;
}

#navmenu li
{
margin: 0;
padding: 0;
float: left;
}

#navmenu li a
{
position: relative;
display: block;
width: 143px;
text-decoration: underline;
height: 105px;
}


#navmenu li a:hover
{
text-decoration: none;
font-size: 100%;
}


#navmenu a span
{
position: absolute;
top: 0;
left: 0;
display: block;
}


#navmenu a:hover span
{cursor: hand;}



#navmenu a span#firstlinkbgimg
{width: 143px; height: 105px; background-color: blue;}
#navmenu a span#firstlinkfgimg
{width: 143px; height: 105px; background-color: green;}
#navmenu a:hover span#firstlinkfgimg
{width: 0; height: 143px;}

#navmenu a span#secondlinkbgimg
{width: 145px; height: 105px; background-color: yellow;}
#navmenu a span#secondlinkfgimg
{width: 145px; height: 105px; background-color: orange;}
#navmenu a:hover span#secondlinkfgimg
{width: 0; height: 145px;}

#navmenu a span#thirdlinkbgimg
{width: 143px; height: 105px; background-color: pink;}
#navmenu a span#thirdlinkfgimg
{width: 143px; height: 105px; background-color: red;}
#navmenu a:hover span#thirdlinkfgimg
{width: 0; height: 143px;}

#navmenu a span#fourthlinkbgimg
{width: 140px; height: 105px; background-color: purple;}
#navmenu a span#fourthlinkfgimg
{width: 140px; height: 105px; background-color: blue;}
#navmenu a:hover span#fourthlinkfgimg
{width: 0; height: 140px;}

/* Bug Fix for IE - non-reactive link spans */
#navmenu a:hover
{zoom: 1;}

Simply change out the background-color: n; and substitute with your images.

Please note...
bgimg is the image you want to see when you are hovering - it sits behind/underneath fgimg.
When you hover, the fgimg will disappear from view, showign the image behind it.


hope that helps

[shawson]

Hey, thanks for the detailed response Autocrat, tis much appreciated- i shall give this a go today and let you know what happens!

[shawson]

Well I gave that fix a go on my local system and added the images back in and it seems to work perfectly! i've no idea why, but it does! i'm just about to implement it all on the live pages- Many MANY thanks for your help with this one! Any idea why ie6 went so mad with the original markup?

[Autocrat]

It's the way things are structured and positioned... and also knowing what Browser bugs there are, and how to get around them.

[zero_digit]

hey guys can I combine a JSsript and css to have a hover effect?? thanks

[Autocrat]

Depends on what you are wanting to do.
So, start a new topic, and in it provide as much detail as you can on what you want it to do.
If at all possible, also supply a link to ademo page/image/sample etc.

We'll have a look and see whats what

[shawson]

'Ello all,

just thought i'd post an update on this as we're half way through another project at the moment and came across the exact same issue i had before on the Hodder Children's site. We managed to solve it this time by re-saving the image files we were using for the roll overs (as before only certain buttons or groups of buttons seemed to be effected).

We re-saved the GIF's with the following settings;
GIF - Web Adaptive - Alpha Transparency - 128 colours - no dithering

We're using Macromedia Fireworks, version 8. i don't know if maybe this issue can be caused by particular settings on the GIF format, but this seemed to solve the problem for us in this instance. I don't know if these settings will always fix it, but it does seem like it's worth fiddling with the export options when saving your gif buttons to be used as roll overs if you experience this same bug i had.