Forum Moderators: not2easy
I made a footer (centered) with bunch of divs (with text links) that are displayed next to each other. Firefox renders the page perfectly (as always), IE8 on the other hand adds about 10px on the left of each div.
I can't seem to find the problem. I'm about to give up...
Thank you!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="page_footer_wrap">
<div id="footer_container">
<div id="br">
<li><a href="index.php?manufacturers_id=21">specifics</a></li>
<li><a href="index.php?manufacturers_id=40">specifics</a></li>
<li><a href="index.php?manufacturers_id=53">specifics</a></li>
<li><a href="index.php?manufacturers_id=17">specifics</a></li>
<li><a href="index.php?manufacturers_id=28">specifics</a></li>
<li><a href="index.php?manufacturers_id=13">specifics</a></li>
<li><a href="index.php?manufacturers_id=23">specifics</a></li>
<li><a href="index.php?manufacturers_id=29">specifics</a></li>
</div>
<div id="br">
<li><a href="index.php?manufacturers_id=38">specifics</a></li>
<li><a href="index.php?manufacturers_id=34">specifics</a></li>
<li><a href="index.php?manufacturers_id=43">specifics</a></li>
<li><a href="index.php?manufacturers_id=26">specifics</a></li>
<li><a href="index.php?manufacturers_id=47">specifics</a></li>
<li><a href="index.php?manufacturers_id=19">specifics</a></li>
<li><a href="index.php?manufacturers_id=42">specifics</a></li>
<li><a href="index.php?manufacturers_id=27">specifics</a></li>
</div>
<div id="br">
<li><a href="index.php?manufacturers_id=14">specifics</a></li>
<li><a href="index.php?manufacturers_id=44">specifics</a></li>
<li><a href="index.php?manufacturers_id=54">specifics</a></li>
<li><a href="index.php?manufacturers_id=15">specifics</a></li>
<li><a href="index.php?manufacturers_id=20">specifics</a></li>
<li><a href="index.php?manufacturers_id=37">specifics</a></li>
<li><a href="index.php?manufacturers_id=41">specifics</a></li>
<li><a href="index.php?manufacturers_id=31">specifics</a></li>
</div>
</div><!--/footer_container-->
</div><!--/page_footer_wrap-->
#br {
padding: 0px 0px 0px 0px !important;
float: left;
display:inline;
border: 0px yellow solid;
}
#page_footer_wrap {
background:#000;
width:100%;
height: 300px;
border: 0px solid red;
}
#footer_container {
margin: 0 auto;
width: 1070px;
border: 0px red solid;
position: relative;
color:#333 ;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
list-style-type:none;
}
[edited by: swa66 at 2:09 pm (utc) on Oct. 28, 2009]
[edit reason] Specifics removal, please see ToS and Forum Charter [/edit]
e.g.
- a id can one be once in every document.
- a <li> needs a <ul> or <ol> as parent
IE has traditionally handled the default margin and padding differently from other browsers esp. so on lists. I'm actually not sure what IE8 does as I start off any new project with: "* { padding:0 ; margin:0}" wiping those default settings off the table.
