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


634 Views

Avatar
Nachos

Community Member, 18 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!