Hey there, I've run into this issue twice now and I can't seem to find a solution for the second occurrence. The first time it happened with an image, I used max-height and width to prevent it from overflowing the div when zoomed in. But now, for the footer which contains links, none of the solutions seem to work.
I've experimented with position: absolute; and various other suggestions from Google, but after forty minutes of trying, I'm still stuck on this problem with no progress in sight.
#footer {
padding-top: 0.5%;
width: 98%;
height: 9%;
padding-left: 1%;
padding-right: 1%;
text-align: center;
background-color: #00FF1E;
}
#footer li {
max-width: 100%;
max-height: 100%;
display: inline;
padding: 1%;
background: #7e7e7e; /* Old browsers */
background: -moz-linear-gradient(top, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7e7e7e), color-stop(34%, #595959), color-stop(60%, #6d6d6d), color-stop(93%, #666666)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* IE10+ */
background: linear-gradient(to bottom, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e7e7e', endColorstr='#666666', GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
font-size: 30px;
word-wrap: break-word;
}
#footer a { display: inline-block; }
HTML:
<div id="footer">
<ul>
<li><a href="home.php" title="homepage"> Homepage </a></li>
<li><a href="signin.php" title="signin"> Signin </a></li>
<li><a href="playlist.php" title="playlist"> Playlist </a></li>
<li><a href="settings.php" title="settings"> Settings </a></li>
</ul>
</div>