| You are here : : Home > Free Resources > CSS Tutorials > Tips On How To Use CSS With IE |
- Backgrounds
- Borders
- Collage Gallery
- Cool Text Effects
- Custom Fonts
- Drop Down Menu
- Forms
- Gallery
- Lightbox Effect
- Multiple Shadows in CSS
- Overlapping Menus New!
- Preloader New!
- Shadows
- Sliding Menus
- Tabbed Content Box
- Tips on using CSS with IE
- Website
- Web Design Ideas
- Web Design Tips
- Navigation Tips
- Fast Loading Web Sites
- Expandable Website Design
- Customize Templates
- Cool Bullet Tips
- Graphic Design Ideas
- Table Tips 'n' Tricks
- How to Build a Website
- Pros & Cons of Website Templates
Free Web Design Resources
- Website Templates
- Fireworks Logos
- Illustrator Logos
- Website Backgrounds
- Flash Photo Galleries
- Dynamic Text Scroller
- Website Add-Ons
Other Web Design Resources
Tips On How To Use CSS With IE
Most of the internet users use IE as their default browsers as it packed with the Windows operating system.
But displaying content on IE using CSS can sometimes be painful.
Here are some useful tips on how to use css with IE.
| Browser Support | » |  |
|||
|---|---|---|---|---|---|
| Language | » | CSS3 & HTML4 | |||
Some common problems caused in IE can be eliminated by:
- Using Doctype
- Using Browser Specific CSS
- IE CSS Filter
Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd"> This declares the document to be XHTML 1.0 Transitional. XHTML 1.0 Transitional is an XML version of HTML 4 Transitional.
it is an instruction to the web browser about what version of the markup language the page is written in. The doctype declaration should be the very first thing in an HTML document, before the <html> tag.
1 2 3 4 5 6 7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html>
</html>
Doctype Declaration will help solve most of your problems like,
→ Centering the page or html elements using margin: auto;.
Some web pages are made for resolutions upto 1024 pixels only. These website appear at the center on a Standard Definition(having resolution upto 1024x768 ) screen, but when viewed on High Definition( having resolution upto 1920x1080 ) screen, the webpage floats to the left in IE.
Browser Specific CSS
The conditional code is similar to the regular HTML COMMENTS Tag except for the condition part.With Conditional CSS we can target specific version of IE and even target the versions greater than or less than any version of IE using keywords like 'lt', 'gt', 'lte', 'gte'.
Paste this code inside the < head > </head> tags.
Syntax:
1 2 3 4 5 6 7
<!--[if (TYPE) IE (VERSION)]> IE Specific code <![endif]-->
<!--[if (TYPE) IE (VERSION)]>
→ Starting of the conditional "if" statement.
(TYPE) (VERSION)
→ Optional Terms like 'gt', 'gte', 'lt', 'lte' can be used for "TYPE".
→ 'gt' stands for 'greater than'.
→ 'gte' stands for 'greater than or equal to'.
→ 'lt' stands for 'less than'.
→ 'lte' stands for 'less than equal to'.
→ Optional Number indicating the version can be used for "VERSION".
→ Available versions are '9', '8', '7', '6', '5.5' & '5'.
IE Specific code
→ Here you can write Stylesheet Codes or even Javascript code.
<![endif]-->
→ Ending of the conditional statement.
Example :
For ALL VERSIONS of IE
1 2 3 4 5
<!--[if IE]> <link rel=stylesheettype=text/csshref=all-version-of-ie.css/> <![endif]-->
Any Browser EXCEPT IE
1 2 3 4 5
<!--[if !IE]> <link rel="stylesheet" type="text/css" href="all-except-ie.css" /> <![endif]-->
1 2 3 4 5
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="for-ie-7.css" /> <![endif]-->
1 2 3 4 5
<!--[if gte IE 7]> <link rel="stylesheet" type="text/css" href="gte-ie-7.css" /> <![endif]-->
1 2 3 4 5
<!--[if lt IE 8]> <link rel="stylesheet" type="text/css" href="lt-ie-8.css" /> <![endif]-->
IE CSS Filters
IE has its own set of CSS Visual Filters and that's why IE does not support all the regular CSS properties that other browsers do.Visual filters are extensions to CSS properties that change the display of an object's contents. Using filters simplifies the task of incorporating sophisticated effects in Web documents.
Filters are applied to HTML elements through the filter property.
The filter property is a string of filter descriptions that uses a function-like notation.
Syntax:
1 2 3
#sample{
filter: progid:DXImageTransform.Microsoft.filtername(sProperties);
}
Explanation
filter:
→ This is the keyword for defining IE specific CSS Filter.
→ Other browser will ignore this property.
filtername(sProperties)
→ Here filternames like 'alpha', 'blur', 'wave' can be difined.
The Alpha filter blends its target into the background; you can control the amount of opacity. Opacity is expressed as percentage.
The following HTML causes the image to be 20 percent opaque.
Example:
1 2 3 4
<img src=images/image.jpg
style=filter:progid:DXImageTransform.Microsoft.alpha(opacity=20)
>
CSS3 Properties and IE
IE reliably supports nearly all CSS 1 and CSS 2 properties.IE supports very few CSS 3 properties.
Here's a list of all the CSS3 properties that IE doesn't Support.
Pseudo-classes
| classes | Internet Explorer 5 | Internet Explorer 5.5 | Internet Explorer 6 | Internet Explorer 7 | Internet Explorer 8 | Internet Explorer 9 |
|---|---|---|---|---|---|---|
| :root |  |
|
|
|
|
 |
| :nth-child(n) | |
|
|
|
|
|
| :nth-last-child(n) | |
|
|
|
|
|
| :nth-of-type(n) | |
|
|
|
|
|
| :nth-last-of-type(n) | |
|
|
|
|
|
| :last-child | |
|
|
|
|
|
| :first-of-type | |
|
|
|
|
|
| :last-of-type | |
|
|
|
|
|
| :only-child | |
|
|
|
|
|
| :only-of-type | |
|
|
|
|
|
| :empty | |
|
|
|
|
|
| :target | |
|
|
|
|
|
| :not(s) | |
|
|
|
|
|
| :enabled | |
|
|
|
|
|
| :disabled | |
|
|
|
|
|
| :checked | |
|
|
|
|
|
| :indeterminate | |
|
|
|
|
|
| :default | |
|
|
|
|
|
| :valid | |
|
|
|
|
|
| :invalid | |
|
|
|
|
|
| :in-range | |
|
|
|
|
|
| :out-of-range | |
|
|
|
|
|
| :required | |
|
|
|
|
|
| :optional | |
|
|
|
|
|
| :read-only | |
|
|
|
|
|
| :read-write | |
|
|
|
|
|
Pseudo-elements
| Elements | Internet Explorer 5 | Internet Explorer 5.5 | Internet Explorer 6 | Internet Explorer 7 | Internet Explorer 8 | Internet Explorer 9 |
|---|---|---|---|---|---|---|
| ::before | |
|
|
|
|
|
| ::after | |
|
|
|
|
|
| ::first-letter | |
|
|
|
|
|
| ::first-line | |
|
|
|
|
|
| ::selection | |
|
|
|
|
|
| ::value | |
|
|
|
|
|
| ::choices | |
|
|
|
|
|
| ::repeat-item | |
|
|
|
|
|
| ::repeat-index | |
|
|
|
|
|
Color and Background
| Properties | Internet Explorer 5 | Internet Explorer 5.5 | Internet Explorer 6 | Internet Explorer 7 | Internet Explorer 8 | Internet Explorer 9 |
|---|---|---|---|---|---|---|
| { color-profile : sProfile } | |
|
|
|
|
|
| { rendering-intent : sIntent } | |
|
|
|
|
|
| { background : sBackground1, sBackground2, etc. } |
|
|
|
|
|
|
| { background-clip : sClip } | |
|
|
|
|
|
| { background-origin : sOrigin } | |
|
|
|
|
|
| { background-break : sBreak } | |
|
|
|
|
|
| { background-size : sSize } | |
|
|
|
|
|
Font and Text
| Properties | Internet Explorer 5 | Internet Explorer 5.5 | Internet Explorer 6 | Internet Explorer 7 | Internet Explorer 8 | Internet Explorer 9 |
|---|---|---|---|---|---|---|
| { font-effect : sEffect } | |
|
|
|
|
|
| { font-emphasize : sEmphasize } | |
|
|
|
|
|
| { font-size-adjust : sSizeAdjust } | |
|
|
|
|
|
| { font-smooth : sSmooth } | |
|
|
|
|
|
| { font-stretch : sStretch } | |
|
|
|
|
|
| { hanging-punctuation : sHangingPunctuation } | |
|
|
|
|
|
| { punctuation-trim : sTrim } | |
|
|
|
|
|
| { ruby-align : sRubyAlign } | |
|
|
|
|
|
| { ruby-overhang : sRubyOverhang } | |
|
|
|
|
|
| { ruby-position : sRubyPlacement } | |
|
|
|
|
|
| { ruby-span : sRubySpan } | |
|
|
|
|
|
| { text-align-last : sAlignLast } | |
|
|
|
|
|
| { text-emphasis : sEmphasis } | |
|
|
|
|
|
| { text-justify : sJustify } | |
|
|
|
|
|
| { text-outline : sOutline } | |
|
|
|
|
|
| { text-overflow : sOverflow} | |
|
|
|
|
|
| { text-shadow : sShadow } | |
|
|
|
|
|
| { text-wrap : sWrap } | |
|
|
|
|
|
| { word-break : sBreak } | |
|
|
|
|
|
| { word-wrap : sWrap } | |
|
|
|
|
|
| { writing-mode : sFlow } | |
|
|
|
|
|
Border and Layout
| Properties | Internet Explorer 5 | Internet Explorer 5.5 | Internet Explorer 6 | Internet Explorer 7 | Internet Explorer 8 | Internet Explorer 9 |
|---|---|---|---|---|---|---|
| { border-break : sBreak } | |
|
|
|
|
|
| { border-image : sImage } | |
|
|
|
|
|
| { border-radius : sRadius } | |
|
|
|
|
|
| { box-shadow : sShadow } | |
|
|
|
|
|
Printing
| Properties | Internet Explorer 5 | Internet Explorer 5.5 | Internet Explorer 6 | Internet Explorer 7 | Internet Explorer 8 | Internet Explorer 9 |
|---|---|---|---|---|---|---|
| { fit : sFit } | |
|
|
|
|
|
| { fit-position : sPosition } | |
|
|
|
|
|
| { image-orientation : sOrientation } | |
|
|
|
|
|
| { page : sPage } | |
|
|
|
|
|
| { size : sSize } | |
|
|
|
|
|
User Interface
| Properties | Internet Explorer 5 | Internet Explorer 5.5 | Internet Explorer 6 | Internet Explorer 7 | Internet Explorer 8 | Internet Explorer 9 |
|---|---|---|---|---|---|---|
| { appearance : sAppearance } | |
|
|
|
|
|
| { box-sizing : sSizing } | |
|
|
|
|
|
| { icon : sIcon } | |
|
|
|
|
|
| { nav-down : sNavDown } | |
|
|
|
|
|
| { nav-index : sIndex } | |
|
|
|
|
|
| { nav-left : sNavLeft } | |
|
|
|
|
|
| { nav-right : sNavRight } | |
|
|
|
|
|
| { nav-up : sNavUp } | |
|
|
|
|
|
| { outline-offset : sOffset } | |
|
|
|
|
|
| { outline-radius : sRadius } | |
|
|
|
|
|
| { resize : sResize } | |
|
|
|
|
|
Multi-column Layout
Internet Explorer does not support any of the CSS3 multi-column layout properties.
Speech
Internet Explorer does not support any of the CSS3 speech properties.
Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!
Join us on Facebook to keep updated with all the latest tutorials and web design freebies from EntheosWeb!
No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.
