Extra space above <form> in Mozilla 1.73

No extra space in IE

[tr95]

On one of my sites, I have a common FrontPage top shared border containing a 100% wide table with three columns of undefined width. The left column contains the logo, the center column contains the top nav bar (text links), and the right column contains a search form. I previously had included Advanced Search as the last choice in the top nav bar, but I revised the top shared border and have moved Advanced Search into the right column below the search form to make it easier to spot.

After some experimentation, I have the new top shared border displaying perfectly in IE, at least on my display. I did so by splitting the right column into two stacked cells and putting Advanced Search in the bottom cell. (Because space is tight, the Search button wraps below the search text input line in the top cell.) I added an inline style to the <form> tag in the top cell to eliminate wasted white space below the form in IE. I found that margin-bottom:-20px works perfectly. Any greater negative margin causes "Advanced Search" to partially obliterate the Search button, and any less results in wasted extra space below the form.

Unfortunately, in Mozilla, there is extra white space above the form, and I have been unable to figure out how to get rid of it. This forces the right column down in Mozilla, wasting valuable space at the top of every page. Since IE is the dominant browser, I can live with the problem, but would prefer to solve it if possible.

There is also more white space below the form in Mozilla because I elected to put Advanced Search in its own cell. When I simply separated Advanced Search from the Search form with a <p> tag, there was extra space in IE but not in Mozilla, and when I used a negative bottom margin style to fix IE, it caused Advanced Search to overlap the Search button in Mozilla. Using separate cells, there is much more extra space below the form in Mozilla than in IE, which wouldn't matter if I could get rid of the extra space above the form in Mozilla.

My <table> definition includes border="0" cellpadding="4" cellspacing="1", and all <td> tags include valign="top". <p>etc.</p> is inside <form>etc.</form>, and all the <input> tags are inside the <p> tags. (Moving the hidden <input> tags outside of the <p> tags makes a difference in spacing below the form but does not affect the extra space above the form in Mozilla.) I tried adding a style of margin-top:0 to the inline <form> style definition, but it makes no difference.

This isn't the only place where unwanted extra space appears above a tag in Mozilla but not IE. There is a large amount of blank space above <h1> tags in Mozilla but not in IE. This forces all pages down on the screen in Mozilla, wasting valuable real estate.

[pageoneresults]

Hello tr95. You can use CSS to control the space above and below block level elements. For example...

form{display:inline;}

or

form{margin:0;}

Same applies to your heading tags...

h1{margin:0;}

[tr95]

The styles you suggest are irrelevant to the question I have posed. If you read my original message, you will see that I have used a negative bottom margin style to overcome the extra space below the form in IE. (A margin:0 style is useless in my situation.)

However, no top margin style affects the extra space above the form in Mozilla. This is a Mozilla-specific problem, as my page displays perfectly with the styles I am using in IE. The same is true with <h1> -- the display is perfect in IE but there is wasted space above in Mozilla.

The solution of course is not to use Mozilla, but perhaps 5% of readers are using it. In a disclaimer that is not prominent, I have warned users that the site does not display properly in Mozilla.

[dcrombie]

Different browsers have different defaults for margin and padding on HTML elements.

For example, lists are indented in IE using "margin-left" wheras Mozilla browsers use "padding-left". Generally, if you set margin and padding to 0 (or fixed values) to start with then you can code independent of the browser.

The real problems start when IE decides that certain paragraphs or headings don't have a margin-top (eg. when it's the first H1 or P in a TD) or when it inserts it's own padding (eg. the 3px extra padding for text next to floated content).

To blame Mozilla browsers makes no sense as they follow the documented standards. IE on the other hand hasn't been updated for 2-3 years and we're still working out the hacks they used ;)

[MatthewHSE]

As pageoneresults and drcrombie have said, the "problem" is simply different browsers applying different margin values by default. Normally, with a display problem like this, you can count on Mozilla to get it right, while IE, though perhaps doing what the designer wants, is actually doing it wrong according to web standards.

To overcome this problem, simply add the following to the very top of your CSS file:

* {
 margin: 0;
 padding: 0;
}

This will automatically "set the defaults" for margin and padding for all page elements to zero. Starting from a clean slate like that, you can then use other CSS rules to specify exactly what margins you want.

The solution of course is not to use Mozilla,

Wrong, the solution is to code a site properly so it will work cross-browser! ;) (See above.)

In a disclaimer that is not prominent, I have warned users that the site does not display properly in Mozilla.

Then be prepared to lose whatever visitors read that disclaimer. I'm a Mozilla FireFox user and won't go back to a site that tells me my browser - arguably the best available - isn't good enough for them. Particularly when the "problems" are with the page instead of the browser.