Links in footer are "cut in half" in Safari

[ThaVincy]

Hi,

On a site I'm designing, we have a <ul> of category-links in the right hand side of the footer at the bottom of the page. In Safari (other browsers are OK), the top half of the top "row" of links is cut in half when you first load the page.

This is the HTML:

<div id="footerright">
    <h3>categorie&euml;n</h3>
    <ul>
    	<li class="cat-item cat-item-4"><a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/category/inhouse"]http://www.demooistezwembaden.be/category/inhouse[/URL]" title="U wilt in alle rust en privacy het ganse jaar door genieten van uw zwembad. Wij selecteerden voor u de mooiste realisaties. Droom weg bij de prachtige beelden
en kies het binnenbad dat bij uw persoonlijke stijl past...">binnenbaden</a>
</li>
	<li class="cat-item cat-item-5"><a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/category/outdoors"]http://www.demooistezwembaden.be/category/outdoors[/URL]" title="U wilt onder de blote hemel genieten van uw zwembad, een eyecatcher in uw tuin. Wij selecteerden voor U de mooiste realisaties. Laat U inspireren en ontdek het buitenbad van uw dromen.">buitenbaden</a>
</li>
	<li class="cat-item cat-item-6"><a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/category/ponds"]http://www.demooistezwembaden.be/category/ponds[/URL]" title="Droomt U van een frisse duik in uw eigen zwemvijver? Wij selecteerden voor U de mooiste realisaties. Laat U verleiden door dat ene project dat zich beslist naadloos in uw tuin laat integreren.">zwemvijvers</a>
</li>
	<li class="cat-item cat-item-7"><a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/category/spa"]http://www.demooistezwembaden.be/category/spa[/URL]" title="Genieten van een weldoende massage of werken aan uw conditie. Een spa of een swimspa bij U thuis? Wij selecteerden alvast de mooiste realisaties. Ontdek de talloze mogelijkheden en vindt de oplossing die aan uw persoonlijke wensen voldoet.">spa's</a>
</li>
	<li class="cat-item cat-item-8"><a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/category/sauna"]http://www.demooistezwembaden.be/category/sauna[/URL]" title="De heilzame effecten van een weldoende saunabeurt en dit in alle privacy bij U thuis? Een traditionele sauna, een infraroodcabine of infrasauna? Wij selecteerden alvast de mooiste realisaties. U hoeft enkel nog te kiezen.">sauna's &amp; stoombaden</a>
</li>
	<li class="cat-item cat-item-9"><a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/category/furniture"]http://www.demooistezwembaden.be/category/furniture[/URL]" title="Alle berichten opgeslagen onder tuinmeubilair bekijken">tuinmeubilair</a>
</li>
	<li class="cat-item cat-item-11"><a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/category/poolhouses"]http://www.demooistezwembaden.be/category/poolhouses[/URL]" title="adverteren">poolhouses</a>
</li>
	<li class="cat-item cat-item-12"><a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/category/world"]http://www.demooistezwembaden.be/category/world[/URL]" title="Zwembaden over de grenzen heen. Als bron van inspiratie, om bij weg te dromen...">pools of the world</a>
</li>
    </ul>
    </div>

This is the CSS:

/* footer */
#footer {
background: #383c3d;
width: 100%;
margin: auto;
height: 215px;/* must match negative margin of #outer */
clear: both;
}
 
div#footercontent{
width: 900px;
margin: 0 auto;
color: #ffffff;
overflow: hidden;
padding-top: 25px;
font-size: 11px;
line-height: 2.2em;
}
 
    div#footerleft{
    width: 490px;
    float: left;
    padding-right: 24px;
    border-right: 1px solid #4f5556;
    margin-right: 25px;
    text-align: justify;
    }
 
    div#footerright{
    width: 310px;
    float: left;
    margin-bottom: 1em;
    text-align: left;
    }
 
    div#footerright ul{
    width: 350px;
    list-style-type: none;
    }
 
    div#footerright ul li.cat-item{
    float: left;
    width: 175px;
    }
 
    div#footerright ul li.cat-item a{
    color: #aab8bd;
    text-decoration: underline;
    }
 
    div#footerright ul li.cat-item a:hover{
    color: #aab8bd;
    text-decoration: none;
    }
 
    div#footerright br{
    clear: left;
    }

Any idea why these links are "cut" of at the top?

[ralph.m]

Hmm, that's not happening for me in Safari for Mac. What version of Safari is this, and on what platform? Could you perhaps post a screenshot of what you are seeing?

[Paul O'B]

Looks ok on Safari PC also.

I wouldn't be surprised if it isn't something to do with the "sifr" causing the problem. Maybe turn off sifr for testing and see if that narrows the cause down.