[Gllug] Web Site Creation

[James McGuigan]

Lee, Paul wrote:
> A problem I have with CSS is resolving browser compatability problems.
> Something will line up and look nice in Firefox but will look a mess in
> IE (or different versions of IE).

The problem with CSS is that unlike a programming language, you often have to use the
lowest common denominator variant of CSS. This isn't formally specified anywhere, but
after a while doing tableless designs, you will tend to get a feel for what bits to
avoid (or which bits will need browser specific additions).

Most problems can usually be corrected through an extra line or two of CSS, and the
biggest problem is working out what style is causing the problem and making sure your
CSS is referring to exactly the right element. For IE, I will usually have a browser
specific style sheet, that I apply after the main one, and use it to correct IE's
rendering, though I do try to keep it minimal (as it forces you to keep it maintained
when you make changes). You can either use a PHP browser detection script to
conditionally include stylesheet (and check for the existence of a style-ie-only.css
file) or use <!--[if IE]-><style></style><![endif]-->

A good description of the major ones is:
http://www.positioniseverything.net/explorer.html

A method of running multiple versions of IE under windows - it works under windows
but I've tried it under wine and while they report being different versions, they
*seem* to be using the same rendering engine
http://www.skyzyx.com/archives/000094.php


There are also a list of CSS parsing hacks that allow you hide some styles from some
browsers but not others (but I try to avoid these), such as the holly hack
/* \*/ .css { } /* */
(IE escapes the * to hide the first comment close - so doesn't see the rule )


A few common issues and workarounds I've found useful:


The standards say a 100px width box with 10px padding both sides is 120px wide.
IE will include the padding (and border) as part of the overall width.
My usual solution is to have two nested div's, an inner and and outer one, I apply
the fixed width to the outer div and then apply margin and padding to the inner one.
This gives me IE like box model, but at least its consistent.

<style>
  #content-outer { width:200px }	
  #content-inner { margin:10px; padding:20px; }
</style>
<div id='content-outer'><div id='content-inner'>
  <?=$content?>
</div></div>


IE says doesn't accept the min-height rule, though IE treats the height property like
a min-height rule but compliant browsers will crop an element that has a specified
height if there is overflow. The holly hack could be used to specify both and reset
height for non-IE browsers, or my main alternative, add an extra right floating div
(with a height but no width) insider the container, and add a clearing div at the
bottom to force a minimum height.

<div id='content'>
<div id='content-min-height' style='float:right;height:100px'></div>
<?=$content?>
<div style='clear:right'></div>
</div>


IE has a bug with floated-left elements and left margins (also applies if both are
right) where it will double the margin. Solution: don't use margin-left/right on
floats, either use padding or a container div.


IE5 (both 5.0 and 5.5) don't support { margin-left:auto; margin-right:0; } for right
aligning, but require { text-align:right; } on the parent element instead (which
doesn't work for later browsers). This usually requires and IE5 only stylesheet to fix.


When using { background:url('/images/background.png') }, don't add quotes to the url.
While it will work fine in most browsers either way, IE5 mac won't realize those are
quotes and look for a filename that includes them (and is unlikely to exist - thus
the image will not display).


Netscape 4 (not that anyone uses it anymore) will usually choke on non-table based
designs, and show a page that is completely unreadable. The solution is to declare
your stylesheet as type='all'. NS4 doesn't understand this, so will simply display an
unstyled page. Either that or a conditional rule in PHP to hide stylesheets from NS4.

-- 
Rules are written for those who lack the ability to truly reason,
But for those who can, rules become nothing more than guidelines,
And live their lives governed not by rules but by reason.
     - James McGuigan
-- 
Gllug mailing list  -  Gllug at gllug.org.uk
http://lists.gllug.org.uk/mailman/listinfo/gllug