CSS gurus!

[nickje]

Hi peeps!

 

I do hope I am being foolish and missing something very simple, but I have encountered a niggling problem with the school website I am developing. Basically when I load this page within Firefox/IE7 everything displays as I would expect, but when using IE6 there is a small (couple of pixel) gap between the menu bar and the main content section of the website. I hope the screenshots display this clearly - it is just to the right of the menu items / events boxes. From my limited knowledge I believe this could be resolved in CSS, but have no idea where to start! I have attached the files I have made in the hope that someone might be able to help me out with this! Many thanks in advance,

 

Nick

test.rar

[PaulBM]

IE6 is a real pain for adding extra whitespace. The box model behaves slightly differently.

 

I think I would try a CSS reset stylesheet first. There are several around that basically reset all tags margins and padding to 0. Then you're starting without any defaults that the browser may have.

 

This is my current cssReset.css

 

* { 
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}

address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym, img, fieldset {
border:0;
}

 

Also I seem to remember something about overflow: too, if only I could remember exactly what it was.

[nickje]

Hi Paul,

 

Thanks for the reply. I've just hit upon a solution, albeit a pretty messy one! Adding the following position rule seems to have done the job:

 

* html #side-bar {
 width: 15em;
 position: relative; /* IE 6 Positioning fix */
 left: 2px;
}

 

To my eyes that seems to have done the trick. Thanks once again,

 

Nick