CSS Browser Compatibility Tricks 3

******************************************1
CSS Cross-browser Compatibility issues with inline elements
===========================================================
------------------------------
<a class"buttonlink" href="testone.html">
<img src="test.gif" border="0"/>
<a>

a.buttonlink
{
border: 1px solid #99900F;
padding: 3px;
}

------------------------------

* <a> tag is an inline element and different browsers are having
different interpretations as to how to apply padding to an inline element.

* If we float the <a> tag(inline element),then it behaves somewhat like a block element.

------------------------------

<a class"buttonlink" href="testone.html">
<img src="test.gif" border="0"/>
<a>

a.buttonlink
{
border: 1px solid #99900F;
padding: 3px;
float:left;
}

******************************************2

Waht is “hasLayout”?

******************************************3

Clearing floats
===============

A common problem with float-based layouts is that the floats' container doesn't
want to stretch up to accomodate the floats. If you want to add, say, a border
around all floats (ie. a border around the container) you'll have to command
the browsers somehow to stretch up the container all the way.

The problem
-----------
Let's try it. This is the CSS we'll use throughout the page:

div.container {
border: 1px solid #000000;
}

div.left {
width: 45%;
float: left;
}

div.right {
width: 45%;
float: right;
}

<div class="container">
<div class="left">
</div>

<div class="right">
</div>
</div>


We want the black border to go around both our floating columns. That doesn't happen,
though. The container div itself has no height, since it only contains floating elements.
Therefore the border stubbornly stays at the top of the floating columns.

The old solution
----------------
The old solution to this problem required you to add an extra element with clear:both
to the container. Once it was in place the container contained a non-floating element,
which means it stretches itself up to accomodate it:

The new solution
----------------
It was Alex Walker who first posted a new, simpler solution, though he gives the
credits for actually inventing it to Paul O'Brien. In any case, the solution seems to be:

div.container {
border: 1px solid #000000;
overflow: auto;
width: 100%
}

The width is necessary to trigger "hasLayout" in Explorer Windows

The tricky bits
---------------
A few points merit extra attention:

1. The trick works with three of the four overflow values: auto, hidden and scroll.
Of course, using the last value will show scrollbars, regardless of whether they're needed or not.
2. Some browsers also need a width or height for the container div.
3. The browser may show scrollbars when the content escapes beyond the specified width.

width or height required
-------------------------
The use of a width or height declaration is required to make the effect work in Explorer
Windows and Opera. If you don't include it Explorer Windows continues to show the border
at the top of the columns, as if there were no overflow. Opera completely hides the
content of the container.

A width:100% is a neat starting point, although more complicated layouts may
require other values.


Complete Code
-------------

div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}

div.left {
width: 45%;
float: left;
}

div.right {
width: 45%;
float: right;
}


<div class="container">
<div class="left">
</div>

<div class="right">
</div>
</div>


******************************************4

W3C box model AND IE Box Model
==============================

IE7+ and all other browsers uses the W3C box model while IE6 uses the IE Box Model in quirks mode.

The IE box model (known as the traditional box model), includes the padding and border in the width/height of an element(content area).

Under the IE box model, a box having a width of 100px, with 2px padding on each side, a 3px border, and 7px margin on each side, will have a visible width of 114px.

The W3C box model (which is the standard box model), excludes the padding and border from the width/height of an element(content area).

Under the W3C box model, a box having a width of 100px, with 2px padding on each side, a 3px border, and 7px margin on each side, will have a visible width of 124px.

How make IE use the W3C box model
---------------------------------

In order to make IE use the W3C box model (which is what every other browser uses), your page needs to be rendered in Strict mode. By default, IE renders in Quirks mode.

In order to trigger Strict mode in IE, you must specify a DOCTYPE. You can use any of the following doctypes:

HTML4 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.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.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Your DOCTYPE must be the first thing to appear on your page. It is even before the <html> tag, on its own line. (Adding an <?xml> prolog will cause IE to go back in Quirks mode, so remove it if you have one).

******************************************5

----------------------
Your best approach is to create a separate stylesheet that is for IE6 only, and leave the rest of your CSS in working condition. You can load an IE6 only stylesheet by using the following in your HTML <head>:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" />
<![endif]-->

----------------------

******************************************6

5 CSS Tips for Cross Browser Compatibility
==========================================

1. IE6 Double Margin Issue.
---------------------------
This has been well documented but bears repeating here. If you are just starting with css based layouts (as opposed to table based layouts) this will save you hours of maddening trouble shooting. The problem is that IE6 will double the margin that is in the same direction of a float. For example, if you float two boxes to the left and next to each other and the left box has a left margin of 10px, in IE6 you will get a left margin (on the left box) of 20px. It’s a bug.

The code in the case of this example was as follows:

.outer { //creates the outer box
width: 400px;
height: 200px;
border: 1px solid #000000;
background: #cccc66;
}

.leftbox {
float: left;
width: 100px;
height: 90px;
margin: 10px 10px 10px 10px;
border: 1px solid #000000;
background: #cccc22;
}

.rightbox {
float: left;
width: 100px;
height: 90px;
margin: 10px 10px 10px 10px;
border: 1px solid #000000;
background: #cccc99;
}


Fortunately, the fix is rather easy, make sure to add display:inline;
to the float:left; and the margin will correct itself as below:


.outer { //creates the outer box
width: 400px;
height: 200px;
border: 1px solid #000000;
background: #cccc66;
}

.leftbox {
float: left;
display: inline;
width: 100px;
height: 90px;
margin: 10px 10px 10px 10px;
border: 1px solid #000000;
background: #cccc22;
}

.rightbox {
float: left;
display: inline;
width: 100px;
height: 90px;
margin: 10px 10px 10px 10px;
border: 1px solid #000000;
background: #cccc99;
}

2. This is a design technique.
------------------------------
When I’m building a new theme from scratch I’ll often start with all of my margins set to 0px. Boxes will float next to each other but I’ll move them out later. I first work through padding on my div’s then start to adjust margins. Once you’ve build a site/theme or two it get’s much easier but I’ve found it to be quicker and easier to start with 0 margins and work from there rather than going back and trying to figure out why things do work correctly cross-browser after development.

* Start designing with magins of all div's set to 0.
* Then First adjust padding then margin.

3.Image Resizing in CSS.
------------------------
The quick lesson here is don’t do it. Generally browsers do a less than ideal job of dynamically rendering the image and cross-browser it can create inconsistencies. On top of that, and a better reason not to do it, is that you still have to load the full image on that page which makes your page weight (how much “stuff” has to be downloaded for the page to fully render) much heavier and thus slower. The easy solution is just don’t do it, resize your images (and optimize them) with another tool and upload accordingly.

4. Clear Your Floats:
---------------------
This refers to divs which serve as containers to other divs and should wrap around them but sometimes don’t.

The biggest problem is that you may not notice it until you try to put a background in place and it doesn’t look right. The issue can generally be fixed by adding “overflow:auto;” or “overflow:hidden;” to the containing div (container div). You’ll also want to make sure to specify a width or heigh to trigger hasLayout for IE6 compatibility (use something like height:1% if you need to, works well).

5. Font Sizing:
---------------
In the body tag of your style sheet set your font as a percentage of the default size (16px). So for a 12pt font set the font size to 75% (font-size:75%) then throughout the remainder of the body,where you set font size,do so using em (not px or pt)

******************************************7

Here is a list of common fixes for IE 6 box model problems
http://css-discuss.incutio.com/?page=BoxModelHack

http://anthonyshort.com.au/blog/comments/how-to-get-cross-browser-compatibility-everytime/

******************************************


******************************************