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.

Themes

Discuss SilverStripe Themes.

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

Problem with footer links *solved*


Reply

558 Views

Avatar
Nachos

29 April 2013 at 5:45pm (Last edited: 11 May 2013 6:27am), Community Member, 18 Posts

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!