How to fix this css error in IE7 and lower?

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;
}

Need to be more specific - what is the error? where? got a screenshot? got a live demo/sample? got html code to share with us? You're basically asking for help without naming the problem. — Capagris, Nov 09 '11 at 17:21
I added a webpage, sorry I forgot it (-.-) I'm working on screenshot now — Ilja, Nov 09 '11 at 17:25

biziclop · Accepted Answer · 2011-11-09T17:25:02.717

5

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.

edited Nov 09 '11 at 17:25

answered Nov 09 '11 at 17:19

biziclop

14,466
3
49
65

Which one was the problem ? :) – biziclop Nov 09 '11 at 17:29

score 3 · Answer 2 · answered Nov 09 '11 at 17:17

3

Use a CSS reset

Add this code to the top of your CSS

answered Nov 09 '11 at 17:17

Jon Winstanley

23,010
22
73
116

score 1 · Answer 3 · answered Nov 09 '11 at 17:21

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.

How to fix this css error in IE7 and lower?

3 Answers3