Wednesday August 30, 2006 CSS Wildcard - Solving Cross-browser Problems
Many of the problems I've noticed people having while
developing a web site is browser compatibility issues between IE 6/7, FireFox,
Opera and Safari. And since IE7 removed some of the old hacks we used (the
!important tag and the box hack), it's become even more frustrating.
For starters, now we need to make a special CSS file for Internet Explorer, we
do this by using an 'if statement' in the HTML. And that looks like this:
<link href="file.css"
rel="stylesheet" type="text/css" media="screen" />
<!--[if IE]>
<link rel="stylesheet"
href="file-IE.css" type="text/css" media="all"
/>
<![endif]-->
That being said, I've been using this method for a while now and noticed that
the IE style sheet can get quite large. So I took a step back and tried to
think of an easier way to solve the browser compatibility problems. I then ran
into the CSS wildcard character. The wildcard will override all values (and
browser defaults) defined within it, this is what it looks like, and it should
be located at the very top of your CSS file:
* {
margin: 0px;
padding: 0px;
border: 0px;
font-family: Verdana;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
It will remove all default margin, padding, borders, bolding (anything you want
to define) from ALL elements. These can all be redefined later in the CSS file
like this (for example):
h1,h2,h3,h4,h5,h6{font-weight:bold;}
This method will solve a lot of your browser compatibility problems and can cut the IE style sheet down to only a few elements. it's especially helpful when styling forms since there are a lot of default padding and margin values on forms and form elements that many don't think of often enough.I hope this helps, enjoy.
cheers,
tim
Posted by tcwrigh2 ( Aug 30 2006, 12:58:28 PM EDT ) Permalink Comments [2]
Using the CSS wildcard character has been useful in many cases. I'm curious why you are specifying a default font, and doing so with Verdana?
How about a font family that degrades to a serif or sans-serif?
Posted by John on November 14, 2006 at 08:36 PM EST #
John,
good question. This is what I usually use:
* {
margin: 0;
padding: 0;
border: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
I just shortened it to 'verdana' for blog posting
nice catch!
Looks like you're doing some good work up in Maine
-Tim
Posted by 75.178.191.203 on November 14, 2006 at 09:39 PM EST #