Welcome to WebmasterWorld Guest from 188.8.131.52
Forum Moderators: not2easy
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.
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.
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 ;)
To overcome this problem, simply add the following to the very top of your CSS file:
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.