Posts

Showing posts with the label Internet Explorer

Donate

How To Set Transparent Border Color In Internet Explorer 8 And Below Using CSS

-
Good evening! Normally, the css snippet below paints a transparent border to containers or divs using Mozilla Firefox, Chrome or IE9+. .NewsContent { background-color : #fff; border : 10px solid transparent ; background - clip : content -box; } However, for other IE8 and below, I had a hard time figuring out how to make the border transparent. Luckily, I found a link: Border Color Transparent in IE6 which serves as the basis on how to set transparent border color in Internet Explorer 8 and below using CSS below: .NewsContent { background-color : #fff; border : 10px solid black; filter: chroma( color =black); } Afterwards, the border color changed to transparent. MSDN link: MSDN Chroma Filter :)
Post a Comment
Read more

Ajax Calls Not Working In Internet Explorer 8

-
After testing the external js files in IE 8, the calls to post data to a controller does not work. After googling, I found a fix that is to set true to jquery support cors. jQuery Code: 1 jQuery.support.cors = true ; CORS, INTERNET EXPLORER 8, AND XDOMAINREQUEST Cheers!
Post a Comment
Read more

Placeholder Attribute In HTML5 Not Showing On IE 9 And Below (Watermark Feature)

-
Image
Given this html markup for input text element for accepting email value: <input type= "email" name= "inEmail" id= "inEmail" required= "required" placeholder= "yourname@domain.com" /> The place holder shows correctly on firefox and google chrome but not on IE 9. After searching the internet, I found placeholder framework that will fix place holders in IE 9 and below. The steps are as follows: 1. Download the placeholder script here: Placeholder js 2. Add reference to jquery and placeholder on your html file. <script src= "../Scripts/jquery-1.7.1.min.js" type= "text/javascript" ></script> <script src= "placeholders.jquery.min.js" type= "text/javascript" ></script> IE demo: That's it... :)
Post a Comment
Read more

CSS Linear Gradients Not Working In Internet Explorer 9 But Working In Firefox And Chrome

-
Image
I came across with linear gradients not working correctly in IE 9. One solution suggested by a popular forum is to utilize an image as the background of a particular element. Since I'm not a graphic designer, I searched for other solution. I came up with an alternative which is to embed an svg file instead of an image file as an element's background. The css code below won't work in IE 9. body { background-image : -ms-linear-gradient( top , #000, #666); } Here's a solution using .svg file: <svg xmlns= "http://www.w3.org/2000/svg" width= "100%" height= "100%" viewBox= "0 0 1 1" preserveAspectRatio= "none" > <linearGradient id= "g762" gradientUnits= "userSpaceOnUse" x1= "0%" y1= "0%" x2= "0%" y2= "100%" > <stop stop-color= "#000000" offset= "0" /><stop stop-color= "#666666" o...
Post a Comment
Read more

Apply Drop Shadow Effect To Text Using CSS (Cross Browser Compatibility Issue)

-
Image
Out of boredom, I tried manipulating the drop shadow effect of text in a simple html file. The browsers tested where IE 9, Firefox 12 and Chrome version 32.However, I found some difficulties on controlling the drop shadow effect in IE 9. After doing some research, I found a solution using filter. Here's my simple html markup: <!DOCTYPE html> <html> <head> <meta charset= "utf-8" /> <title>Chapter 2: Drop shadows on text</title> <link rel= "stylesheet" href= "textshadowGreg.css" /> <!-- http://reference.sitepoint.com/css/conditionalcomments --> <!--[if IE ]> <link href="textshadowIE.css" rel="stylesheet" type="text/css"> <![endif]--> </head> <body> <h1>What is CSS?</h1> <p> Cascading Style Sheets (CSS) is a style sheet language used for de...
Post a Comment
Read more

Donate