HTML hyperlinked images moving etc.

Question

This is the site I'm working on and the CSS is in the same directory called saucy.css (sorry I can only post one hyperlink).

First of all, apologies for my awfully invalid HTML and CSS. I promise I'm going to fix it all once the site is up and running! However if this is causing the problems of course I will do it now.

My current problems:

• When I add a hyperlink to the Twitter icon it moves to the top left as it is now. As you can see from the HTML it should be under the main box (in line with the copyright logo etc.) to the left.
• I have this strange text appearing at the bottom of my page: ​. I am told it is to do with not being able to display a character properly, but I can't see what character it could be.
• When I try and edit the CSS to remove the link formatting on the navbar, nothing happens.
• I am unable to add a border to the box in the centre of the page. As the drop downs are part of the table, I only want a border for the or which is grey. Is it possible to do this?

Thank you so much for reading!

Answer 1

Wow, it looks like you rushed to put this together... You really should take your time with it so you don't make mistakes. I see that you've inverted a TD tag where there should be a TR tag. I also see that you've closed a TR tag and decided to just use a TD tag instead, which i'm not sure if that's intentional or not lol. I'm going to comment on some of your code and ask you if it was intentional or not, but I will clean it up a bit first.

You should never just run all your code together, that's very bad practice and will cause you to forget to close tags. Always indent when you can. Whether you can write colspan=4 or not is irrelevant, you should always put it in quotes like this: colspan="4" and for all other properties.

For the level you're at, you should be using xhtml. This will force the browsers to use the standardizations and prevent your site from looking "weird" on one browser but perfect on another.

Here is your code that I commented on. You really need to go through it and match ALL of your opening/closing tags correctly. You've made a nice mess for yourself lol. Have fun.

<table align="center" width="60%" cellspacing="0" cellpadding="5"> 
 <tr>
  <td colspan=4>
   <div class="logo">saucydares</div> 
   <div class="slogan">fun and games for couples everywhere!</div>
   </td>
 </tr>
 <tr class="links"> 
  <td class="links" colspan=4 width="100%" align=center><a href="#">HOME</a> | <a href="/about.html">ABOUT</a> | <a href="#">ARCHIVE</a> | <a href="#">DARE BOX</a></td> 
 </tr> 
 <tr>
  <td colspan=4 class="main" cellpadding=10> 
   <br><br> <!-- Breaks should always be <br /> XHTML only //-->


    <table height="270px" width="450px" align=center cellpadding="5"> 
        <tr class="box">
         <td align=center>
          <div id="dare">Welcome to Saucy Dares! To get going, adjust the settings below and click "Dare me!".</div>
         </td>
        </tr>
        <!-- There is no TR tag here. 
             Was it on purpose? //-->
        <td height="20px" align=right cellpadding="0">
            <form name="form"> 

            <select id="mode" name="mode"> 
            <option value="classic">Classic Collection</option> 
            <option value="long">The Long Game</option> 
            </select> 

            <select name="player"> 
            <option value="him">For him</option> 
            <option value="her">For her</option> 
            <option value="double">Double dare</option> 
            </select> 

            <input type="button" value="Dare me!" onClick="get();"> 
            </form> 
         </tr> <!-- You closed the parent TR before the child TD //-->
        </td>  <!-- This TD no longer applies to anything because you
                    closed its parent row //-->
    </table> 


<br><br> <!-- Breaks should always be <br /> XHTML only //-->
<b>Latest news</b> 
<UL> 
<LI> Welcome to the new look Saucy Dares! Now you can take things to the next level with the new game mode, The Long Game. You can also both get involved by selecting 'Double dare' from the second drop down box. Read more about the new game modes on the <a href="/about.html">About page</a>.
<LI>Dares now appear without needing to refresh the page meaning your settings aren't reset every time you view a new dare.
<LI> What do you like about the new design? What is still missing? Let us know on Twitter! You can also follow @SaucyDares to receive updates whenever new features and dares are added.
<LI> You can now share your favourite dares with us by putting them in the <a href="/darebox.html">Dare Box</a>!
</UL> 
 </tr> <!-- Because you already closed the TR in your
            child table, this is going to cause some
            weird effects lol //-->
</td> <!-- More weird effects are going to occur until
           you match the correct closing tags to
           their opening tags //-->

<tr class="footer"><img src="facebook_border.gif">&nbsp;

<a href="http://www.twitter.com/saucydares" target="_blank"><img src="twitter_border.gif" alt="Twitter" border="0"></a> 

</td><td width="33%" align=center>&copy; 2010 Saucy Dares</td><td width="33%" align=right>Click <a href="mailto:[email protected]">here</a> to report an error</td></tr> 
</table>