February 2, 201016 yr Hi all, I am new here so sorry if this has been discussed before!! I have the following css & xhtml code for formatting a footer on a website. However, the ul and li elements seem to indent automatically. I have tried margin-left: 0px and text-align: left etc etc but cannot seem to get the following to all line up left. Please help. CSS <code> .holder { border-style: solid; border-width: 1px; border-color: black; } #footer { width: 960px; height: 100px; margin-top: 2px; margin-bottom: 2px; } #footer ul { width: 610px; height: 50px; } </code> And XHTML <code> <div class="holder" id="footer"> <ul class="holder"> home </ul> </div> </code> The container boxes just indent automatically.
February 2, 201016 yr A few things here: 1. You need to put your listed items within <li></li> tags 2. Are you using a css reset file? 3. To style your list elements you should use this css: #footer ul li { /* insert css code here */ } Tel
February 2, 201016 yr IE and Firefox have different default margins for ul and li tags. This code gets IE7 and Firefox exactly the same:- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test Page</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> body { margin: 0; background: #ddd; } .holder { background: olive; border-style: solid; border-width: 1px; border-color: black; } #footer { background: skyblue; width: 960px; height: 100px; margin-top: 2px; margin-bottom: 2px; } #footer ul { margin-left: 0px; margin-top: 0; background: lime; width: 610px; height: 50px; } #footer li { margin-left: -20px; background: pink; } </style> <!--[if IE]> <style type="text/css"> #footer li { margin-left: 20px; } </style> <![endif]--> </head> <body> <div class="holder" id="footer"> <ul class="holder"> <li>home</li> </ul> </div> </body> </html> Copy paste the above page on its own before integrating into your web page to see what's happening. I've added background colors to help see the positions and there is a conditional comment for IE with a different li margin-left. If IE8 is different, use another conditional comment.
Create an account or sign in to comment