This entry will be short and to the point.

After many, many Google searches and following a slew of advice to address the problems web designers face daily with the various browsers on the market, I have found the solution which seems to be working in most situations – if not all – in which I run into problems.

This hack does not attempt to handle AOL nor Opera nor Internet Explorer 5 browser issues. There are limits to how much I need to worry about ‘minority users’ and (no insult intended) the aforementioned ones are outside of our priorities. The browsers and systems I work to play nicely with my designs are: Firefox and IE7 on Vista and on XP plus IE6 on XP and then Firefox and Safari 3 on the Mac (might also apply to Safari 2 but I have never tested it).

Not trying to say this is the hack to handle ALL cross-browser issues, BUT, this is the hack which I use with success when I need to address the different browsers selectively. The following example works for any ID or any selector. This is just an example. Sometimes Safari works just fine and then you can skip on those specific lines. Adjust to gusto.


#page { /* code good for all browsers */
width: 900px;
margin: 0 auto;
position:relative;
}

#page { /* for IE7 and Firefox */
*top:-28px!important; /* IE7 */
top:-14px; /* Firefox */
}

html*#page { /* for Safari and IE6 */
top:0px; /*seen only by Safari*/
_top:-24px; /*seen only by IE6 for PC*/
}