I'm encountering an issue while trying to implement the footer for my website.
I have included two <ul> lists within the inner_footer as shown in the code snippet below. However, when I zoom in, the <ul> list inside the div element becomes invisible. It appears to be a float-related problem, but I can't seem to pinpoint the exact cause.
HTML:
<div class="grid_16">
<div class="footer">
<div class="inner_footer">
<ul>
<li>Some content</li>
</ul>
<div>
<ul>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
<li><a>Link 4</a></li>
<li><a>Link 5</a></li>
<li>Copyrights</li>
</ul>
</div>
</div>
</div>
CSS:
.footer {
height:105px;
position:relative;
top:0;
width:100%;
}
.inner_footer {
background:url(../images/layout_img/nav.jpg) 0 center repeat-x;
font-size:12px;
border-radius:4px;
position:relative;
width:inherit;
height:31px;
margin:0 auto;
}
.inner_footer ul {
margin:0;
}
.inner_footer ul li {
color:#FFF;
font-family:calibri;
font-size:13px;
list-style-type:none;
line-height:31px;
text-decoration:none;
padding:0 10px;
}
.inner_footer ul li a img {
margin:2px 0 0 20px;
}
.inner_footer ul li a {
color:#FFF;
float:left;
font-family:calibri;
font-size:13px;
list-style-type:none;
line-height:31px;
text-decoration:none;
padding:0 10px;
}
.inner_footer div {
float:right;
}
.inner_footer div ul li a {
color:#FFF;
float:left;
font-family:calibri;
font-size:13px;
list-style-type:none;
line-height:31px;
text-decoration:none;
padding:0 10px;
}
.inner_footer div ul li {
color:#FFF;
float:left;
font-family:calibri;
font-size:13px;
list-style-type:none;
line-height:31px;
text-decoration:none;
padding:0 10px;
}