When using Firefox, I noticed that the clickable area of the links in my footer is very small. The clickable area seems to be limited in both width and height, unlike in IE where it works fine. Any suggestions on how to fix this?
This is the code for my footer:
<div id="footer">
<ul>
<li>RKM Research and Communications, Inc. |</li>
<li>1039 Islington St |</li>
<li>Portsmouth, NH 03801 |</li>
<li>603.433.3982 |</li>
<li><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70191e161f30021b1d5d02150315110213185e131f1d">[email protected]</a>">email us</a></li>
</ul>
<ul class="copyright">
<li>© 2012 RKM Research and Communications, Inc. </li>
<li><a href="privacy.html">Privacy policy</a> </li>
<li><a href="terms.html">Terms of use</a></li>
</ul>
And here is the corresponding CSS:
div#footer ul li{
color : #036;
background-color : transparent;
display: inline
}
div#footer ul li a{
color : #115EAC;
text-decoration : none;
display:inline-block;
paddding:10px 20px;
}
.footer ul li a:hover{color:#F6901E;
text-decoration : underline;
}
I have also attempted to use a block style with a class, but it did not resolve the issue:
<li class="flink"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aec7c0c8c1eedcc5c383dccbddcbcfdccdc680cdc1c3">[email protected]</a>">email us</a></li>
</ul>
Here is the additional css:
.flink ul li a{
color : #115EAC;
text-decoration : none;
display:block;
paddding:10px 20px;
float:left;
}