******************************************************
*********To aligne a div in center ************
IE --> text-align:center
* using in 'body' tag
-----------
FX --> margin:0 auto
* using in div which is needed to align center.
* means top and bottom '0' , left and right 'auto'.
******************************************************///
How do I display a basic style sheet for really old browsers?
--------------------------------------------------------------
Netscape 4 and other old browsers don’t understand the "import" method of linking to a style sheet. We can use this fact to our advantage, serving one set of styles to these browsers, and leaving newer browsers, which understand import, to read the full style sheet.
In the head of your document, attach a basic style sheet using the linkelement—this can be read by all browsers that support CSS. Then, attach your full style sheet (or style sheets) using the "import" method, which will not be read by the old browsers:
Keep in mind that the newer browsers will read both the linked and imported style sheets, so within your site’s main style sheet, you’ll need to override any of the basic styles that you don’t want to appear in newer browsers, as well as applying the styles you want users of newer browsers to see.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<title>Serving a basic style sheet</title>
<link rel="stylesheet" href="basic_basic.css" type="text/css"
media="screen"
/>
<style type="text/css" media="screen">@import
"basic_default.css";</style>
</head>
----------------------
<link rel="stylesheet" href="basic_basic.css" type="text/css"
media="screen"
/>
<style type="text/css" media="screen">@import
"basic_default.css";</style>
----------------------
You don’t even need to add a basic style sheet—if you simply use import on its own, those old browsers will display the document using the browser’s internal styles.However, the use of the basic linked style sheet offers an additional benefit:
******************************************************
How do I hide some CSS from a particular browser?
-------------------------------------------------
As no browser has a perfect implementation of CSS, we can make use of bugs and features that are not supported in particular browsers to hide certain properties from those browsers. These kinds of techniques are referred to as CSS hacks or filters.
The Box Model Hack
------------------
Internet Explorer 5 and 5.5 interpret the CSS box model incorrectly. A correct implementation of the CSS box model will add to the specified width of a given block any padding and borders that have been applied to that block, to calculate the actual visible width of the block. So a div that’s 200 pixels wide, and has 20 pixels of padding on both the right and left, and a five-pixel border, will have a total width of 250 pixels. In the world of Internet Explorer 5, however, the width of this div will total 200 pixels including the borders and padding. As you can imagine, this rendering issue will make a mess of any CSS layout that relies on the precise widths of page elements.
#mybox {
padding: 20px;
border: 5px solid #000000;
background-color: #00BFFF;
width: 200px;
}
To make Internet Explorer 5 display the box at the same width as newer browsers that accurately comply with box model implementation, we need to specify a width of 250 pixels for the box in Internet Explorer 5 and 5.5 only.
To achieve this, we can take advantage of a bug in the Internet Explorer 5/5.5 CSS parser, using a method developed by Tantek Çelik:
#mybox {
padding: 20px;
border: 5px solid #000000;
background-color: #00BFFF;
}
#mybox {
width: 250px;
voice-family: "\"}\"";
voice-family: inherit;
width: 200px;
}
html > body #mybox {
width: 200px;
}
This trick works because, with the hack in place, Internet Explorer 5/5.5 does not see the second or third occurrences of the width property, and therefore renders the box at the first specified width (250 pixels). Standards-compliant browsers render the box at the second, correct width (200 pixels). The final declaration addresses
browsers that have the same parsing bug as Internet Explorer 5/5.5, but implement a correct box model, ensuring that they display the correct width. This has become known as the “be nice to Opera 5” rule, as it’s one of the browsers affected.
Choosing a Hack
----------------
The available information on hacks changes all the time as new browser versions are released, and new hacks discovered, so it’s worth bookmarking a site that has an up-to-date hacks list, and checking it for new information if you experience problems with a specific browser.
My favorite sites for this type of information are:
CSS Filters from the now-defunct dithered.com, at Communis (http://www.communis.co.uk/dithered/css_filters/index.html)
the CSS Hack category on the CSS-Discuss Wiki
http://css-discuss.incutio.com/?page=CssHack)
the articles on Position Is Everything
http://positioniseverything.net/articles.html)
Commenting Hacks
-----------------
Once your hack is in place, be sure to comment it properly. When you come back to the site at a later date, you may not remember why you implemented the hack, and anyone who takes over from you or works on your team may become confused by the less common hacks if they can’t see at a glance what’s going on. Here’s an example of appropriate hack commenting:
/* box model hack see
http://tantek.com/CSS/Examples/boxmodelhack.html */
#mybox {
width: 250px;
voice-family: "\"}\"";
voice-family: inherit;
width: 200px;
}
html > body #mybox {
width: 200px;
}
-------------------------
******************************************************
How can I send different styles to a particular browser?
--------------------------------------------------------
At the time of writing, the biggest problem for CSS developers is the large number of people still using Internet Explorer 6—a browser that provides poor, buggy support for much of the CSS spec. While Microsoft fixed most of the well-known bugs and added support for much more of the CSS 2.1 spec in Internet Explorer 7, we’ve been left with a group of users who cannot or will not upgrade beyond Internet Explorer 6.
How do I hide some CSS from a particular browser.
CSS Hacks or Filters
--------------------
The first option is to use a CSS hack within your style sheet to show specific information
to the browser. For example, the "star html hack" is a common hack that uses a bug in Internet Explorer 6 and 5.5 to render rules placed after "* html". This hack is commonly used to get around the lack of min-height in Internet Explorer 6:
/* rules for standards-savvy browsers, including IE7 */
.box {
min-height: 100px;
}
/* for IE6 and below */
* html .box {
height: 100px;
}
Internet Explorer 6 does not support min-height (the minimum height an element should take), but it incorrectly interprets heightas min-height. So, though height is used to specify a fixed height in other browsers, Internet Explorer 6 takes it to mean the minimum height, so the box will expand taller than 100 pixels if need be. Of course, if we were to serve more compliant browsers height when we meant min-height, they would chop off the bottom of our content in cases where it became taller than 100 pixels!
To work around this issue, we first use min-height correctly for all of the other browsers; then, we use the "star html hack" before the selector that only Internet Explorer5.5 and Internet Explorer 6 will take note of. More compliant browsers will ignore this hack.
Conditional Comments
------------------------------
The second method we can use to target our rules to specific browsers is conditional comments. We use these to link to our page a style sheet that’s read only by the version of Internet Explorer that’s targeted by the comments. This approach is very useful if you have a lot of rules that are specific to a particular version of Internet Explorer. The conditional comments need to go into the head of your document—you’d usually include them as the last style sheet in the head, as it’s likely that you’ll override rules that apply to other browsers with your Internet Explorer tweaks.
First, create your style sheet containing the Internet Explorer fixes—you don’t need to duplicate your entire style sheet, just override or add the rules necessary to help Internet Explorer behave. Then, include the link to the style sheet within a conditional comment in the head of your document, like this:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Choosing whether to use a filter or conditional comments will depend on the amount of edits you need to make to your style sheet to have Internet Explorer 6 render your page appropriately.
If you have just a couple of min-height fixes to add, it may make more sense to use the star html hack and be able to keep that Internet Explorer 6 information in the same place as the real style rules (commented, of course!). But if you have a lot of changes to make, another style sheet will keep them tidily out of the way. In the solutions that follow, we’ll look at the use of conditional comments to serve Internet Explorer 6 an additional style sheet as well as a JavaScript file.
******************************************************
What is DOCTYPE switching and how do I use it?
----------------------------------------------
You’re developing a site using XHTML and CSS, testing in Internet Explorer 6 and 7, and it all seems to be going well …
Then you look at the layout with Mozilla and realize it’s displaying very differently to the way it’s rendering in Internet Explorer. What’s going on?
Internet Explorer bugs aside, the most likely issue is that Internet Explorer rendering your document in Quirks Mode. Many modern browsers have two modes. Quirks Mode renders documents according to the buggy implementations of older browsers such as Netscape 4 and Internet Explorer 4 and 5. Standards Compliance Mode renders documents as per the W3C specifications.
Documents that use older DOCTYPEs, are poorly formed, or have no DOCTYPE at all, display using Quirks Mode.
Documents that are using strict HTML or XHTML DOCTYPEs render using Compliance Mode.
Unfortunately, it’s not quite as simple as that where Internet Explorer 6 is concerned. For example, if you include anything at all above the DOCTYPEstatement—including the XML declaration—Internet Explorer 6 will render in Quirks Mode.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>DOCTYPE Example</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="box-model-hack.css" />
</head>
we included the xml declaration above the DOCTYPE. If you delete this from the document, so that the DOCTYPEdeclaration is the first thing on the page, as shown in the code below, Internet Explorer will render in Compliance Mode, as Figure 7.11 illustrates. Internet Explorer 7 will not switch into Quirks Mode when it encounters an XML prologue, however, so it behaves much like the other newer browsers in that respect.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>DOCTYPE Example</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="box-model-hack.css" />
</head>
If you’re building a new site, I recommend that you aim to meet the requirements of Compliance Mode, whichever DTD you’re working to. New browsers will be likely to support the W3C standards and will render pages using those standards whether or not they support any DOCTYPE switching.
The following DOCTYPEs should force the browsers that support DOCTYPE switching—Internet Explorer 6, Mozilla, Internet Explorer 5 Mac, and Opera 7—into Compliance Mode. Remember that even a comment above the DOCTYPE statement will switch Internet Explorer 6 back into Quirks Mode.26
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
A full list of DOCTYPEs, and their effects on various browsers, is available at
http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html.
******************************************************
Validating your documents and CSS
-----------------------------------
First, I checked my document at the W3C markup validator,30 and my CSS at the W3C CSS Validator.31 I wanted to make sure that there was no problem within my document, or the CSS, that would cause Internet Explorer 6 to behave strangely.
http://validator.w3.org
http://jigsaw.w3.org/css-validator/
Validating your documents and CSS is an important step in ensuring that your site renders correctly in standards-complaint browsers. Sometimes, however, the error and warning messages can be very confusing.
You can validate your (X)HTML documents online at the W3C Validator;34 CSS documents can be validated at the W3C CSS Validator.35 Many authoring tools, such as Dreamweaver, have inbuilt validators, and plugins are available for browsers such as Firefox to help you to validate your pages.
******************************************************
No comments:
Post a Comment