I really appreciate finding this post about Creating Compatible CSS for Firefox, IE6, Opera, IE7 etc. and found your suggestions quite insightful. I know this was several years old, but hoping you might be able to lend your expertise to identifying a CSS compatibility issue with IE8 on our website: http://www.firefighterflashgames.com

Issue#1 – There are two (2) specific blocks that do not appear correctly in IE8. I use mostly Firefox and Safari on my Mac. In the center of the Home Page, there is a 468 x 60 Ad Block to the right of the word “Sponsor” and this Ad does NOT show in IE8 unless one selects the ‘Compatibility Button’ and then it shows incorrectly (shifted too far down.)

Issue#2 – On the Individual Game Pages (when you select a Game to play, and new page opens) you will notice that below the Game is the text “Share Online” and to the right of this is supposed to be a row of Social Media icons. These too do not display unless the ‘Compatibility Mode’ button is pressed.

I know this site is not a blogger site, but thought perhaps the issue was with CSS and IE8 compatibility. I’d gladly make a small donation via PayPal and send you the CSS for this site if you thought you might be able to identify how to modify the code to get these issues resolved and the graphics appearing correctly on the pages.

Any consideration you might offer would be sincerely appreciated.

Kind Regards,

Ethan

/* Sidebar
———————————————–*/
#sidebar-wrapper{
position:relative;
z-index:10;
width:272px;
margin-top:25px;
margin-right:660px;
}
html > body #example {
width : 185px;
margin-left : 3px;
}
#sidebar,#sidebar a,#sidebar li,#sidebar ul,#sidebar ol{
color:#787878;
font-size:12px;
}
#sidebar ul{
list-style:none;
padding:0;
margin:0;
}
#sidebar .widget{
margin:0 0 7px 0;
border:0px solid #;
background:url();
}
#sidebar h2{
font-size:20px;
padding:13px 18px;
color:#45494e;
font-weight:light;
margin-left:40px;
}
#sidebar ul{
border:0px solid #cecece;
border-bottom:none;
}
#sidebar ul li{
border-bottom:0px solid #cecece;
padding: 10px 18px;
}
#sidebar ul li:hover{
border-bottom:0px solid #cecece;
padding: 10px 18px;
background:#eee;
}
#sidebar2 {
width:272px;
margin-top:-26px;
margin-bottom:101px;
margin-left:867px;
}
html > body #example {
width : 185px;
margin-left : 3px;
}
#sidebar,#sidebar a,#sidebar li,#sidebar ul,#sidebar ol{
color:#787878;
font-size:12px;
}
#sidebar2 ul{
list-style:none;
padding:0;
margin:0;
}
#sidebar2 .widget{
margin:0 0 7px 0;
border:0px solid #fff;
background:url();
}
#sidebar2 h2{
font-size:20px;
padding:13px 18px;
color:#45494e;
font-weight:light;
margin-left:-281px;
}
#sidebar2 ul{
border:0px solid #cecece;
border-bottom:none;
}
#sidebar2 ul li{
border-bottom:0px solid #cecece;
padding: 10px 18px;
}
#sidebar3 {
width:275px;
margin-top:-400px;
margin-bottom:1px;
margin-left:456px;
}
html > body #example {
width : 185px;
margin-left : 3px;
}
#sidebar,#sidebar a,#sidebar li,#sidebar ul,#sidebar ol{
color:#787878;
font-size:12px;
}
#sidebar3 ul{
list-style:none;
padding:0;
margin:0;
}
#sidebar3 .widget{
margin:0 0 7px 0;
border:0px solid #fff;
background:url();
}
#sidebar3 h2{
font-size:20px;
padding:13px 18px;
color:#45494e;
font-weight:light;
margin-left:500px;
}
#sidebar3 ul{
border:0px solid #cecece;
border-bottom:none;
}
#sidebar3 ul li{
border-bottom:0px solid #cecece;
padding: 10px 18px;
}
#sidebar4 {
width:275px;
margin-top:-280px;
margin-bottom:1px;
margin-left:151px;
}
html > body #example {
width : 185px;
margin-left : 3px;
}
#sidebar,#sidebar a,#sidebar li,#sidebar ul,#sidebar ol{
color:#787878;
font-size:12px;
}
#sidebar4 ul{
list-style:none;
padding:0;
margin:0;
}
#sidebar4 .widget{
margin:0 0 7px 0;
border:0px solid #fff;
background:url();
}
#sidebar4 h2{
font-size:20px;
padding:13px 18px;
color:#45494e;
font-weight:light;
margin-left:84px;
}
#sidebar4 ul{
border:0px solid #cecece;
border-bottom:none;
}
#sidebar4 ul li{
border-bottom:0px solid #cecece;
padding: 10px 18px;
}
#sidebar5 {
width:330px;
margin-top:-25px;
margin-bottom:1px;
margin-left:475px;
}
html > body #example {
width : 185px;
margin-left : 3px;
}
#sidebar,#sidebar a,#sidebar li,#sidebar ul,#sidebar ol{
color:#787878;
font-size:12px;
}
#sidebar5 ul{
list-style:none;
padding:0;
margin:0;
}
#sidebar5 .widget{
margin:0 0 7px 0;
border:0px solid #fff;
background:url();
}
#sidebar5 h2{
font-size:20px;
padding:13px 18px;
color:#45494e;
font-weight:light;
margin-left:141px;
}
#sidebar5 ul{
border:0px solid #cecece;
border-bottom:none;
}
#sidebar5 ul li{
border-bottom:0px solid #cecece;
padding: 10px 18px;
}
#sidebar6 {
width:300px;
margin-top:22px;
margin-bottom:1px;
margin-left:800px;
}
html > body #example {
width : 185px;
margin-left : 3px;
}
#sidebar,#sidebar a,#sidebar li,#sidebar ul,#sidebar ol{
color:#787878;
font-size:12px;
}
#sidebar6 ul{
list-style:none;
padding:0;
margin:0;
}
#sidebar6 .widget{
margin:0 0 7px 0;
border:0px solid #fff;
background:url();
}
#sidebar6 h2{
font-size:20px;
padding:13px 18px;
color:#45494e;
font-weight:light;
margin-left:137px;
}
#sidebar6 ul{
border:0px solid #cecece;
border-bottom:none;
}
#sidebar6 ul li{
border-bottom:0px solid #cecece;
padding: 10px 18px;
}

#sidebar-wrapper {float: left;width: 215px;}

The following CSS is working fine only in Chrome, But not in IE,Firefox,etc…

Am using this for my web development with some modifications such as rounded corners & rotations. Please help me to fix it.

I got it from the following demo
http://css-tricks.com/examples/SlideToUnlock/

I got it from

* { margin: 0; padding: 0; }
html { background-color:White; }
body {
font: 14px Georgia, serif;
/*
background-image:
-webkit-gradient(linear,left top,left bottom,color-stop(0, #3b3b3b),color-stop(1, #404040));
background-repeat: no-repeat;
*/
background-image:-webkit-gradient(linear,left top,left bottom));
background-repeat: no-repeat;
min-height: 350px;

}

#page-wrap { z-index: 1000; width: 740px; margin: 0 auto; padding-top:20px; height:50px }

#well {z-index: 1000;
padding: 14px 20px 20px 20px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
/* border-radius: 30px;*/

background: -moz-linear-gradient(top, #010101, #181818);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0A809C),color-stop(1, #8B8378));

border: 2px solid #0a809c;
overflow: hidden;

-webkit-user-select: none;
}

/* #well:hover {
z-index: 1000;
padding: 14px 20px 20px 20px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 10px;

background: -moz-linear-gradient(top, #010101, #181818);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #WHITE),color-stop(1, #9FCBCF));

/*border: 2px solid #c0c0c0;
overflow: hidden;

-webkit-user-select: none;
}*/

#Top_Well {
padding: 14px 20px 20px 20px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
/*border-radius: 30px;*/

background: -moz-linear-gradient(top, #010101, #181818);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #efe7cf),color-stop(1, #WHITE));

border: 2px solid #0a809c;
overflow: hidden;

-webkit-user-select: none;
}

h2 {
background: -moz-linear-gradient(left, #4d4d4d, 0.4, #4d4d4d, 0.5, white, 0.6, #4d4d4d, #4d4d4d);
background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));

-moz-background-clip: text;
-webkit-background-clip: text;

-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;

-webkit-animation: slidetounlock 5s infinite;

font-size: 80px;
font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;
font-weight: 300;

padding: 0;
width: 200%;

-webkit-text-size-adjust: none;
}
#slider
{
background:url(../imaGes/GLOBE.jpg);
background-repeat:no-repeat;
background-position:center;
width: 126px;
height: 98px;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
s
/*@-webkit-keyframes slidetounlock {
0% {
background-position: -720px 0;
}
100%{
background-position: 720px 0;
}
} */

Awaiting with Regards,
Narendran.N
94876-93560.

body {text-align: justify;
font-family: Arial, Verdana;
font-size: 14px;}

a:link {color: blue;
font-size: 14px;}
a:visited {color:blue;
font-size: 14px;}
a:hover {color: #000000;
font-size: 14px; }
a:active {color: #B70004;
font-size: 14px; }

div {margin-left: 5px;
margin-right: 5px;
text-valign: center;
font-family: Arial, Verdana;
font-size: 14px;}

div.header {
top: 15px;
height: 130px;
width: 100%;
background-image:url(‘images\head.JPG’);}

div.left {
padding: 20px;
top: 188px;
left: 2px;
width: 662;
height: 270px;
border: 2px ;
background-image:url(‘images\left.JPG’);}

div.right {
padding: 12px;
top: 178px;
left: 675px;
width: 300px;
height: 270px;
position: absolute;
border:2px;
background-image:url(‘images\right.JPG’);}

div.foot1 {
padding: 10px;
position: absolute;
right: 645px;
top: 275px;
height: 140px;
width: 310px;
background-image:url(‘images\foot1.JPG’);}

div.foot2 {
padding: 10px;
position: absolute;
right: 320px;
top: 275px;
height: 140px;
width: 310px;
background-image:url(‘images\foot2.JPG’);}

div.foot3 {
padding: 10px;
position: absolute;
right: 0px;
top: 275px;
height: 140px;
width:310px;
background-image:url(‘images\foot3.JPG’);}

thanx in advance

The following url works fine in latest version of Firefox but a div’s position is changing in Firefox 3.0.5 version.

please suggest

http://goldenslash.com/sumantesting/laser/

Thank you.