PDA

View Full Version : Code won't validate, overlapping tags?

buffster
02-04-2008, 11:41 PM
The following won't validate, does anyone know another way I can achieve this?

This is what I am trying to achieve:

Verecundus suis plane verecunde<---- H2 and hyperlink
adquireret fragilis agricolae. ]<---- Paragraph and hyperlink
more... ]<---- Red text and hyperlink

(All text hyperlinked - everything is underlined/changes to red on rollover)

Many Thanks
BUffy, :thumbsup:


<a href="#"><h2 class="subText">Verecundus suis plane verecunde</h2>
<p class="bodyCopy">adquireret fragilis agricolae. <span class="redHeading">More...</span></p>
</a>
<a href=""><h2 class="subText">Suis plane verecunde</h2>
<p class="bodyCopy">adquireret fragilis agricolae. <span class="redHeading">More...</span></p>
</a>
_Aerospace_Eng_
02-05-2008, 12:24 AM
If IE6 supported :hover on anything it would be very easy to do however it doesn't. I haven't tested this in IE6 but good chance it will work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.news {
color:#000;
}
.news:hover, .over {
color:#000;
background:#F00;
}
.news a {
color:#000;
}
.redHeading {
color:#F00;
}
.news:hover .redHeading {
color:#FFF;
}
</style>
<script type="text/javascript">
document.getElementsByClassName = function(cl)
{
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++)
{
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}
startIt = function()
{
var thedivs = document.getElementsByClassName('news');
for (i=0; i<length; i++)
{
node = thedivs[i];
node.onmouseover=function()
{
this.className+=" over";
}
node.onmouseout=function()
{
this.className=this.className.replace(" over", "");
}
}
}
window.onload=startIt;
</script>
</head>
<body>
<div class="news">
<h2 class="subText"><a href="#">Verecundus suis plane verecunde</a></h2>
<p class="bodyCopy"><a href="#">adquireret fragilis agricolae. <span class="redHeading">More...</span></a></p>
</div>
</body>
</html>