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.

<!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 1024×768 ) screen, but when viewed on High Definition( having resolution upto 1920×1080 ) screen, the webpage floats to the left in IE.

Demo page with-out Doctype Declaration 

Demo page with Doctype Declaration

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:

<!--[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

<!--[if IE]>

  <link rel=stylesheet type=text/css href=all-version-of-ie.css />

<![endif]-->

Any Browser EXCEPT IE

<!--[if !IE]>

  <link rel="stylesheet" type="text/css" href="all-except-ie.css" />

<![endif]-->

For IE 7 Only

<!--[if IE 7]>

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

<![endif]-->

For IE Greater than equal to 7

<!--[if gte IE 7]>

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

<![endif]-->

For Less than IE 8

<!--[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:

#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:

<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

classesInternet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet 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

ElementsInternet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
::before
::after
::first-letter
::first-line
::selection
::value
::choices
::repeat-item
::repeat-index

Color and Background

PropertiesInternet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet 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

PropertiesInternet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet 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

PropertiesInternet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
{ border-break : sBreak }
{ border-image : sImage }
{ border-radius : sRadius }
{ box-shadow : sShadow }

Printing

PropertiesInternet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet Explorer 9
{ fit : sFit }
{ fit-position : sPosition }
{ image-orientation : sOrientation }
{ page : sPage }
{ size : sSize }

User Interface

Properties Internet Explorer 5Internet Explorer 5.5Internet Explorer 6Internet Explorer 7Internet Explorer 8Internet 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.

CSS Tutorials and Resources

 
     

Tutorials Categories

Latest Posts


Tags

  • Tags

    2023 2024 2025 Background backgrounds Best Bootstrap Calendar canva cards Christmas CorelDraw Creative CSS Design designs Desktop Wallpaper download Ecards effect facebook Flash free graphic design graphics HTML5 ideas inspiration Joomla Modern pdf photoshop Responsive Social Media template Templates themes tips tutorial Wallpaper Web Design website Website Design website templates Wordpress

    • Templates


    Pinterest

    Write For Us
    Contact Us

      Security Codecaptcha


      Copyright © 2004-2024 EntheosWeb . Hosted by WPX Hosting