Blog

Cross Browser Compatibility Issues in CSS

20 September, 2018

Related Blogs

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