How to fix this css error in IE7 and lower? - css

Question

I recently added some css to my website, it works perfectly fine in all browsers except IE 7 and lower, I'm not really sure why and I am not css guru (yet ;)) and my css might be wrong, but could you please explain what makes IE7 and lower mess up the appearance of the website? If you compare it in IE8 or any other browser and IE7 you'll see what I'm talking about. Can you point where the issues are?
webpage: http://inelmo.com/inelmo
CSS of the sidebar: (I only included this, because problems started once I added this part of the code)
#sidebar {
width: 440px;
float: right;
}
/* Navigation Menu */
#navigationMenu {
width: 50px;
position: absolute;
z-index: 99;
}
#navigationMenu li {
list-style: none;
height: 39px;
padding: 2px;
width: 40px;
}
#navigationMenu span {
width: 0;
left: 38px;
padding: 0;
position: absolute;
overflow: hidden;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.6px;
white-space: nowrap;
line-height: 39px;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
-ms-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a {
background: url("../images/nav_bg.png") no-repeat;
height: 39px;
width: 38px;
display: block;
position: relative;
text-decoration: none;
}
#navigationMenu a:hover span {
width: auto;
padding: 0 20px;
overflow: visible;
}
#navigationMenu a:hover {
text-decoration: none;
}
/* Home Button */
#navigationMenu .home {
background-position: 0 0;
}
#navigationMenu .home:hover {
background-position: 0 -39px;
}
#navigationMenu .home span {
background-color: #7da315;
color: #3d4f0c;
text-shadow: 1px 1px 0 #99bf31;
}
/* Categories Button */
#navigationMenu .categories {
background-position: -38px 0;
}
#navigationMenu .categories:hover {
background-position: -38px -39px;
}
#navigationMenu .categories span {
background-color: #1e8bb4;
color: #223a44;
text-shadow: 1px 1px 0 #44a8d0;
}
/* Top Button */
#navigationMenu .top {
background-position: -76px 0;
}
#navigationMenu .top:hover {
background-position: -76px -39px;
}
#navigationMenu .top span {
background-color: #c86c1f;
color: #5a3517;
text-shadow: 1px 1px 0 #d28344;
}
/* AntiTop Button */
#navigationMenu .antiTop {
background-position: -114px 0;
}
#navigationMenu .antiTop:hover {
background-position: -114px -39px;
}
#navigationMenu .antiTop span {
background-color: #af1e83;
color: #460f35;
text-shadow: 1px 1px 0 #d244a6;
}
/* Logo styling */
#logo {
width: 390px;
margin: 0 0 0 50px;
position: absolute;
z-index: -1;
}
/******/
#sideWrapper {
width: 437px;
background: url("../images/sidebar_strip.png") repeat-x;
padding: 15px 0 0 3px;
margin: 190px 0 0 0;
}

Answer 1

When using float:xxx you should also append display: inline to fix older IE behavior.
In IE6 :hover works only with <a>, fix: http://peterned.home.xs4all.nl/csshover.html
You seem to use position: absolute; without actually setting top/left/etc.
Use some kind of 'pngfix' like http://www.twinhelix.com/css/iepngfix/ to use transparent pngs.
Use google and sites like http://haslayout.net/ to find fun ie bugs.

Answer 2

Use a CSS reset
Add this code to the top of your CSS

Answer 3

Without an example of your code the best thing I could suggest to someone starting out is to comment out the above CSS line by line until you locate the exact CSS that breaks your layout. Another trick I use is to add background colors to everything so you can visually see where things are breaking.