<html>
<head>
<style>

body { margin: 0; }

#footer { background-color: #5A2; margin: 0 auto; text-align: center; }

#footer ul { margin: 0; }

#footer a { font-family: Verdana; text-decoration: none; }

#f-links { margin: 0 auto; }

#f-links li { display: inline; font-size: 12pt; list-style-type: none; padding: 0 0.5em; }

#f-links li a { font-family: Georgia; color: #FFF; }

#f-legal { margin: 0 auto; }

#f-legal li { display: inline; font-size: 10pt; list-style-type: none; padding: 0 0.5em; }

#f-legal li a { color: #000; }

#copyright { margin: 0 auto; font-size: 8pt; color: #252; }

</style>
</head>
<body>

<div id="footer">

<ul id="f-links">
<li><a href="#">About</a></li>
<li><img src="tilde.png" /></li>
<li><a href="#">Contact</a></li>
<li><img src="tilde.png" /></li>
<li><a href="#">Code of Conduct</a></li>
<li><img src="tilde.png" /></li>
<li><a href="#">Help</a></li>
<li><img src="tilde.png" /></li>
<li><a href="#">Advertise?</a></li>
</ul>

<ul id="f-legal">
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Copyright</a></li>
</ul>

<div id="copyright">(c) 2010 LoremIpsum LCC. All rights reserved.</div>

</div>

</body>
</html>

There is the html. The 2nd and 3rd lines seem very incongruent. How can I fix this?

2 answers

1
point
This was chosen as the best answer

set #footer ul to padding:0;

Answered over 8 years ago by Jude Hansen
  • Thank you, I thought it would be something trivial like that. I tried using a global reset, and it didn't do anything. CSS is tricky. Austin Kelley Way over 8 years ago
  • a reset will do just what Jude says- will set the padding to 0.... Jesse Chase over 8 years ago
0
points

use a master reset! This is what I use, and it will fix it: LINK

Answered over 8 years ago by Jesse Chase
  • Well, I said I tried using a reset. Must not have been a good one though. Austin Kelley Way over 8 years ago