The first trick is to design for a browser that supports CSS properly (Like firefox!)
Then, using a special feature supported by IE provide CSS corrections where needed.
It works by first setting up a CSS file that is used by all browsers (with the correct style settings) and then, as CCS uses cascading for setting properties, reset properties for IE browsers by adding this AFTER the main call for the main CSS file:
You can add as much as you need to correct IE display problems, and the corrections are skipped by non IE browsers.Code:<!--[if IE]> <style type="text/css" media="screen"> /* This sorts out IE styles */ body { font-size: 100%; } <![endif]-->
Personaly, as I use PHP I use an "include" call to call a single file with all the IE correcting in. In theory you could call another sytlesheet withint the IF IE section, but I have never tried this to see if it works.
A sample header is below:
In this example, a stylesheet is called first that renders the page as required using correct CSS styling. Then the IF IE is read ONLY BY IE to correct any layout short falls in IE. Typically this is usually to do with positioning or margins/padding issues.Code:<head> <title>Loans For Bankrupts</title> <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <META name="KEYWORDS" content="key,words"> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> <!--[if IE]> <style type="text/css" media="screen"> #Menu ul li { float: left; width: 100%; } #Menu ul li a { height: 1% } #PageContent { padding: 0px 25px 15px 0px; } </style> <![endif]--> </head>
Hope this helps![]()
LinkBack URL
About LinkBacks
Reply With Quote

Bookmarks