I'm working on a site and I'm having some issues with a bug in Internet Explorer.
Here's the site:
http://www.360.ms
Everything looks fine in Firefox, but on the right side in Internet Explorer, there's a gap of 2px between the side of the container and the sidebar.
Here's my CSS:
Code:
body {
margin: 0px;
background-color: #383838;
font-size: 11px;
font-family: Verdana;
text-align: center;
}
#all {
text-align: center;
width: 780px;
margin-left: auto;
margin-right: auto;
}
#container {
width: 780px;
text-align: left;
background-color: #f1f1f1;
border-left: 1px solid #222;
border-right: 1px solid #222;
border-bottom: 1px solid #222;
margin-left: auto;
margin-right: auto;
float: left;
}
#menu {
background-image: url(menu-back.jpg);
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
border-top: 1px solid #111;
border-bottom: 1px solid #111;
width: 780px;
}
#menu a {
padding-top: 5px;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 5px;
color: #ccc;
background-image: url(menu-back.jpg);
padding-left: 20px;
padding-right: 20px;
text-decoration: none;
}
#menu a:hover {
background-image: url(menu-hover.jpg);
}
#sidebar {
float: left;
width: 180px;
border-right: 1px solid #333;
background-color: #555;
color: #f4f4f4;
margin: none;
padding: none;
}
#sidebar h1 {
font-size: 11px;
color: #222;
margin: 0px;
text-align: center;
background-image: url(head1.jpg);
padding-top: 4px;
padding-bottom: 4px;
}
#content {
float: left;
padding-left: 5px;
width: 407px;
padding-right: 5px;
}
#sidebar2 {
float: right;
width: 180px;
border-left: 1px solid #333;
background-color: #555;
color: #f4f4f4;
margin: none;
padding: none;
}
#sidebar2 h1 {
font-size: 11px;
color: #222;
margin: 0px;
text-align: center;
background-image: url(head1.jpg);
padding-top: 4px;
padding-bottom: 4px;
}
There's a few, not-so-efficient ways of doing things in my code, so don't laugh at me
Thanks for the help
