Struggling to adjust the placement of social icon images in the footer. When I increase the height from 40px to 60px, the full image is visible, but I can't seem to reposition it within the section without altering the section size.
Below is the code causing my confusion. Any assistance would be greatly appreciated. CSS:
.footer {
position:fixed;
/*Opacity start*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.8;
/*Opacity end*/
left:0px;
bottom:0px;
height:40px;
width:100%;
background:#333333;
}
div.socialIcons ul li
{
display: inline-block;
vertical-align:top;
padding-right: 10px;
padding-bottom: 5px;
float: right;
}
div.footer a
{
color:#441111;
text-decoration:none;
}
div.footer ul
{
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
list-style-type: none;
}
div.footer p
{
text-align: center;
font-size: 75%;
padding-left: 10em;
padding-top: .5em;
color: #ECECEC;
}
HTML:
<div class="footer">
<!-- ***** Social media icons ***** -->
<div class="socialIcons">
<ul id="profile">
<li><a href="http://www.twitter.com/" title="Twitter"><img src="./design/twitter.jpg" alt="My Twitter" /></a></li>
<li><a href="http://www.pinterest.com/" title="Pinterest"><img src="./design/pinterest.jpg" alt="My Pinterest" /></a></li>
<li><a href="http://www.linkedin.com/" title="LinkedIn"><img src="./design/linkedin.jpg" alt="Me on LinkedIn" /></a></li>
</ul>
</div>
<p><i>©2013</i></p?>