Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Css Rollovers In Ie6


  • Please log in to reply
10 replies to this topic

#1 shawson

shawson

    Ready To Fly Member

  • Members
  • 44 posts

Posted 25 February 2008 - 07:54 AM

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.

#2 lee.n3o

lee.n3o

    Cre8asite Tech News Reporter

  • 1000 Post Club
  • 1556 posts

Posted 25 February 2008 - 08:00 AM

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>


#3 shawson

shawson

    Ready To Fly Member

  • Members
  • 44 posts

Posted 25 February 2008 - 09:10 AM

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!

#4 lee.n3o

lee.n3o

    Cre8asite Tech News Reporter

  • 1000 Post Club
  • 1556 posts

Posted 25 February 2008 - 09:48 AM

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

#5 Guest_Autocrat_*

Guest_Autocrat_*
  • Guests

Posted 25 February 2008 - 01:21 PM

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

#6 shawson

shawson

    Ready To Fly Member

  • Members
  • 44 posts

Posted 26 February 2008 - 05:12 AM

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

#7 shawson

shawson

    Ready To Fly Member

  • Members
  • 44 posts

Posted 27 February 2008 - 05:19 AM

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?

#8 Guest_Autocrat_*

Guest_Autocrat_*
  • Guests

Posted 27 February 2008 - 07:21 AM

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

#9 zero_digit

zero_digit

    Whirl Wind Member

  • Members
  • 50 posts

Posted 18 April 2008 - 08:08 AM

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

#10 Guest_Autocrat_*

Guest_Autocrat_*
  • Guests

Posted 18 April 2008 - 09:30 AM

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 :)

#11 shawson

shawson

    Ready To Fly Member

  • Members
  • 44 posts

Posted 24 July 2008 - 08:19 AM

'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.



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users