Member Avatar for LogicWeb

I'm trying to correct some W3C validation errors found at www.logicweb.com

I'm not a designer by trade, but I learn quickly and would appreciate help on this.

The code used for the view packages button is below, and the one that caused W3C errors

<div id="view_packages">
		<h4><a class="view_packages_button" href="/services/hosting.php" >View Packages</a></h4>
	</div>

W3C Error
Line 283, Column 10: ID "view_packages" already defined.

Regardless, the button works both hovering (color change) and link works. If I change ID to class, I end up see the text over the button, and the hover color change becomes ineffective.

If I remove the text, it goes away yet hover still does not work at all.

Using below doctype

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

Thanks in advance.

1.gif 3.02 KB
  • 2 Contributors
  • 2 Replies
  • 85 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by LogicWeb

Recommended Answers

All 2 Replies

Member Avatar for ShawnCplus

You cannot have more than one element use the same ID, that is what is causing the error. IDs are meant to be unique identifiers, classes are meant to be reusable.
ie.,

#head h2.highlight{color:#FF0000;}
#body h2.highlight{color:#0000FF;}
h2.highlight{color:#00FF00;}
<div id="head">
   <!-- this will be red -->
   <h2 class="highlight">Hello World</h2>
</div>
<div id="body">
   <!-- this will be blue -->
   <h2 class="highlight">Hello World</h2>
</div>
<!-- This will be green -->
<h2 class="highlight">Hello World</h2>
Member Avatar for LogicWeb

Thanks for your help. I have changed it to class and within the css sheet changed # to . instead.

Thanks again.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.