mobileNavlogo
headerlogo

Cross Browser Compatibility Issues in CSS

20 September, 2018

Ratings

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”

 

About Author
Authorlogo
Name

TekSlate

Author Bio

TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills .