Forum Moderators: not2easy
Here's the html, all the css validates fine:
<!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">
<link rel="stylesheet" type="text/css" href="test5.css">
<link rel="stylesheet" type="text/css" href="topmenu.css">
<link rel="stylesheet" type="text/css" href="header.css">
<link rel="stylesheet" type="text/css" href="body.css">
<link rel="stylesheet" type="text/css" href="accountselector.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="animatedcollapse.js">/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
animatedcollapse.addDiv('MyAccount', 'fade=0,speed=400,group=AccountDiv')
animatedcollapse.addDiv('HelpAndSupport', 'fade=0,speed=400,group=AccountDiv,persist=1,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>
<title></title>
</head>
<body>
<div id= "wrapper">
<div id="accountselector-wrapper">
<div id= "accountselector-home">Personal</div>
<div id= "accountselector-business">Business</div>
<div id= "accountselector-spacer"> </div>
</div>
<div id= "headerwrapper">
<div id="headerwrapper-left">
<div id= "headerwrapper-left-logo">US Sonet Logo</div>
<div id= "headerwrapper-left-navigation">
<div id= "navmenu">
<ul>
<li><a href="">Internet</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">Telephone</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">Television</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">About Us</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">FAQ</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id= "headerwrapper-left-banner">US Sonet Banner</div>
</div>
<div id= "headerwrapper-right">
<a href="#" rel="toggle[MyAccount]" data-openimage="ManageMyAccountGrey.png" data-closedimage="ManageMyAccountBlue.png"><img src="ManageMyAccountGrey.png" border="0"/></a>
<div id="MyAccount">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>
<b></b>
<a href="#" rel="toggle[HelpAndSupport]" data-openimage="HelpAndSupportGrey.png" data-closedimage="HelpAndSupportBlue.png"><img src="HelpAndSupportGrey.png" border="0"/></a>
<div id="HelpAndSupport">
The dog (Canis lupus familiaris) is a domesticated subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures.
</div>
</div>
</div>
<div id="bodywrapper">
<div id="bodywrapper-leftwrapper">
<div id="bodywrapper-leftwrapper-subnav"><p>Link1</p><p>Link2</p><p>Link3</p></div>
<div id="bodywrapper-leftwrapper-news" >News</div>
</div>
<div id="bodywrapper-rightwrapper">
<div id="bodywrapper-rightwrapper-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p></div>
</div>
</div>
</div>
<div id= "footer">Test Footer</div>
</body>
</html>
Thanks in advance.
1. Line 91, Column 52: Attribute "DATA-OPENIMAGE" is not a valid attribute
…="toggle[MyAccount]" data-openimage="ManageMyAccountGrey.png" data-closedimag
Exactly as it says, on line 91 you have an element with attribute data-openimage, which is not a valid attribute. Solution: remove that attribute. Note, if you have JavaScript that is looking for this attribute, then it may break that functionality.
2. Line 91, Column 95: Attribute "DATA-CLOSEDIMAGE" is not a valid attribute
…MyAccountGrey.png" data-closedimage="ManageMyAccountBlue.png"><img src="Manag
Same thing as above. Remove the data-closedimage attribute.
3. Line 91, Column 163: Attribute "BORDER" is not a valid attribute. Did you mean "border"?
…rc="ManageMyAccountGrey.png" border="0"/></a>
I suspect that error might go away once you fix the first 2. However, note that "border" is presentational, so you should define that in your CSS, not as an HTML attribute.
4. Line 91, Column 166: NET-enabling start-tag requires SHORTTAG YES
…"ManageMyAccountGrey.png" border="0"/></a>
You are using XHTML style img tag (including the closing /). But you're serving the page as HTML 4.01. So just remove the slash.
5. Line 91, Column 166: required attribute "ALT" not specified
…"ManageMyAccountGrey.png" border="0"/></a>
Images must have an alt attribute to be valid.
Page works fine with all of those in the browsers I have checked it with, but if I don't have that attribute shown the images fail to load on the menu style I have set.
When the image is clicked it is supposed to swap out images and pull the menu either up or down. If I take out that function the image simply fails to load period.
Guess my main question with regards to that is how else would I do it so that it validates properly then?
but I still am not seeing how the data-closedimage is popping up the flag,
If you don't care about whether it validates, then it doesn't really matter. It will not cause any problems, as browsers will simply ignore the attributes when rendering the markup.
Alternatively, if you have JavaScript that depends on these invalid attributes, then the best solution would be to use JavaScript to inject those invalid attributes as well. In other words, keep your markup clean, then use JavaScript to find that <a> element and assign it's data-openimage and data-closeimage attributes.
