Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > CSS Tutorials > Tips On How To Use CSS With IE   

Tips On How To Use CSS With IE

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]-->

The Explanation:

<!--[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=stylesheet type=text/css href=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]-->
For IE 7 Only
1
2
3
4
5
<!--[if IE 7]>

  <link rel="stylesheet" type="text/css" href="for-ie-7.css" />

<![endif]-->
For IE Greater than equal to 7
1
2
3
4
5
<!--[if gte IE 7]>

  <link rel="stylesheet" type="text/css" href="gte-ie-7.css" />

<![endif]-->
For Less than IE 8
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.


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

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.


Looking for high-quality Responsive Website Design? Choose from over 2000 templates!

Free HTML5 Website

Featured Template
Template # 52986
Type: Joomla
Price: $0