The Evils of Internet Explorer

[JingleBells]

I've just been tinkering with my website - http://www.pete-b.co.uk/ and have been getting extremely pissed off by the "phantom gaps" that IE seems to insert on the side menu and bottom bit with the time as this screenshot shows - http://www.pete-b.co.uk/pics/evilIE.jpg (note red bits). It should look like this - http://www.pete-b.co.uk/pics/niceFF.jpg I've removed all the padding from the elements and the gaps still appear. Any help would be appreciated as I cannot find what the problem is, the site has been tested in FF1.0 Windows and Konqueror & Epiphany on Linux (not sure what version). My CSS is

body {
background-color: #FF9;
}

ul {
margin:0px;
padding: 0px;
list-style-type: none;
border: 2px solid #ccc;
border-bottom: none;
background: #F00;
}

li {
margin: 0px;
padding: 0px;
text-align: center;
background: #FF9;
color: #009;
width: 7.5em;
text-decoration: none;
border-bottom: 2px solid #ccc;
letter-spacing: 1px;
font: normal normal 500 medium arial, sans-serif;
}

ul li a {
margin: 0px;
padding: 0px;
color: #009;
text-decoration: none;
display: block;
}

ul li a:hover {
color: #009;
background: #ccc;
}


#outerContentPane {
position: absolute;
top: 10px;
left: 10em;
width: 80%;
border: groove #FF9;
background-color: #009;
margin-bottom:50px; 
}

#marginned {
background-color: #FF9;
border: 0.5em solid #009;
padding: 0px 10px;
}

#outerbox {
position: absolute;
top: 10px;
left: 4px;
border: groove #FF9;
background-color: #009;
padding: 0.5em;
}


#bottomBox {
position: absolute;
top: 27em;
left: 4px;
border: groove #FF9;
background-color: #009;
padding: 0.5em;
}

.hide { display: none ; }
.centered { text-align: center; }

 

[JingleBells]

Fixed It
Had to use some silly hack to make IE work.

 

[Gef]

No offence, but thats one ugly lookin site

 

[JingleBells]

Why does no-one like my colour scheme

Could you at least tell me some decent colours

 

[Gef]

body {
 background-color: #A9A7A8;
font-family: Tahoma;
}

a:link, a:visited {
 color: #006; 
}

a:active {
 color: #f60;
}

a:hover {
 text-decoration: none;
}

ul {
 list-style: none;
 padding:0px;
 width: 7.5em;
 margin: 0px;
 border: 0.1em solid #000000;
 border-top: none;
 background: #BFC1D2;
 display:block;
 font: normal normal 500 medium arial, sans-serif;
 text-align:center;
 color: #fff;
}
li {
 margin: 0px;
 padding: 0px;
 border-top: 0.1em solid #ccc;
 border-bottom: 0px;
}

ul li a img {
 border: 0px;
 padding: 0px;
 margin: 0px;
}

#clock, #calendar {
 text-align:center;
 width:7.5em;
 padding: 0.5em 0px;
}

ul li a {
 color: #006;
 width: 7.5em;
 text-decoration: none;
 font: normal normal 500 medium arial, sans-serif;
 letter-spacing: 1px;
 padding: 0.5em 0px;
 display: block;
}

ul li a:hover {
 color: #ffffff;
 background: #222222;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left;}
* html ul li a { height: 1%;}
/* End */

#leftPane {
 float: left;
 width:8em;
}

#topBox {
 border: groove #fff;
 background-color: #006;
 padding: 0.5em;
 margin-bottom: 50px;
}

#bottomBox {
 border: groove #fff;
 background-color: #006;
 padding: 0.5em;
}

#rightPane {
 margin-left: 9.5em;
 border: groove #fff;
 background-color: #006;
 margin-bottom:10px; 
}

#content {
 background-color: #BFC1D2;
 border: 0.5em solid #006;
 padding: 0px 10px;
 padding-bottom: 10px;
}

.hide { display: none ; }
.centered { text-align: center; }


@media print {
 #leftPane { display:none }
 #rightPane {border: 0; margin: 0; padding: 0; }
 #content { border: 0; padding:0; margin: 0; padding: 0; }
 #body { margin: 0; padding: 0; }
}

Hows that? Not a vast improvment but a little better I think

 

[Shovel]

Colour Scheme Generator - http://wellstyled.com/tools/colorscheme2/index-en.html

 

[Danya]

Why does no-one like my colour scheme

Could you at least tell me some decent colours

Can I suggest not baby-vomit yellow?

 

[JingleBells]

Very nice Gef, you can see the results on http://www.pete-b.co.uk if you use a browser that can accomodate alternate stylesheets and switch to "Other Style".
(No time to alter main code, I'm meant to be doing monkey work on placement

Cheers for that link Shovel, just what I wanted although the buttons under the preview (Pastel, Pale etc..) only seem to work in IE

If only I could design AND develop

 

[Shovel]

Trust me, the links work in Firefox I only touch IE for testing, even with our web-standards-phobic company websites