2 ID's ok if one in a td?

HTML & CSS
1

Hi - I know I can’t have the same id twice on one page but it’s working when one is in a td and one in a div, like this:

<table>
<tr>
<td id=“btmnav”>
<a href=“http://amzn.to/VNNoXQ” target=“_blank”>Click here to see the best deals in Water Ionizers at Amazon</a>
</td>
</tr>
</table>

<div id=“btmnav”><?php include(“$rpath/1cde/btmnav.php”); ?></div>

Is this okay? You can see it in action here:

==> http://www.greensmoothie.com/zshop/vwater.php

(The tables are a relic from the distant past. They’re staying on the page. I know they shouldn’t be there. One day when time stops running away from me, I’ll remove them.)

thank you! - Val

2

No. ID’s are for single unique elements. If you want to specify an ID to style many elements you should be using the ‘class’ attribute - exactly like what you’ve done for your website (I cant see any duplicate ID’s but I can see duplicate classes).

For example this would be acceptable - however it is odd to assign the same class name to different tags. I think you would typically want same classes to both be either <td> or <div>, one or the other but not both. I don’t think there’s anything saying it’s not allowed but it will make things easier to code & understand.


<table>
<tr>
<td class="btmnav">
<a href="http://amzn.to/VNNoXQ" target="_blank">Click here to see the best deals in Water Ionizers at Amazon</a>
</td>
</tr>
</table>

<div class="btmnav"><?php include("$rpath/1cde/btmnav.php"); ?></div>

Reading this should help explain it a bit better than i can:

3

Consider if you have two of the same id in your page then which of then should <a href=“#btmnav”> jump to? Wich one should a JavaScript getElementById() call reference?

4

Ah Stephen thank you! I hadn’t thought of the href problem. And I see I do have in my header a js that Paul wrote:

var sfEls = document.getElementById(“btmnav”).getElementsByTagName(“LI”);

thanks too for the link Ryan :slight_smile:

5

Seems it’s more popular to use div structure nowadays. It’s more convenient to control the display. I’m trying to abandon the table structure when I work on a page.