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” |
About Author
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 .