Small and irritating indent in IE

liunx · Jan 11, 2008

See the image

(borders are there just to see if they were causing trouble, but they are not the problem)

I think the navigation div on the left is the one causing it, how to I get rid of the indent?

CSS:
<style type="text/css">

/********** Layout **********/

body{
margin 0;
padding: 0;
text-align:center;
background: #DDD;
}

#container{

margin: 20px auto;
padding: 0;
text-align:left;
width: 600px;
border: 1px solid #FFD9B3;
background: white;
}

#header{
margin-top: 20px;
}

#logo{
float:left;
}

#content{
clear: both;
}

#info{
margin-left: 165px;
padding: 10px 15px 10px 20px;
font-family: "times new roman", georgia, serif;
border-left: 1px solid orange;
}

h1{
margin-left:160px;
font-family: helvetica, arial, sans-serif;
}

h2 {
font-family: verdana, helvetica, arial, sans-serif;
}

#footer{
clear: both;
padding: 0.5em;
color: #E67300;
background: #FFD9B3;
}
/********** Layout **********/

/********** Main Nav **********/

#navList
{
border: 0;
margin: 0;
padding: 0 0 0 2px;
list-style-type: none;
text-align: center;
}

#navList li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navList li a
{
background: #fff;
width: 118px;
height: 18px;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
padding: 0;
margin: 0;
color: #006699;
text-decoration: none;
display: block;
text-align: center;
font: 14px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#between{
border-left: 1px solid #CCC;
}

#navList li a:hover
{
color: #000;
background: #CCC;
}

#navList a:active
{
background: #c60;
color: #fff;
}

#navList li#current a
{
background: #006699;
border: 1px solid #006699;
color: #fff;
font-weight: bold;
}

/********** Main Nav **********/

/********** Sub Nav **********/

#subNav{
width: 160px;
float: left;
padding: 0;
margin-left: 5px;
border: 1px solid black;
}

#subNav ul
{
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid #FFD9B3;
}

#subNav ul li
{
list-style: none;
margin: 0;
padding: 1px;
border-top: 1px solid #FFD9B3;
}

#subNav ul li a
{
text-decoration: none;
color: black;
font-size: 10px;
font-family: verdana, helvetica, arial, sans-serif;
}

/********** Sub Nav **********/

</style>

HTML:
<body>


<div id="container">


<div id="header">
<img id="logo" src=http://www.webdeveloper.com/forum/archive/index.php/"assets/logo.gif">
<h1>Harvest Link International</h1>
</div>


<div id="navBar">
<ul id="navList">
<li ><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm" title="Go to Home">Home</a></li>
<li><a id="between" href=http://www.webdeveloper.com/forum/archive/index.php/"about.htm" title="Company History">About Us</a></li>
<li id="current"><a id="between" href=http://www.webdeveloper.com/forum/archive/index.php/"products.htm" title="A wide range of products">Products</a></li>
<li><a id="between" href=http://www.webdeveloper.com/forum/archive/index.php/"new.htm" title="New!">What's New</a></li>
<li><a id="between" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.htm" title="Contact Us">Contact</a></li>
</ul>
</div>



<div id="content">

<div id="subNav">
<h4>Prima Products<h4>

<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Stack Chair Series</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Stack Chair with casters</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Matrix Table Series</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Beam Seating Series</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Tilt-up Beam Seating Series</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Office Seating Series </a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Auditorium Seating Series</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Cafeteria Seating Series</a></li>
</ul>

</div>

<div id="info">

<h2>Prima</h2>

<p>The PRIMA Collection is primarily designed to meet the demand and needs for ergoromic, comfortable and aesthetics seating system. With comfort and a friendly environment in mind, the PRIMA Collection is specifically designed as a system for meeting, training and conference need as well as public seating and dining applications.

It is also a system chair with a D.I.Y concept in mind with the minimum use of tools to assemble any of the PRIMA products. The PRIMA products are designed to change to the need according to the working space and environment with ease and most important of all, it is mobile and helps to save space whether in use or stored environment with ease and most important of all, it is mobile and helps to save space whether in use or stored away. With a wide selection of features and options, the functionality of the PRIMA Collection is being enhanced.

</p>

</div>

</div>


<div id="footer">
Copyright 2005 Harvest Link International Pte Ltd.
</div>


</div>

</body>

I'm doing this for a school "group" project btw. Thanks!I believe this is the three-pixel jog.

<a class="postlink" href="http://positioniseverything.net/explorer/threepxtest.html">http://positioniseverything.net/explore ... xtest.html</a>

It seems you can just holly-hack it and that clears everything up.Thanks mike! Argh why is IE making css full of bugs..

IE hate +10

edit: oh yeah, I fixed it

Thanks mike! Argh why is IE making css full of bugs..

IE hate +10
You know, it's funny... I've been doing CSS for less than a year, and except in some very weird situations, I've stopped being troubled by IE. There's just a short mental list of things that I automatically do as preventative measures-- you know, display:inline all floats, avoid widths and padding on the same element... if widths are messing up, try the holly-hack and display: relative... if that fails, wrap everything in width:100% divs until it works.

Yeah. But I know how frustrating it can be. There's some angry messages on this board from me when I was first starting out.

edit: oh yeah, I fixed it

Sweet.

Small and irritating indent in IE

liunx

Guest