Welcome to my world!
Social media, podcasting, .NET development, everything Apple, and lots of hacks and mods. This is my personal site. As such, it doesn't have a set theme, so don't expect consistency!
-
Getting Firefox to zero out the margins…like for realz this time.
Posted on November 27th, 2007 No commentsThis problem can hit anyone working with Firefox, but especially ASP.NET developers. The old-school html way of making sure that you don’t have an ugly space on the top or sides of your page was to specify zeros in the body tag like so:
<body leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>
The problem is that all four of those are not valid in XHTML 1.0 Trasitional, and if you are using Visual Studio you will most likely get warnings or errors because if it.
The proper way to do this is using CSS, like so:
BODY {margin:0px; padding: 0px;}
The problem that I had was that this worked fine in IE, but still had the margins in Firefox! Grrr. After googleing and bashing my head on the desk for a while, I finally came up with the answer. Most browsers set some default css values for certain elements if none is specified in your code. Even though I had set the body to have zero padding and zero margins, there was still an element that was getting a default margin by Firefox. It turned out to be the FORM tag. If you create a new aspx page with Visual Studio, it will automatically put a form tag as the first thing inside the body of the page. You also have to set the margins here to get rid of that space, and fortunately that is very simple once you know what the problem is. Just add one more line to your css. Both of them together will look like this:
BODY {margin:0px; padding: 0px;}
BODY FORM {margin:0px; padding: 0px;}Poof! The annoying space goes away. This same issue can crop up if anytime a margin hasn’t been set for whatever element is at the top of your page, a <p> tag, an <h1>, <h2> or <h3>, or pretty much anything else as well.
Leave a reply
You must be logged in to post a comment.