css: firefox / ie6 issues :(

[agentxi]

Hey, I am currently working on a website, and I am working on creating a menu system, where ...when you hover, it reveals some extra text.

I got it to work in firefox no problems, but I am unsure as to how to make it work when it comes to ie6

here's my code, just wondering if someone knows if it can be doable in ie

a:link{
color:#33220D;
text-decoration:none;
}
a:hover{
color:#33220D;
text-decoration:none;
}

a:link em{
visibility:hidden;
}
a:hover em{
visibility: visible;
}

and the html

<div id="menu">
<ul>
	<li><a href="#">link1 <em> / extra text</em></a></li>
	<li><a href="#">link2 <em> / extra text</em></a></li>
	<li><a href="#">link3 <em> / extra text</em></a></li>
	<li><a href="#">link4 <em> / extra text</em></a></li>
	<li><a href="#">link5 <em> / extra text</em></a></li>
</ul>
</div>

[Jacorre]

You may have to use javascript instead? Possibly set it up in a div and make the div visible/invisible. Or try wrapping the extra text using a span instead of em? I know when using images as say h1 you still want text to appear in case the image doesn't load, so wrapping the text in a span and setting it's visibility to none works in various browsers that I've seen.

[notjustgraphics]

Hey AgentXI

That was a tricky one, and the solution is not clean, but it does work...

Unfortunately it requires Javascript since I cannot find a CSS workaround for the poorly behaved IE6.

The trick is to use server directives to deliver the necessary Javascript workaround to IE6 browsers only...

<div id="menu">
<ul>
	<li><!--[if IE 6]><span onMouseOver="definitionID.style.display=''" onMouseOut="definitionID.style.display='none'"><![endif]--><a href="#">link1<!--[if IE 6]><span ID="definitionID" STYLE="display:none"><![endif]--><em> / extra text</em><!--[if IE 6]></span><![endif]--></a><!--[if IE 6]></span><![endif]--></li>
	<li><a href="#">link2 <em> / extra text</em></a></li>
	<li><a href="#">link3 <em> / extra text</em></a></li>
	<li><a href="#">link4 <em> / extra text</em></a></li>
	<li><a href="#">link5 <em> / extra text</em></a></li>
</ul>
</div>

Hope this helps

I've only changed the first link so the example is easy to distinguish.

Mike.

[agentxi]

hey wow, thank you 2 very much for the speedy reply.

I for some unknown reason really hate having to use javascript in my websites. and would prefer to use other means if i can. I ran into this site about 5 minutes ago, and apparently he has figured out a work around for the css in ie 5.5 & 6...

Stu Nicholls | CSSplay | :hover craft tutorial

check out "the fifth link" apparently there's a "known" bug lol but known by whom...oh well i tried it and it seems to work...

[notjustgraphics]

Thanks for the link AgentXI...

I might be a bit daft, but I cannot see how the information there allows you to achieve the effect in your Original Post in IE...

I will spend more time on it this afternoon, but if you've got it tickety-tock.. i'd love to see an example!

Thanks...

Mike.

P.S. I agree, javascript i prefer to do without... but somethings cannot be avoided with IE... like PNG transparency etc...

[agentxi]

P.S. I agree, javascript i prefer to do without... but somethings cannot be avoided with IE... like PNG transparency etc...

actually there is a script out there that is pure php and it does the same thing...

also the bug apparently is, you need something that changes the hover...

i chose "border=0;" to be the trigger...and that's all it took apparently. it seems to work now, so i dunno :s lol it's one of those "mystery fixes"

oops forgot to add the link for the php png fix
PNG-24 Alpha Transparency With Microsoft Internet Explorer 5.5 or better (MSIE 5.5+)

[agentxi]

i was thinking about using "lightbox" to display some images in a gallery, anyone know the latest version? I saw a version3 but they're charging money for it. the version I have is 2.02,

I have one issue though, I cannot change the opacity of the overlay image for the lightbox, does anyone know if there's a js file that's controlling this?
I do know about the opacity properties in the css file, but i change all the values, and nothing seems to be modified when i try it out.

I looked in the javascript files but i don't know enough about js to know what i can and cannot modify...

I have attached the file to this post for any of you who wanted to check out the code (it's the original file i downloaded from
here )

[agentxi]

well i found out the issue ...sorry for bugging you all so much...especially on things that i discover on my own :s

apparently the lightbox.js has a line of code that i can change
new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });

i just changed the 0.8 to the value i want, and then modified the css properties to correspond.