Linked image hover different in every browser.

[decisionman]

Hey All,

I've got a bit of an issue, and I know it's in my css. First of all, here's the site:

http://www.mark-stuckert.net

Everything's A-OK, using Lightbox JS v2.0, except ... in every browser, the rollover state is different. Observe:

IE (transparency attribute works, but there's a blue background!):

http://img237.imageshack.us/img237/9015/issueinternetexplorerkg8.th.gif (http://img237.imageshack.us/my.php?image=issueinternetexplorerkg8.gif)

Firefox (transparency works OK ... this one is correct, except for the little semi-opaque blue underline):

http://img237.imageshack.us/img237/6629/issuefirefoxwu6.th.gif (http://img237.imageshack.us/my.php?image=issuefirefoxwu6.gif)

Opera (crazy, crazy blue underline ... where's that coming from?):

http://img161.imageshack.us/img161/2159/issueoperaab4.th.gif (http://img161.imageshack.us/my.php?image=issueoperaab4.gif)

So, all said and done, I don't really mind which effect occurs ... I'd just like to have it the same across all platforms. Here's a link to my CSS:

http://mark-stuckert.net/_css/style.css

And, just in case it is interfering, here's a link to the Lightbox CSS:

http://mark-stuckert.net/css/lightbox.css

I'm up the creek on this one. If anyone can help, or point me in the right direction, it would be greatly appreciated. I guess I should mention that the bizarre thing in Opera (and the underline on the "X" in IE in a Lightbox pop-up that I've thus far failed to mentioned) all occured before I even added the image hover attribute.

Bizarre. Thanks in advance, and sincerely...
Mark (aka decisionman)

:red:

-----

[simplistik]

just lookin at your css briefly i know that it's the blue in this code:


a:hover
{
color: #fff;
background-color: #00bbec;
text-decoration: none;
}


hope that gets you started in the right direction :thumb2:

[decisionman]

just lookin at your css briefly i know that it's the blue in this code:


a:hover
{
color: #fff;
background-color: #00bbec;
text-decoration: none;
}
hope that gets you started in the right direction :thumb2:

True ... that must be it. Perhaps if I take that out of the global CSS and put in only the 2 areas where I need it (eg. the footer text and the body copy)?

Thanks!

[decisionman]

You are heroic.

I simply put all my links in specific divs (eg. textblock & footertext). Bam. Problem solved. There's probably a way to combine them ... I've got:


div.textblock a:link
{
color: #00bbec;
background: none;
text-decoration: underline;
}

Maybe I could do:


div.textblock, footertext a:link
{
color: #00bbec;
background: none;
text-decoration: underline;
}

Would that work? In any case, it's now pretty much cross-browser happy.

...

Except for the Lightbox padding stuff. But I can live with that. Thanks again!

:nurse:

[fasterthanlight™]

try putting div. in front of both:

div.textblock, div.footertext a:link
{
}

and if that doesn twork, try:

div.textblock a:link, div.footertext a:link {}

[decisionman]

^ - ah. I will try that. Thx!

:2c: