Hello,
I'm having a weird problem with the links in my footer. I'm starting to learn how code works so there might be an obvious mistake that I don't see. I would appreciate if you would have a quick look.
There are 8 images with links (link 1-8) and a footer text with another link (link 9). My problem is that the text before link 9 turns into a link for link 8 - which I don't want, it's supposed to be normal Text. This is the code of the footer.ss (I changed the links and text for privacy):
<ul id="navmenu">
<li id="link1"><a href="http://www.link1.com" target="_blank"><img src="/themes/TEST/images/FooterImages/image1.png" alt="" width="76" height="47" /></a></li>
<li id="link2"><a href="http://www.link2.com" target="_blank"><img src="/themes/TEST/images/FooterImages/image2.png" alt="" width="98" height="34" /></a></li>
<li id="link3"><a href="http://www.link3.com" target="_blank"><img src="/themes/TEST/images/FooterImages/image3.png" alt="" width="54" height="54" /></a></li>
<li id="link4"><a href="http://www.link4.com" target="_blank"><img src="/themes/TEST/images/FooterImages/deutscher_schulpreis.png" alt="" width="114" height="40" /></a></li>
<li id="link5"><a href="http://www.link5.com" target="_blank"><img src"themes/TEST/images/FooterImages/image5.png" alt="" width="130" height="24" /></a></li>
<li id="link6"><a href="http://www.link6.com" target="_blank"><img src="/themes/TEST/images/FooterImages/image6.png" alt="" width="153" height="33" /></li>
<li id="link7"><a href="http://www.link7.com" target="_blank"><img src="/themes/TEST/images/FooterImages/image7.png" alt="" width="126" height="43" /></li>
<li id="link8"><a href="http://www.link8.com" target="_blank"><img src="/themes/TEST/images/FooterImages/image8.png" alt="" width="57" height="55" /></li>
</ul>
<div class="footerTop">
<!-- -->
</div>
<p>Blah blah blah blah blah<br>
blah blah blah blah blah blah <a href="http://www.link9.com" title="link 9">Text for link 9</a></p>
Here is the css part:
#navmenu {
background: #fff url(../images/containerbg.gif) repeat-y;
padding-left: 12px;
}
#navmenu li {
font-family: Tahoma;
font-size: 12px;
padding: 8px;
list-style: none;
text-align: center;
float: left;
}
#Footer {
clear: both;
width: 960px;
height: 12.7em;
background: url(../images/footerBottom.gif) no-repeat bottom left;
text-align: center;
}
#Footer .footerTop {
width: 100%;
background: url(../images/containerbg.gif) repeat-y;
display: block;
height: 5.7em;
}
#Footer p {
color: #666;
font-size: 1.1em;
text-align: center;
position:relative;
top: -5px;
margin-top: -1.5em;
}
#Footer a {
color: #f39001;
text-decoration: none;
}
#Footer a:hover {
color: #f39001;
text-decoration: underline;
}
If I look at the code in chrome everything seems fine, but if I save the page on my hard drive to get a closer look this weird code shows up. Starting at link 7 it seems to wreak havoc:
<div id="Footer">
<ul id="navmenu">
<li id="link1"><a href="www.link1.com" target="_blank"><img src="./Home » Your Site Name_files/image1.png" alt="" width="76" height="47"></a></li>
<li id="link2"><a href="http://www.link2.com" target="_blank"><img src="./Home » Your Site Name_files/image2.png" alt="" width="98" height="34"></a></li>
<li id="link3"><a href="http://www.link3.com" target="_blank"><img src="./Home » Your Site Name_files/image3.png" alt="" width="54" height="54"></a></li>
<li id="link4"><a href="http://www.link4.com" target="_blank"><img src="./Home » Your Site Name_files/image4.png" alt="" width="114" height="40"></a></li>
<li id="link5"><a href="http://www.link5.com" target="_blank"><img src="./Home » Your Site Name_files/image5.png" alt="" width="130" height="24"></a></li>
<li id="link6"><a href="http://www.link6.com" target="_blank"><img src="./Home » Your Site Name_files/image6.png" alt="" width="153" height="33"></a></li><a href="http://www.link6.com" target="_blank">
</a><li id="link7"><a href="http://www.link6.com" target="_blank"></a><a href="http://www.link7.com" target="_blank"><img src="./Home » Your Site Name_files/image7.png" alt="" width="126" height="43"></a></li><a href="http://www.link7.com" target="_blank">
</a><li id="link8"><a href="http://www.link7.com" target="_blank"></a><a href="http://www.link8.com" target="_blank"><img src="./Home » Your Site Name_files/image8.png" alt="" width="57" height="55"></a></li><a href="http://www.link8.com" target="_blank">
</a></ul><a href="http://www.link8.com" target="_blank">
<div class="footerTop">
<!-- -->
</div>
</a><p><a href="http://www.link8.com" target="_blank">Blah blah blah blah blah<br>
blah blah blah blah blah blah</a><a href="http://www.link9.com" title="link 9">Text for link 9</a></p>
</div>
I really don't have a clue why this is happening. Any help would be appreciated! Thank you!
Edit: nevermind, figured it out - there were some </a> missing. Greetings from the noob!