Fixing Firefox CSS Problem

Class, we'll go technical today.

Someone reported to me that this site was having display problems in FireFox browser. I had downloaded the much talked about browser and had it running, viewing this site. While every other HTML components are in place, the divisions and boxed layouts were rendered with missing two to four letters of text content (as if cut off at the ends). I tried viewing previous layouts of the site relying heavily with styled divisions to display compact boxed areas (divisions with paddings and borders); all were having similar problems with cut off end texts.

I had to search through Google for possible solutions for this and successfully found a useful simple workaround in CSS. Box model issue was mentioned and I inserted the single line of code below to all of my DIV styles in this site's style sheet.

  -moz-box-sizing:border-box; box-sizing:border-box;margin:0;padding:0;

In a DIV tag style, the line code would appear as a sample below:

DIV#main
{
   -moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;
   width:100%;
   height:100%;
   padding-top:10px;
   padding-left:20px;
   padding-bottom:10px;
   padding-right:15px;
}

Though still unfamiliar with how FireFox handles CSS display, the code worked for my site in Mozilla FireFox the same way as it is in Internet Explorer.

I haven't tested the site with Netscape though. Most Internet users, according to statistics are either using FireFox or IE. With that, I assume Netscape is dead.

Or will it rise up again from the dead?

Me, I'm still loyal to Maxthon. Try it, you may be surprised.