Question

Having an issue with the following HTML:

iDreamMobile

//

// Perform setup after the document loads:
$(function() {

    // Add a class to caption elements:
    $('.caption').addClass('darkBlue');

    // Generate tabs:
    $('#content').tabs();

    // Add a click event to the message button:
    $('#messageButton').click(showHideMessage);

    // Initially hide the message:
    $('#message').hide();


});

// This function is called when the button is clicked.
function showHideMessage(e) {
    $('#message').toggle('slow');
}


// ]]>
</script>
<link rel="stylesheet" href="assets/jquery.tabs.css" type="text/css" media="print, projection, screen" />

<style type="text/css">
    #messageButton {
    font-size: small;
    color: #DDDDDD;
    background-color: #333333;
    width: 100%;
    }

    .darkBlue {
    color: #27537a;
    }

    div#home {
    color: #a3a3a3;
    font-family: Helvetica;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    }

    div#home a {
    color: #a3a3a3;
    font-family: Helvetica;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    }

    div#idb a {
    opacity: 0.8;
    position: relative;
    bottom: 64px;
    }

</style>

<div id="content">
<ul>
    <li><a href="#home"><span style="font-family:helvetica; font-weight: bold; font-size:12px; color:#DD44DD;">Home</span></a></li>
    <li><a href="#a"><span style="font-family:helvetica; font-weight: bold; font-size:12px; color:#3333BB;">iDB</span></a></li>
    <li><a href="#b"><span style="font-family:helvetica; font-weight: bold; font-size:12px; color:#33DD99;">iDT</span></a></li>
    <li><a href="#c"><span style="font-family:helvetica; font-weight: bold; font-size:12px; color:#B0FF5E;">iDV</span></a></li>
    <li><a href="#d"><span style="font-family:helvetica; font-weight: bold; font-size:12px; color:#FFCC66;">iDS</span></a></li>
</ul>
<div id="home" align="center" style="font-family:helvetica; font-weight: bold; font-size:12px; color: #a3a3a3; text-align: center; text-decoration: none;">
    <table width="100%" cellpadding="20" cellspacing="20">
    <tr>
    <td>
    <div id="link_to_a" style="font-family:helvetica; font-weight: bold; font-size:12px; color: #a3a3a3; text-align: center; text-decoration: none;">
    <a href="#a"><img src="assets/a_btn_57.png" /><br />Page A</a>
    </div>
    </td>
    <td>
    <div id="link_to_b" style="font-family:helvetica; font-weight: bold; font-size:12px; color: #a3a3a3; text-align: center; text-decoration: none;">
    <a href="#b"><img src="assets/b_btn_57.png" /><br />Page B</a>
    </div>
    </td>
    </tr>
    <tr>
    <td>
    <div id="link_to_c" style="font-family:helvetica; font-weight: bold; font-size:12px; color: #a3a3a3; text-align: center; text-decoration: none;">
    <a href="#c"><img src="assets/c_btn_57.png" /><br />Page C</a>
    </div>
    </td>
    <td>
    <div id="link_to_d" style="font-family:helvetica; font-weight: bold; font-size:12px; color: #a3a3a3; text-align: center; text-decoration: none;">
    <a href="#d"><img src="assets/d_btn_57.png" /><br />Page D</a>
    </div>
    </td>
    </tr>
    </table>
</div>
    <div id="a" align="center">
        <img src="assets/slide_image.png"><br />
        <a href="#"><img src="assets/add_image_48.png" /></a>&nbsp;&nbsp;
        <a href="#"><img src="assets/add_music_48.png" /></a>&nbsp;&nbsp;
        <a href="#"><img src="assets/add_note_48.png" /></a>
    </div>
    <div id="b" align="center">
        <table style="font-family:helvetica; font-size:12px;" cellspacing="5px" cellpadding="5px">
        <tr style="font-weight:bold;">
        <td>Task</td>
        <td>Due Date</td>
        <td>Notes</td>
        </tr>
        <tr>
        <td>placeholder</td>
        <td>placeholder</td>
        <td>placeholder</td>
        </tr>
        </table>
    </div>
    <div id="c" align="center">
    <iframe src="flash_video.swf" frameborder="0" width="320px" height="240px"> </iframe>
    </div>
    <div id="d">
        <div id="ds_postTo" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:18px;">Share your content on:</div>

various social networking links

Or log into our own social network.

Menu
This is the options menu.

The links in the top list work flawlessly for getting to the contents of DIVs a thru d, but the links inside of the “link_to_a” thru “link_to_d” are not working…

I’m probably doing something dumb here – any pointers?

Answer 1

Your code is fine, except that some tags are not closed.

The W3C validator will help you to debug it: http://validator.w3.org/#validate_by_input

Also these links are supposed to scroll your page to certain divs (right?). So you will see the effect only if you reduce your browser window.