Jump to:

1384 Posts in 493 Topics by 522 members


SilverStripe Forums » Themes » Problem with footer links *solved*

Discuss SilverStripe Themes.

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

Page: 1
Go to End
Author Topic: 547 Views
  • Nachos
    Community Member
    18 Posts

    Problem with footer links *solved* Link to this post


    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>
    <div class="footerTop">
    <!-- -->
    <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;
                         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">
    <!-- -->

    </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>


    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!

Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.