Problem with older version of IE

HTML & CSS
1

Hi,

Please have a look over here:
http://mocha-music.com/
it looks good on IE8 but terrible on IE7
What can I do to fix it?

thanks!

2

Add an IE7-only stylesheet and try to override your default CSS.

3

That’s not exactly helpful and looks almost like fluff so please make sure your posts are constructive and provide proper solutions.

The problem with the page is in fact down to a few typos in the CSS and there is no need to re-write all the css or include another stylesheet.

There are three stray quotations marks that are corrupting the css and I have wrapped comments around them so that you can see where they are. You also need a position:relative and a margin as shown.


#header {
    background-image: url('http://mocha-music.com/wp-content/themes/oren/images/header.jpg');
    background-repeat: no-repeat;
 [B]   /* "*/[/B]
  /*min-height: 118px; no needed*/
    height:118px;
}
#middle {
    background-image: url('http://mocha-music.com/wp-content/themes/oren/images/middle.jpg');
    background-repeat: no-repeat;
[B]/*"*/[/B]
/*    min-height: 216px;not needed*/
    height:216px;
    width:850px;
    direction: rtl;
[B]    position:relative;
    margin-bottom:10px;[/B]
}
#bottom {
    background-image: url('http://mocha-music.com/wp-content/themes/oren/images/bottom.jpg');
    background-repeat: no-repeat;
  [B]  /*"*/[/B]
  /*min-height: 495; not needed and where's the units*/
    height:495px;
    width:850px;
    margin-top: -22px;
}

That will fix the page as I have copied and tested locally.

Note that there is no need to say height and min-height with the same measurement and unit at the same time. Just use height if you want a fixed height or use min-height if you want min-height.

4

thank you very much!
it works.