CSS Divs wont line-up correctly in IE

I've not tested this in the New IE, but im having problems with cross browser. Works ok in, Firefox, Google chrome, opera and on the iphone.

Ive not uploaded this yet to my server so no preview is there.

Ive coded the divs in place and work fine for the browsers above but when i vist and check in IE the main top Divs wont line up. Whenever i use a margin of about 15px on the left and the rest 0px so like this

#Banner-Nav {
Float: left;
Margin: 0px 0px 0px 10px;
width:500px;
height:150px;
}

then it goes 20px insted of the 10px, well seams that way

 

I don't fully understand what you're saying when you mention 20px and 10px but you seem to be suffering what is called "float drop".

This happens when there isn't enough room for all the columns. The total width of the columns must be less than or equal to the space available (either the browser window or the enclosing block). The width of a column is the width you set plus the horizontal components of the margin, border, and padding. If you're using percentages rounding errors can cause the problem.

IE6 and earlier has a "double margin" bug. Under some conditions it doubles the margin applied to a floated element.

IE6 and earlier also sometimes adds a 3px gap between a floated column and a non-floated column - so this might be something to look into.

IE sometimes makes a floated column wider if it contains italic text!!!

One problem I've had in IE is when there are three or more columns. In this case I found that the total width of the columns must be LESS THAN the space available by 1 pixel for each column. Say the space available is 1000px and there are four columns - the total column width must be 996 or less.

To accommodate these IE problems don't try to use every available pixel and leave a bit of free space.

Credit for all this must go to David Sawyer McFarland and his excellent book "CSS - The Missing Manual".

 

Before checking various browsers see if there are any errors with the w3c validator and for the stylesheet. Just a missing closing element could cause problems.

 

You might want to use conditional statements

if IE then
http://www.unintentionallyblank.co....net-explorer-then-do-something-else-a-how-to/
Targeting IE Using Conditional Comments
How To Create an IE-Only Stylesheet | CSS-Tricks
Hack-free CSS for IE - Arve Bersvendsen
-
hope this helps
falcon

 

give property 'overflow: hidden' to the div outside of #Banner-Nav

coz it's taking width of #Banner-Nav + margin


hope it help