Display Issue (Only in Internet Explorer)

Hi,

Hoping someone can lend some advice on this.

URL of Error: http://www.theps4forums.com/board

On Google Chrome and Firefox there are no display issues, but when using IE there is a display issue with the grey area towards the top of the page which displays the ad inside. The grey area is not aligned correctly and sometimes on page refresh the ad displays further up the page, covering the navigation icons.

Can anybody offer some advice?

 

Hello PokerVillain,
One of the first things I do in trying to troubleshoot such issues is to validate the page using W3 CSS Validator. In your case I get 3 times Value Error : color darkgray is not a color value : darkgray darkgray
I would begin by fixing this issue. Next I realized that you are using CSS 3. Perhaps IE is not able to parse the code properly. You can try checking browser type and if it is IE you can have a separate CSS file. I hope it helps

 

Try reducing the padding here

#banner {
width:468px;
height:60px;
padding-top:10px;
margin:0 auto;
}

Code (markup):

or increasing the size of the area in these,

#blackareaBg {
background:url(images/styles/versionj/style/black_repeat.gif) repeat-x;
height:84px;
}

#blackarea {
background:url(images/styles/versionj/style/blackbg_main.gif) no-repeat;
height:84px;
margin-top:-5px;
}

.blackareaRight {
background:url(images/styles/versionj/style/black_cap.gif) no-repeat;
height:84px;
width:5px;
float:right;
}

Code (markup):

But ideally it would be better to have an additional ie.css file. Post about that HERE

 

Many thanks to you both, just posted over there now.