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>

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>

<p>:first-child

{

font-weight:bold;

}

</style>

</head>

<body>

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

p:first –childi

{

color:blue;

}

</style>

</head>

<body>

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

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

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”