PDA

View Full Version : a:active not working in Firefox or Netscape



tjanson
11-14-2005, 08:42 PM
Hi all. I would be much appreciative of your help on this. I have spent far too long trying to figure out why my a:active css is not working on the thumbnails below the large image when you click on one. Works fine in IE, but not on Firefox 1.0.4 and Netscape 8.0.4 for Windows.
Thanks so much for your input.

Offending CSS:

a.thumbnailuw:visited {
display : block;
border : 2px solid #000000;
}

a.thumbnailuw:hover {
display : block;
border : 2px solid #65ADE7;
}

a.thumbnailuw:active {
display : block;
border : 2px solid #65ADE7;
}

Site I'm applying it to:
http://www.johntorrente.com/index.html

mwinter
11-14-2005, 10:57 PM
I have spent far too long trying to figure out why my a:active css is not working on the thumbnails below the large image when you click on one.That's because it is working.


Works fine in IE, but not on Firefox 1.0.4 and Netscape 8.0.4 for Windows.No, it works as you'd like it to in IE. That's rather different.

The :active pseudo-class is only applied whilst the user is 'activating' an element. The CSS specification gives, for an example of this state, "between the times the user presses the mouse button and releases it." It doesn't definitively state when any of the interactive pseudo-classes apply, or which elements might exhibit them. However, it seems to me that IE is wrong, and is in fact acting like the :focus pseudo-class is in effect.

There is another thread (http://www.dynamicdrive.com/forums/showthread.php?t=6074) similar to this one in the JavaScript forum.

Mike

jscheuer1
11-15-2005, 01:41 AM
Mike, can we infer from this (your above post) that:

a.thumbnailuw:focus {
display : block;
border : 2px solid #65ADE7;
}

Would have the desired result?

tjanson
11-15-2005, 03:54 AM
SO I tried this:

a.thumbnailuw:focus {
display : block;
border : 2px solid #65ADE7;
}

And it didn't achieve the desired results. So should I give up and go with a javascript solution like:

<img onmouseover="javascript:this.style.borderColor='#65ADE7" onmouseout="javascript:this.style.borderColor='#000000" class="image" src="" width="100" height="100" border="0" align="left">

Thoughts?

jscheuer1
11-15-2005, 07:10 AM
That's what I was going to suggest initially but, wasn't 100% certain there might not be a css solution. You will need to be careful not to add (javascript) borders to (css) borders when implementing this though. Your code as is will not achieve the result I think you want anyway. To do that, some method of collecting all the items involved needs to be used. Then they can be walked through and have their borders turned on and off as needed to achieve the effect you are going for. A common method is to use the inner element collected and distinguished by its parent's class name:


function swap(imgIndex, el) {
var timgs=document.getElementsByTagName('img')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].parentNode.parentNode.className=='thumbnailuw')
timgs[i_tem].id=''
el.firstChild.id='active_id'
document['imgMain'].src = Images[imgIndex];
}

Then call the function from the HTML like so:


<td class="thumbnailuw"><a href="#" onclick="swap(1, this);return false;"><img src="img/small/2small.jpg" width="30" height="20" alt=""></a></td>

You can give the img tags mouseover/out events to simulate the hover border effects you want, like in your post but, since they can be definitions for new classes I'll create, the code can be like this:


<img onmouseover="this.className='another_class'" onmouseout="this.className='some_class'" class="some_class" src="" width="100" height="100" border="0" align="left">

Set all the anchor tags (.thumbnailuw a) css (and all their pseudo classes) to border:none. Then the some_class can have the border definition for 'inactive', the another_class the 'hover' border profile and the id active_id will have the 'active' definitions:


<style type="text/css">
.some_class {
border : 2px solid #000000;
}

.another_class {
border : 2px solid #65ADE7;
}

#active_id {
border : 2px solid #65ADE7;
}
</style>

As a finishing touch, add an id to the first anchor tag in the series (or whichever one you want 'active' onload):


<td class="thumbnailuw"><a id="first" href="#" onclick="swap(0, this);return false;"><img src="img/small/1small.jpg" width="30" height="20" alt=""></a></td>

Now your onload event can be like so:


<body class="home" onLoad="swap(0, document.getElementById('first'));">

jscheuer1
11-15-2005, 09:06 AM
I played around with this a bit more and simplified it (or complicated it, depending upon your point of view) to:

Use these style definitions:


td.thumbnailuw a:link, td.thumbnailuw a:visited {
display : block;
border : none;
}

td.thumbnailuw a:hover, td.thumbnailuw a:active {
display : block;
border : none;
}

.init_image, .inactive_class {
border : 2px solid #000000;
}

.hover_class, #active_id {
border : 2px solid #65ADE7;
}

These two functions, in a script block in the head:


function swap(el) {
var timgs=document.getElementsByTagName('img')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].parentNode.parentNode.className=='thumbnailuw')
timgs[i_tem].id=''
el.firstChild.id='active_id'
document['imgMain'].src = Images[el.href.substr(el.href.lastIndexOf('#')+1)];
}

function init(){
var timgs=document.getElementsByTagName('img')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].parentNode.parentNode.className=='thumbnailuw'){
timgs[i_tem].className='inactive_class'
timgs[i_tem].onmouseover=function(){this.className='hover_class'}
timgs[i_tem].onmouseout=function(){this.className='inactive_class'}
timgs[i_tem].parentNode.onclick=function(){swap(this);return false;}
}
swap(document.getElementById('first'));
}

This body onload event:


<body class="home" onLoad="init();">

And, this simplified HTML for the thumbnails:


<td class="thumbnailuw"><a id="first" href="#0"><img class="init_image" src="img/small/1small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#1"><img class="init_image" src="img/small/2small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#2"><img class="init_image" src="img/small/3small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#3"><img class="init_image" src="img/small/4small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#4"><img class="init_image" src="img/small/5small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#5"><img class="init_image" src="img/small/6small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#6"><img class="init_image" src="img/small/7small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#7"><img class="init_image" src="img/small/8small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#8"><img class="init_image" src="img/small/9small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#9"><img class="init_image" src="img/small/10small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#10"><img class="init_image" src="img/small/11small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#11"><img class="init_image" src="img/small/12small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#12"><img class="init_image" src="img/small/13small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#13"><img class="init_image" src="img/small/14small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#14"><img class="init_image" src="img/small/15small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#15"><img class="init_image" src="img/small/16small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#16"><img class="init_image" src="img/small/17small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#17"><img class="init_image" src="img/small/18small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#18"><img class="init_image" src="img/small/19small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#19"><img class="init_image" src="img/small/20small.jpg" width="30" height="20" alt=""></a></td>
</tr>

Put this after the table for the gallery:


<noscript><br>&nbsp;<br><div align="center" style="color:white;background-color:black;">Javascript must be enabled for above gallery to function properly.</div></noscript>

mwinter
11-15-2005, 01:04 PM
Mike, can we infer from this (your above post) that:

a.thumbnailuw:focus {
display : block;
border : 2px solid #65ADE7;
}

Would have the desired result?No. The :focus pseudo-class is another interactive, and therefore transient, effect. Once focus is moved away from the link (by clicking, tabbing, or a similar method) the border will no longer apply. As the OP is trying to highlight the thumbnail of the currently shown image, this wouldn't be appropriate.

Ideally, the OP would dump the client-side scripting in favour of something server-side (or at least in combination). When the user activates a link, the document would be served anew, with the markup altered to indicate which link is active.




function swap(imgIndex, el) {
var timgs=document.getElementsByTagName('img')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].parentNode.parentNode.className=='thumbnailuw')
timgs[i_tem].id=''
el.firstChild.id='active_id'
document['imgMain'].src = Images[imgIndex];
}
One should be careful when walking through the document tree using the firstChild property (and similar). If the markup contains white space, the property will reference that text node, not the element after it. Search for the element wanted, don't assume that it will be there.

In this instance, I'd modify the id attribute of the links, not the images.

Mike

jscheuer1
11-15-2005, 03:41 PM
One should be careful when walking through the document tree using the firstChild property (and similar). If the markup contains white space, the property will reference that text node, not the element after it. Search for the element wanted, don't assume that it will be there.

Generally I agree with this (and it would also apply to the use of parentNode in the script), in this case, working with the OP's original code, it is a valid assumption. Your well taken point should also be taken as advice that, if the method I've outlined is used, care must be exercised in writing the markup - that it conform to the template provided. This is often true when javascript effects are involved.

The code and markup could be rewritten to avoid walking the tree, I think. At the very least, to employ a while loop to search for the specific node or type of node, if it exists, that sort of thing. That would be a very good idea if this were to be used as a "plug 'n play" script suitable for a wide variety of markups.

tjanson
11-15-2005, 05:10 PM
Thanks so much for all the help. I will post later with the results.

jscheuer1
11-15-2005, 07:49 PM
I really did like Mike's suggestion, found it fairly easy to implement compared to coming up with the scheme in the first place. I also found a way (hinted at in my last version with the use of # hrefs) for rudimentary functionality in non javascript enabled browsers. Here's the whole page as it is now:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>John Torrente Photography</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="John Torrente, Photography, World Photographer, Landscape, Peoplescape, Nutty Guy, documentary photography, travel photography, black and white photography, street photography">

<style type="text/css">
body {
background : #000000;
font-family : arial;
font-weight: bold;
font-size : 12px;
color : #CCCCCC;
Margin : 0px;
Margin-top : 0px;
Margin-bottom : 0px;
border-width : 0px;

}

table {
font-family : arial;
font-weight : normal;
font-size : 12px;
color : #CCCCCC;
padding : 0px;
border-spacing : 0px;
border-collapse : collapse;
border : 0px;
}

img {border:0;}

A {
text-decoration: none;
}
A:hover {
text-decoration: underline;
}

A.opacity:hover img {
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}


A:link, A:visited {
color: #CCCCCC;
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}




body.home {
color : #000000;
Margin : 0px;
background : #000000;
Margin : 0px;
Margin-top : 0px;
Margin-bottom : 0px;
border-width : 0px;
}

.header {
position: absolute;
top: 12px;
left: 15px;
padding: 0px;
}

.header2 {
position: absolute;
top: 22px;
left: 826px;
padding: 0px;
}

.photobox {
position: absolute;
top: 72px;
left: 121px;
padding: 0px;
}
.smallphoto {
position: absolute;
top: 558px;
left: 90px;
}

.footer {
position: absolute;
top: 550px;
left: 750px;
}


.init_image, .inactive_class {
display:block;
border : 2px solid #000000;
}

.hover_class, #active_id {
display:block;
border : 2px solid #65ADE7;
}



</style>



<script type="text/javascript">

// Reference URL to large images here
var Images = new Array(
"img/big/1big.jpg",
"img/big/2big.jpg",
"img/big/3big.jpg",
"img/big/4big.jpg",
"img/big/5big.jpg",
"img/big/6big.jpg",
"img/big/7big.jpg",
"img/big/8big.jpg",
"img/big/9big.jpg",
"img/big/10big.jpg",
"img/big/11big.jpg",
"img/big/12big.jpg",
"img/big/13big.jpg",
"img/big/14big.jpg",
"img/big/15big.jpg",
"img/big/16big.jpg",
"img/big/17big.jpg",
"img/big/18big.jpg",
"img/big/19big.jpg",
"img/big/20big.jpg"
);


function swap(el) {
var timgs=document.getElementsByTagName('a')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].className=='inactive_class'||timgs[i_tem].className=='hover_class')
timgs[i_tem].id=''
el.id='active_id'
document['imgMain'].src = Images[el.href.substr(el.href.lastIndexOf('#')+1)];
}

function init(){
var timgs=document.getElementsByTagName('a')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].className=='init_image'){
timgs[i_tem].className='inactive_class'
timgs[i_tem].onmouseover=function(){this.className='hover_class'}
timgs[i_tem].onmouseout=function(){this.className='inactive_class'}
timgs[i_tem].onclick=function(){swap(this);return false;}
}
swap(document.getElementById('first'));
}

</script>
</head>

<body class="home" onLoad="init();">

<div class="header">
<a class="opacity" href="index.html"><img src="img/torrente.gif" width="280" height="27" alt=""></a></div>

<div class="header2">
<a class="opacity" href="contact.html"><img src="img/contact.gif" width="54" height="13" alt=""></a>
</div>

<img style="position: absolute; top: 45px; left=13px;" src="img/greline.gif" width="875" height="5" alt="">
<img style="position: absolute; top: 540px; left=13px;" src="img/greline.gif" width="875" height="5" alt="">
<div class="photobox">
<img galleryimg="no" name="imgMain" src="img/big/1big.jpg" width="660" height="440" alt="">
</div>

<div class="smallphoto" id="square">
<table border="0" cellspacing="0" cellpadding="1" align="left" >
<!-- Reference the URL to the thumbnails as well as the copy in this section -->
<tr>
<td><a class="init_image" id="first" href="#0"><img src="img/small/1small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#1"><img src="img/small/2small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#2"><img src="img/small/3small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#3"><img src="img/small/4small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#4"><img src="img/small/5small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#5"><img src="img/small/6small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#6"><img src="img/small/7small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#7"><img src="img/small/8small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#8"><img src="img/small/9small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#9"><img src="img/small/10small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#10"><img src="img/small/11small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#11"><img src="img/small/12small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#12"><img src="img/small/13small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#13"><img src="img/small/14small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#14"><img src="img/small/15small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#15"><img src="img/small/16small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#16"><img src="img/small/17small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#17"><img src="img/small/18small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#18"><img src="img/small/19small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#19"><img src="img/small/20small.jpg" width="30" height="20" alt=""></a></td>
</tr>
</table>
<noscript><br>&nbsp;<br><div align="center" style="color:white;background-color:black;">Javascript must be enabled for above gallery to function properly.</div></noscript>

</div>
<noscript>
<div align="center" style="position:absolute;top:700px;width:900px;margin:1px auto;">
<br><a href="#">To Top</a><br><a name="0"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/1big.jpg">
<br><a href="#">To Top</a><br><a name="1"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/2big.jpg">
<br><a href="#">To Top</a><br><a name="2"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/3big.jpg">
<br><a href="#">To Top</a><br><a name="3"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/4big.jpg">
<br><a href="#">To Top</a><br><a name="4"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/5big.jpg">
<br><a href="#">To Top</a><br><a name="5"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/6big.jpg">
<br><a href="#">To Top</a><br><a name="6"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/7big.jpg">
<br><a href="#">To Top</a><br><a name="7"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/8big.jpg">
<br><a href="#">To Top</a><br><a name="8"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/9big.jpg">
<br><a href="#">To Top</a><br><a name="9"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/10big.jpg">
<br><a href="#">To Top</a><br><a name="10"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/11big.jpg">
<br><a href="#">To Top</a><br><a name="11"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/12big.jpg">
<br><a href="#">To Top</a><br><a name="12"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/13big.jpg">
<br><a href="#">To Top</a><br><a name="13"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/14big.jpg">
<br><a href="#">To Top</a><br><a name="14"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/15big.jpg">
<br><a href="#">To Top</a><br><a name="15"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/16big.jpg">
<br><a href="#">To Top</a><br><a name="16"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/17big.jpg">
<br><a href="#">To Top</a><br><a name="17"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/18big.jpg">
<br><a href="#">To Top</a><br><a name="18"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/19big.jpg">
<br><a href="#">To Top</a><br><a name="19"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/20big.jpg">
</div></noscript>
</body>
</html>

tjanson
11-15-2005, 08:43 PM
Thank you Thank you Thank you!! That's exactly what I was going for. You must have seen my poor attempts with CSS to handle the first thumbnail with an onstate on page load... I really appreciate your help. I'm still not 100% sure how it all works and obviously need to read up on Parent node etc and play around with it a bit more.

It always amazes me how generous these forums are with help and advice. Wow.

lllusion
12-23-2006, 12:16 PM
Following this example I did the same thing with opacity instead of borders.

IIUC the array does not pre-load all the big images. Is this correct???

I don't understand why all 'a' tags don't get affected by var timgs=document.getElementsByTagName('a').
Would someone mind explaining it to me?

AFAIK, 'name' is invalid in xhtml strict. Would it be possible to use an Id 'imgMain' instead of name 'imgMain' for the following line? If so, what changes need to be made???
document['imgMain'].src = Images[el.href.substr(el.href.lastIndexOf('#')+1)];

jscheuer1
12-27-2006, 06:02 AM
Following this example I did the same thing with opacity instead of borders.

IIUC the array does not pre-load all the big images. Is this correct???

I don't understand why all 'a' tags don't get affected by var timgs=document.getElementsByTagName('a').
Would someone mind explaining it to me?

AFAIK, 'name' is invalid in xhtml strict. Would it be possible to use an Id 'imgMain' instead of name 'imgMain' for the following line? If so, what changes need to be made???
document['imgMain'].src = Images[el.href.substr(el.href.lastIndexOf('#')+1)];

I don't think I fully understand all of what you are asking. I can tell you that this bit:


var timgs=document.getElementsByTagName('a')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].className=='inactive_class'||timgs[i_tem].className=='hover_class')

does collect all a tags but, then chooses only those with the class names of 'inactive_class' or 'hover_class' before doing anything with them.

If you change name to id, as in your example - use:


document.getElementById('imgMain').src =

However, are your sure name is invalid? Name is invalid for certain elements but, img and a tags almost always can have names. Also, you probably shouldn't be using xhtml anyway.

Oh, and I think I get the other part now too. No, there is no preloading involved in the code from my last post.

lllusion
12-27-2006, 07:31 AM
var timgs=document.getElementsByTagName('a')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].className=='inactive_class'||timgs[i_tem].className=='hover_class')

does collect all a tags but, then chooses only those with the class names of 'inactive_class' or 'hover_class' before doing anything with them.
Great, thanks. I have no JavaScript education and didn't realize that || = OR. Now things make a lot more sense.



If you change name to id, as in your example - use:

document.getElementById('imgMain').src =

However, are your sure name is invalid? Name is invalid for certain elements but, img and a tags almost always can have names.Thanks. That did the trick.

Using the following doctype, 'name' does not validate, at least not in the img tag as is used in this example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Also, you probably shouldn't be using xhtml anyway.And why do you say that?


Oh, and I think I get the other part now too. No, there is no preloading involved in the code from my last post.Super.

Thanks for the help!

mwinter
12-28-2006, 01:29 AM
Using the following doctype, 'name' does not validate, at least not in the img tag as is used in this example.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


The name attribute was only added to HTML 4.01 as a compatibility feature, though it's more than that for some elements like form controls (input, textarea, etc.), object elements (in the context of forms, which is rare), param elements, and meta elements. It was essentially an identifier like the id attribute, but Netscape were playing silly buggers implementing proprietary, presentational features rather than the W3C Recommendations. The name attribute was deprecated for non-essential uses in XHTML 1.0, and removed in later versions.





Also, you probably shouldn't be using xhtml anyway.

And why do you say that?

If you can't justify why you are using it, it's unlikely that you should be using it. :)

XHTML 1.0 is not better or newer[1]. In fact, it has a lot of baggage of which many people aren't aware; it's claimed that using XHTML now is a look to the future, but the ill-informed will get a nasty shock if the markup is served with a XML-based media type.

Unless you thoroughly understand XML, XHTML, and how the latter is actually processed by current browsers, just use HTML 4.01. You aren't missing anything. Even those that do understand those issues often stick to HTML - because they understand the issues.

Mike


[1] OK, it is, but only by a month. But, given that it has the same element set as HTML 4.01, that's meaningless.