Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Themes /

Discuss SilverStripe Themes.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Problem with footer links *solved*


Go to End


1901 Views

Avatar
Nachos

Community Member, 22 Posts

29 April 2013 at 5:45pm

Edited: 11/05/2013 6:27am

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!