• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

Cross Browser Compatibility Issues in CSS

Cross browser Compatibility Issues

When aligning elements like this, it is always a good idea to pre-define margin and padding for the <body> element. This is avoid visual differences in different browsers.

There is a problem with IE8 and earlier, when using the position property. If a container element (in our case <div class=@container”>) has a specified width and the! DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the DOCTYPE declaration when using the position property:

Example

body{

margin:0;

padding:o;

}

.container

{

position :relative;

width :100%;

}

.right

{

position :absolute;

right:

width :800px;

background-color:#b0e0e6;

}

Left and Right Aligning Using the float Property

One method of aligning elements is use the float property:

Example

.right

{

float:right;

width : 300px;

background –color:#b0e0e6;

Cross Browser Compatibility Issues

When aligning element like this, it is always a good idea to pre-define margin and padding for the <body> element. This is to avoid visual differences in different browsers.

There is a problem with IE 8 and earlier when using the float property .If the !DOC TYPE declaration is missing IE8 and earlier version will add a 17px margin on the right side. This seems to be space reserved for a scroll bar. Always set the! DOC TYPE declaration when using the float property:

 

Example

body

{

margin:0;

padding:0;

}

.right{

float:right;

width :300px;

background-color:#b0e0e6;

}

 

CSS pseudo-classes

CSS pseudo-classes are used to add special effects to some selectors.

Syntax

The syntax of pseudo-classes:

selector:pseudo-class {property:value;}

CSS classes can also be used with pseudo-classes:

selector.class : pseudo-class {property:value}

Anchor Pseudo-classes

Links can be displayed in different ways in a CSS-Supporting browser:

Example

a:link {color:#FF0000;}/* unvisited link*/

a:visited{color:#00FF00;}/* visited link*/

a:hover{color:#FF00FF;}/* mouse over link*/

a:active {color:#0000FF;}/*selected link*/

 

Note:

a:hover MUST come after a :link and a:visited in the CSS defintionin order to be effective!!

 

Note:

a:active MUST come after a:hover in the CSS definition in order to be effective!!

Note

Pseudo-class names are not case-sensitive.

Pseudo Classes and CSS Classes

Pseudo-classes can be combined with CSS classes:

a:red:visited{color:#FF0000;}

<a class=”red”href=”css_syntax .asp”>CSS syntax</a>

If the link in the example above has been visited ,it will be displayed in red.

 

CSS-The : first –child Pseudo-class

The : first –child pseudo-class matches a specified element that is the first child of another element.

 

Note

For :first –child to work in IE8 and earlier ,a <!DOC TYPE> must be declared.

 

Match the first <p> element

In the following example, the selector matches any <p> element that is the first child of any element:

Example

<html>

<head>

<style type=”text/css”>

p:first-child

{

color:blue;

</style>

</head>

<body>

<p>Iam a strong man</P>

<p> I am a strong man</p>

</body>

</html>

Match the first <i> element in all <p> elements

In the following example, the selector matches the first <i> element in all <p> elements:

Example

<html>

<head>

<style type=”text/css”>

<p>:first-child

{

font-weight:bold;

}

</style>

</head>

<body>

<p>I am a <i> strong</i> man. I am a <i> strong</i> man.

<p>I am a <i> strong</i> man. I am a <i> strong</i> man.

</body>

</html>

Match all <i> elements in all first child <p> elements

In the following example ,the selector matches all <i> elements in <p> elements that are the first child of another element:

Example

<html>

<head>

<style type=”text/csss”>

p:first –childi

{

color:blue;

}

</style>

</head>

<body>

<p>I am a <i> strong</i> man. I am a <i> strong</i> man.

<p>I am a <i> strong</i> man. I am a <i> strong</i> man.

</body>

</html>

 

CSS-The :lang Pseudo –class

The: lang pseudo –class allows you to define special rules for different languages.

Note:

IE 8 supports the :lang pseudo –class only if a <!DOC TYPE> is specified .

In the example below,the :lag class defines the quotation marks for q elements with lang=”no”:

Example

<html>

<head>

<style type=”text/css”>

q:lang(no){quotes:”~” “~”;}

</style>

</head>

<body>

<p>Some text<q lang=”no”> A quote in a paragraph</q> some text</p>

</body>

</html>

 

CSS Pseudo-elemets

CSS pseudo-elements are used to add special effects to some selectors.

Syntax

The syntax of pseudo-elements:

selector:pseudo-element{property:value;}

Syntax

The syntax of pseudo-elements:

selector:pseudo-elements{property:value;}

CSS classes can also be used with pseudo-elements:

selector class:pseudo-element{property:value;}

 

The : first-line Pseudo – element

The “first-line” pseudo-element is used to add a special style to the first line of a text.

In the following example the browser formats the first line of text in a p element according to the style in the “first-line” pseudo-element(where the browser breaks the line, depends on the size of the browser window):

Example

p:first-line

{

color:#ff0000;

font-variant:small-caps;

}

 

Note : The “first-line ” pseudo-element can only be used with block-level elements.

 

Note : The following properties apply to the “first-line” pseudo-element

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

 

The : first –letter Pseudo-element

The “first-letter” pseudo-element is used to add a special to the first letter of a text.

 

Example

p:first-letter

{

color:#ff0000;

font-size:xx-large;

}

 

Note

The “first-letter” pseudo-element can only be used with block level elements

 

Note

The following properties apply to the “first-letter” pseudo-element:

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align(only if “float” is “none”)
  • text-transform
  • line-height
  • float
  • clear

Pseudo-elements and CSS classes

Pseudo-elements can be combined with CSS classes :

p.article:first-letter{color:#ff0000;}

<p class=”article”> A paragraph in an article</p>

The example above will display the first letter of all paragraphs with class=”article”, in red.

 

Multiple Pseudo-elements

Several pseudo-elements can also be combined.

In the following example, the first letter of paragraph will be red, in an xx-large. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be default size and color.

Example

p:first-letter

{

color:#ff0000;

font-size:XX-large;

}

p:first-line

{

color:#0000ff;

font-variant:small-caps;

 

CSS-The:before Pseudo-elements

The “:before” pseudo-element can be used to insert some content before the content of an element.

The following example inserts an image before each<hl> element:

Example

h1:before

content: url(smiley.gif);

 

CSS-The:after Pseudo-element

The “:after” pseudo-element can be used to insert some content after the content of an element.

The following example inserts an image after each<h1> element:

Example :

h1:after

content:url(smiley.gif);

 

All CSS Pseudo classes/Elements

Selector Example Example description
;link a:link Selects all unvisited links
;visited a:visited Selects all visited links
;active a:active Selects the active link
:hover a:hover Selects links on mouse over
:focus input:focus Selects the input element which has focus
:first-letter p:first-letter Selects the first letter of every<p> element
:first-line p:first-line Selects the first line of every<p> element
:first-child p:first-child Selects every<p> element that is the first child of its parent
:before p:before insert content before every <p> element
:after p:after Insert content after every <p> element
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with “it”

 

Summary
Review Date
Reviewed Item
Cross Browser Compatibility Issues in CSS
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on Cross Browser Compatibility Issues in CSS"

Leave a Message

Your email address will not be published. Required fields are marked *

Site Disclaimer, Copyright © 2016 - All Rights Reserved.