Question

I have a pretty simple css layout for a plate of information, you can find it at : http://jsfiddle.net/ciel/pRq8Z/2/

It works fine in all browsers, but in IE, it has this awkward ‘offset’ of 65 to the .links section, and so it shows in the wrong place. Here on the jsfiddle, the flaw is visible, but it’s not that obvious – but in the entire webpage, it makes a pretty huge difference. The .links pane is padded wrong in IE.

Is there anything I can do about this retarded ‘offset’ that seems to come from nowhere in IE? (All versions, Even 9.0)

CSS RESET

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
body {
    font-family: 'Lucida Sans Unicode'; 
    font-size: 11px;
    background-repeat: no-repeat; 
    margin: 0px auto; 
    width: 960px; 
    position: relative; 
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colors to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

/* Remove the bullets on ordered and unordered lists. */
ol,ul { list-style:none; }

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove border on linked images. */
a img { border: none; }
a { outline: none; text-decoration: none; }
a:active, a:visited, a:link { text-decoration: none; }

:focus { outline: 0; }

/* Make sure that all input elements have default margins and padding. */
input { margin: 0; padding: 0; border: 0; }

Answer 1

Hm, I’m not sure but maybe using UL’s instead of DIV’s would somehow correct the issue… :)