onfocus help Options

[Mr_Guinness]

First off, Hi all, My first post

Hopefully one day i'll be able to answer more questions that i post here!

Untill then though i was wondering if you can help. I recently read a comment on a web page quoting "internet explorer is ruining my life". Throw Safari into that mix and I'll sympathize with him!

Basically i've got a galleryish feature on a page to display client testimonials, which features a list of company names (as PNG files) on the left, and when you click them, the button changes colour and reveals a previously hidden div of text. I've achieved this by using the focus state...

Now I have the following script (suckerfish from htmldog.com) which helpt to get around internet explorers lack of support for the said focus state.....

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfFocus = function() {
var sfEls = document.getElementsByTagName("A");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onfocus=function() {
this.className+=" sffocus";
}
sfEls[i].onblur=function() {
this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
}
}
}

if (window.attachEvent) window.attachEvent("onload", sfFocus);

//--><!]]></script>

which is linked to the CSS in the following way....

.oyster{
position:absolute;
top: 4.5em;
left: 4.54em;
width: 17em;
height: 1.5em;
background: url("images/oystertest.png");
}

.oyster:hover {
background-position: bottom;
}

.oyster:focus {
outline:0;
}
.oyster span {
position: absolute;
top: -0.3em;
left: 29.5em;
width:42.1em;
visibility:hidden;
color: black;
text-decoration: none;
}

.oyster:focus span, a.sffocus{
position: absolute;
visibility: visible;
top:-0.3em;
left: 29.5em;
width:42.1em;
z-index: 2;
display:block;
}

and to the html as thus....

<div class="containertest">
<img class="quote" src="images/quote.png" alt="quote mark"/>
<span class="oyster" href="#oyster" >
<p>text</p>
<br />
<p class="b"><em>name</em> <br />
position<br />
company</span></p></a>

now this works PERFECT in firefox (doesn't everything), doesn't work at all in Safari 3.1.2, and goes ballistic in IE7 (instead of displaying the text when the oyster button is clicked, it tiles the oyster buttons graphic all over the page).

Anyone care to shed any light on this? Any help would be greatly appreciated!!!

[pandy]

Where's the start tag for A? Presumably somewhere before the snip of HTML you posted. That's invalid. You can't put P, DIV and other block level elements inside A. Maybe Safai ignores it altogether or consider it closed before the first DIV.

http://htmlhelp.com/tools/validator/

[Mr_Guinness]

Oh i see!!!

Sorry - html is all new to me, and javascript makes my head hurt lol!

Thanks for the advice!

[Mr_Guinness]

Where's the start tag for A? Presumably somewhere before the snip of HTML you posted. That's invalid. You can't put P, DIV and other block level elements inside A. Maybe Safai ignores it altogether or consider it closed before the first DIV.

Right - so now i know you can't put block level elements inside an 'a' tag, is there any way i can get the button to display a css hidden chunk of text? Or am i going about this in entirely the wrong way?

[pandy]

Oh i see!!!

Browsers usually let this slip, but some browser, for example Safari, could do something unexpected, especially since you use both scripting and CSS with it.

Use the validator - it really helps. hare's a CSS one too.
http://jigsaw.w3.org/css-validator/validator.html

[pandy]

Right - so now i know you can't put block level elements inside an 'a' tag, is there any way i can get the button to display a css hidden chunk of text? Or am i going about this in entirely the wrong way?

Do you need to use onfocus? It has a rather limited range of elements it can be used with. Onclick on other hand can be used with just about anything, so you wouldn't need the link. The only drawback is that old browsers like Netscape 4 and the like only accept it for links, but I wouldn't weep over that, as long as they can somehow get the content of the page.

Here you can see what attributes can be used with what elements. Scroll down to "on...".
http://www.w3.org/TR/html401/index/attributes.html