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're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Themes /

Discuss SilverStripe Themes.

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

Problem with footer links *solved*

Go to End



Community Member, 22 Posts

29 April 2013 at 5:45pm

Edited: 11/05/2013 6:27am


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 (I changed the links and text for privacy):

<ul id="navmenu">
     <li id="link1"><a href="" target="_blank"><img src="themes/TEST/images/FooterImages/image1.png" alt="" width="76" height="47" /></a></li>
     <li id="link2"><a href="" target="_blank"><img src="themes/TEST/images/FooterImages/image2.png" alt="" width="98" height="34" /></a></li>
     <li id="link3"><a href="" target="_blank"><img src="themes/TEST/images/FooterImages/image3.png" alt="" width="54" height="54" /></a></li>
     <li id="link4"><a href="" target="_blank"><img src="themes/TEST/images/FooterImages/deutscher_schulpreis.png" alt="" width="114" height="40" /></a></li>
     <li id="link5"><a href="" target="_blank"><img src"themes/TEST/images/FooterImages/image5.png" alt="" width="130" height="24" /></a></li>
     <li id="link6"><a href="" target="_blank"><img src="themes/TEST/images/FooterImages/image6.png" alt="" width="153" height="33" /></li>
     <li id="link7"><a href="" target="_blank"><img src="themes/TEST/images/FooterImages/image7.png" alt="" width="126" height="43" /></li>
     <li id="link8"><a href="" target="_blank"><img src="themes/TEST/images/FooterImages/image8.png" alt="" width="57" height="55" /></li>
<div class="footerTop">
    <!-- -->
<p>Blah blah blah blah blah<br>
blah blah blah blah blah blah <a href="" 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;
							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="" target="_blank"><img src="./Home » Your Site Name_files/image1.png" alt="" width="76" height="47"></a></li>
     <li id="link2"><a href="" target="_blank"><img src="./Home » Your Site Name_files/image2.png" alt="" width="98" height="34"></a></li>
     <li id="link3"><a href="" target="_blank"><img src="./Home » Your Site Name_files/image3.png" alt="" width="54" height="54"></a></li>
     <li id="link4"><a href="" target="_blank"><img src="./Home » Your Site Name_files/image4.png" alt="" width="114" height="40"></a></li>
     <li id="link5"><a href="" target="_blank"><img src="./Home » Your Site Name_files/image5.png" alt="" width="130" height="24"></a></li>
     <li id="link6"><a href="" target="_blank"><img src="./Home » Your Site Name_files/image6.png" alt="" width="153" height="33"></a></li><a href="" target="_blank">
     </a><li id="link7"><a href="" target="_blank"></a><a href="" target="_blank"><img src="./Home » Your Site Name_files/image7.png" alt="" width="126" height="43"></a></li><a href="" target="_blank">
     </a><li id="link8"><a href="" target="_blank"></a><a href="" target="_blank"><img src="./Home » Your Site Name_files/image8.png" alt="" width="57" height="55"></a></li><a href="" target="_blank">
     </a></ul><a href="" target="_blank">
<div class="footerTop">
    <!-- -->

</a><p><a href="" target="_blank">Blah blah blah blah blah<br>
blah blah blah blah blah blah</a><a href="" title="link 9">Text for link 9</a></p>


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!