CODEWITHSUNDEEP
htmlinternet-explorercssinternet-explorer-9
Hitesh Talukdar
Hitesh Talukdar

Reputation: 1

IE 9 compability with HTML 5

I create a website http://www.gkduniya.com . With Mozilla and chrome the category section is OK. But with IE 9, category section misplaced. Plz check it for details. I am using the below CSS code to make the gradientbox:

 .gradientBoxesWithOuterShadows { 
  height:auto;
  width: 240px; 
   padding: 20px;
  background-color: white; 

/* outer shadows  (note the rgba is red, green, blue, alpha) */
 -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4); 
 -moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */
 -webkit-border-radius: 12px;
 -moz-border-radius: 7px; 
  border-radius: 7px;

 /* gradients */
 background: -webkit-gradient(linear, left top, left bottom, 
 color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5)); 
 background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); 
 }

Plz help so that it also work with IE 9.

Upvotes: 0

Views: 389

Answers (3)

user166390
user166390

Reputation:

Oops! This is wrong:

<!DOCKTYPE HTML>

Such an invalid DOCTYPE will set IE9 to run in "Quirks Mode Document" unless changed/forced by the IE9 Developer Tools (or other random Windows settings).

Fix the page so it is valid markup and use a validator to ensure it is valid. (Interestingly enough the w3c validator guesses it as HTML5 while IE9 marks the page default as quirks. Also, I can only get IE9 to "look significantly wrong" in IE9/IE7 mode.)

Also fix the JavaScript errors so it doesn't poop a bunch of error messages which are displayed so annoyingly in IE :(

Upvotes: 0

VenomVendor
VenomVendor

Reputation: 15392

Add un prefixed box-shadow to your css and for Gradient issues add

-ms-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); /* for IE-10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFF', EndColorStr='#D5E4F3'); /* IE6–IE9 */
linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); /* for all */

For further easy development refer CSS Gradient Background Maker

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

Looks fine to me, just add the unprefixed box-shadow and you're good to go. Similarly, add the unprefixed gradient for the background.

Upvotes: 0

Related Questions