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