Weird footer style - html

Question

I'm using this style admin panel. When I make a big form as register page, the footer looks weird. Here is what it looks like. I'm a beginner with css so I hope someone can help me how to make this look right. The footer is supposed to look like the login, like here. I didn't change anything with the standard css. Here's my code:
<div class="login-overlay">
<div class="logo">
Log IP <br> <span class="smaller">test</span>
</div>
<div class="form-container shadow">
<div class="icon">
#yield('icon')
<div class="header">
#yield('name')
</div>
</div>
<div class="inputs">
#yield('login-content')
</div>
</div>
</div>
<footer class="mdl-mini-footer login-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">©Material Dashboard Theme</div>
</ul>
</div>
<div class="mdl-mini-footer__right-section">
<div class="mdl-logo">Terms and Conditions Apply</div>
</ul>
</div>
</footer>
When I inspect the footer, this it what it says:
.login-footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 30px;
background-color: white;
box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.1);
}
It also says more CSS but I guess this is the most important part. What is the best way to fix this?

Answer 1

Your question was somewhat unclear to me, If your problem just is that you think the footer is too tall, you should try the css max-width property like this:
.footer {
max-width:120px;
}
If you want a footer that sticks to the bottom you should check out Ryan Fait's CSS Sticky Footer. The code is very simple and it will force the footer to always stay at the bottom.
You wrap the footer in a .wrapper and use this css code:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
No matter what your problem is, you should really get rid of those </ul>-elements as some people commented.