Debugging CSS and Browser Issues

Perhaps, the best tool I can recommend to debug CSS is firefox's Firebug and Web Developer Add-Onns. But sometimes they're just not enough, so I will give you a quick step by step manual of how to debuggin your css code and browser issues.

First, validate your HTML code. Go to http://validator.w3.org/ and simply correct every errors you may find. just copy paste the error to google and with some efforts you'll get the solution how to fix them.

Second, validate your CSS. Go to http://jigsaw.w3.org/css-validator/ and do the same thing as you do with your HTML code.

Third, simplify your CSS. Add new rule at the end of your stylesheet, using global selector and set properties for all elements, like this:

*{
margin: 0;
padding: 0;
}

Then, give border to every block-element so it become like this:

*{
margin: 0;
padding: 0;
border: solid 1px #000000
}

Comment out any css rule you suspect causing the errors, do it one-by-one until the problem recurs, and finally:

Find and research any similar problem through google. You may found some css bugs are well mentioned at expert-exchange. and http://www.positioniseverything.net/.

Hope that helps.

!important on CSS

When a css rule is specified two or more in a document, browser will use the last one. So if we have code like this

body{
text-align: center;
text-align: justify
}

The browser will make text alignment inside the body to be justified. Overriding the text-align: center; part before. With !important, you can define a rules without having to worry some other rules will override it. So if you make the code like this

body{
text-align: center !important;
text-align: justify
}

The text alignment inside the body will be centered, even when it's defined justify on the line below it.

But here comes the best part..

IE6 and the previous versions ignores the !important code (IE7 doesn't ignore it though.)

But you'll survive, I know I did.

Todo so, you have to use the !important code to avoid non-standard CSS expressions. Here's a classic example of how to specify max/min width with IE6> and other browser. As you may know, IE6 doesn't support the max-width declaration.

body {
margin: 0 auto 0;
max-width: 800px;
min-width: 600px;
width:auto !important;
width:800px;
}

It may not solve the problem entirely, but IMHO, it's better than using non-standard code for IE6 like _width or _height. Happy coding

Fieldset and legend on IE6 and Firefox

Take a look at this simple css and html code, here's the css code:

fieldset{
background-color: #c0c0c0;
}

and here's the HTML part:

<fieldset>
<legend>Legend</legend>
<label for="something">something</label>
<input name="something" type="text">
</fieldset>

On firefox, it will be viewed like this:

While on IE6, it will be viewed like this:

And that's quite irritating. I don't know about other browser like safari and opera, but so far, here's a a quick code to solve the problem. You only need to change the css code.

fieldset {
display: block;
background-color: #c0c0c0;
position: relative;
}

legend {
padding: 0;
position: relative;
/* this works for IE6, to move up the legend */
top: -0.7em;
}

/* Hide this rule from IE */
legend {
/* on Gecko based browser we move the legend up with this */
margin-bottom: .3em;
}

The result is like this in Firefox:

And in IE6:

Finally, the background color in IE6 is not exceeded the top border, you can adjust the position of the content by adjusting the number yourself, I'm sure everybody is quite familiar with that.

SetAttribute on IE6 and firefox

Say, you want to create an element using javascript with code like

<div class="myClass" onClick="myFunction()">inner HTML</div>

Now, the way to do it in firefox is by simply using javascript setAttribute like this:

<script language="javaScript">
element = document.createElement("div");
 element.appendChild(document.createTextNode("inner HTML"));
 element.setAttribute("class", myClass");
 element.setAttribute("onClick", "myFunction()");
</script>

But on Internet Explorer, that code won't work. It's broken. The class part should be written className on IE, so instead of >element.setAttribute("class", myClass"); it should be >element.setAttribute("className", myClass");, and what if you have many element attributes that you don't know whether they're applied the same way on IE and firefox ? like >style, id, name, on{Change, MouseOver, etc} ?

So far, here's the quick solution to do it, it's only a try catch block actually :

>
<script language="javaScript">
try {
   element = document.createElement("<div class=\"myClass\" onclick=\"myFunction()\">");
   element.appendChild(document.createTextNode("inner HTML"));
 } catch (e) {
   element = document.createElement("div");
 element.appendChild(document.createTextNode("inner HTML"));
 element.setAttribute("class", myClass");
 element.setAttribute("onClick", "myFunction()");
 }
</script>

Quite quick, eh ?