Using multiple Span Classes for one Object ?

lucidfox · #1 (**permalink**) 03-08-10, 09:03 PM

Hey all,

I'm running into a problem with some code on a page I'm creating. Here it is... (the <span class="class1"> is the new addition causing the problems) ...

HTML Code:

<span class="class1"><div class="Object166"><table border=0 cellspacing=0 cellpadding=0><tr><td valign="top" align="left"><div class="text-align:left;margin-left:0px;text-indent:0px;"><span class="textstyle1"><a href="#">Home</a><br>
</span></div></td></tr></table></div></span>

Basically it does what I want it to do but it does not pass validation (W3C). I recently added the class1 code because I need the link colors to vary from the rest of the page. To break it down...

The textstyle1 is defining my font, size, etc. and my class1 is defining the link attributes. I know it's suppose to be written differently but I can't figure out how to add multiple span classes to a single object and have it pass validation.

I need to do this to multiple objects throughout the page.

Any help would be great.

wirehopper · #2 (**permalink**) 03-09-10, 02:29 PM

It looks like this is a piece of page navigation.

HTML Code:

<span class="class1">
<div class="Object166">
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td valign="top" align="left">
<div class="text-align:left;margin-left:0px;text-indent:0px;">
<span class="textstyle1"><a href="#">Home</a>
<br>
</span>
</div>
</td>
</tr>
</table>
</div>
</span>

You might want to take a bit more time with the XHTML and style it so there are fewer tags, and more of the layout and design are in the CSS. The code below is just a sample, and I haven't tested it - but it might be easier to work with.

HTML Code:

<style type="text/css">
.navigation
{
color:#008;
background-color:#100;
}
.navigation ul
{
list-style:none;
}
.navigation ul li a
{
color:#fff;
}
.navigation ul li a:hover
{
color:#000;
}
</style>
<body>
<div class="navigation">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="next.htm">Next</a>
</li>
</ul>
</div> ...

Please post more code next time, it makes it easier to help you.

lucidfox · #3 (**permalink**) 03-09-10, 02:52 PM

Sorry about the lack of code. You can view the webpage here. If you validate the page on W3C you'll see it is failing specifically with the newly added span tags I mentioned above. Here is the error that W3C is giving...

Quote:

document type does not allow element "DIV" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag

Thank you for the help

wirehopper · #4 (**permalink**) 03-09-10, 02:57 PM

I think you need to change the navigation code, it's awkward. Validating it won't make it better.

CodeRobber · #5 (**permalink**) 03-15-10, 08:51 AM

I would personally get rid of that span element - its a block element so its basically the same as putting div's inside a <p> tag.

Just change it to another div and style it accordingly I think.