HTML vertical spacing differs between browsers

From FacileWiki

Unappropriate use of WYSIWYG editor for Static Text/HTML elements

It is a common mistake of Facile Forms beginners to enable the WYSIWYG editing feature for the Static Text/HTML elements. While this feature has its use when you need to enter largers portions of HTML, it may screw your layout when entering simple labels. The reason is, that most WYSIWYG editors will automaticly wrap the entered text in paragraph-tags, and since line-spacing within paragraphs is not by default equal on all browsers, it will cause vertical missalignment of labels depending on the browser. Allthough this is worked around by fixing your CSS as described below, my recommendation is to allways have the WYSIWYG editor disabled in Facile Forms configuration and only temporarly enable it when it is really required.

CSS Issue: default line-height is browser-dependent

The default line-height of browsers is not the same and therefore might make your static Text/HTML elements be perfectly displayed on one browser, but overlap the other. The solution is to define explicit line-height in CSS wherever a font-size is defined, that way presentation is allmost(*) exactly the same on all browsers.

So check your CSS definitions to have line-height defined everywhere a font-size is selected, for example:

body {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 14px;
}

td, tr, p {
    margin: 5px 0px 5px 0px;
    padding: 1px 1px 1px 1px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 14px;
    color: #333333;
}

h2 {
    margin: 8px 0px 8px 0px;
    padding: 0px;
    color: #395E82;
    font-weight: bold;
    font-size: 16pt;
    line-height: 1.5;
}

(*) Allmost, since the fonts itself may be slightly different, so word wrap may occure at different places in running text. I know no other way to handle this but to leave enough space between elements.

| Terms of Use | Privacy | Sitemap |
Editing tools
Personal tools