...

View Full Version : .borderit img and IE



SnapafunFrank
12-06-2005, 09:59 AM
Open my test page in anything other than IE and the .borderit script I got from here works exactly as I want. ( Try http://www.snapafun.co.nz/whgrnr_tables.html ~ the guitars are to be links for these folk and the blue border on mouse over works for me.)

However, nothing happens at the guitars using IE6 though the links are active.

Any suggestions ? I don't mind learning further, it's just that I don't know where to look from here.

The script I used :

<table width="800" align="center" border="0">
<style type="text/css">

.borderit img{
border: 0px solid #cccccc;
}

.borderit:hover img{
border: 2px solid navy;
}

.borderit:hover{
color: red; /* irrelevant definition to overcome IE bug */
}

</style>
<tr>
<td>
<!-- Menu table layout -->
<table width="160" align="left" border="0">
<tr>
<td align="center" valign="center" height="60" border="0">
<a href="newsletter.html" class="borderit">
<img border="0" align="center" valign="center" width=150 height=54 src="blueGuitar_news.png" alt="NewsLetter"/></a>
</td>
</tr>

<snip from here>

ronaldb66
12-06-2005, 10:41 AM
Place those style definitions in the head section of your document where they belong; I would've expected IE of all browsers to swallow this, but it's incorrect nevertheless.

SnapafunFrank
12-07-2005, 10:59 AM
OK. I'm showing my age ~ but thanks for the heads up.

Still no different though. Blue borders in all but IE on mouse over.

NancyJ
12-07-2005, 11:04 AM
Your style still isnt in the head section of your document.

Bill Posters
12-07-2005, 11:17 AM
Additionally, subject to confirmation…

I know that the .borderit class is only being applied to an anchor element, but it might help to spell it out in the CSS itself.
(IE<7 doesn't support pseudo-classes on non-anchor elements, so it might be possible that it isn't acknowledging that the pseudo-classes are actually being used on anchors because it isn't made explicit in the selectors.)

So, …

a.borderit img {
border: 0px solid #cccccc;
}

a.borderit:hover img {
border: 2px solid navy;
}

a.borderit:hover {
color: red; /* irrelevant definition to overcome IE bug */
}

Just a thought.

It's not something I've considered until now. If anyone can confirm whether or not IE/Win needs it to be made explicit in this way, I'd be grateful. It'd save me from cranking up t'other machine (WinXP). ;)

Ta

ronaldb66
12-07-2005, 04:41 PM
I did some testing, but IE6.0/Win2000 stubbornly refuses to assign properties, any properties, to the image using selector ".borderit:hover img".
I tried a different class name, different properties: nada. Added a element selector, no dice.
I don't know if this is a registered IE bug, but if it is there might be a hack for it; an easier solution would be however to set that border on the a instead of on the img, which does work.

SnapafunFrank
12-08-2005, 08:54 AM
Thanks NancyJ : Definitely showing my age: Updated local and not my site.

Tried your idea Bill Posters, nada my system at present but it doesn't appear to break anything so I will leave it there for now.


an easier solution would be however to set that border on the a instead of on the img, which does work.

Now the newbie in me is really going to show. Could you expand this a little further ronaldb66 ?

_Aerospace_Eng_
12-08-2005, 08:57 AM
a.borderit {
border: 2px solid #cccccc; /*make this a color that matches your background*/
}

a.borderit:hover {
border: 2px solid navy;
}

ronaldb66
12-08-2005, 09:34 AM
_Aero_,

I couldn't have said it better! :D

SnapafunFrank
12-08-2005, 10:42 AM
We have a fix............... Thanks everyone.

http://www.snapafun.co.nz/whgrnr_tables.html (have your midi plugin plugged in to really celebrate.)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum