Firefox Calculates Heights Incorrectly
I am in the process of creating a dialog box using CSS + JS + HTML. The DIV structure of the dialog is roughly as follows
The Outer Frame
A Caption bar inside the outer frame
The body of the dialog
The main area
The Edit area
The Button Panel
In my CSS I use the following
- Arial as the text font
- 1em as the text size
- 8.6em as the height of <div main>
- 4em as the height of <div prompt>
- 2em as the height of <div edit>
- 2.5em as the height of <div button>
- This makes a total of 8.5em - I leave out 0.1em to enable dispay of the 0.1em border on the <div frame> that forms the frame of the dialog.
In MSIE6 this shows up just as I expect - the upper of the two images in the attached PNG file. However, in FF2 I find that the button panel "spills out" of the main div. Either I have been overworking and cannot do my math or else there is another problem here - i.e. a browser quirk or bug.
I would much appreciate any help - it goes without saying that the images show the relevant divs in garish colors merely to help explain the problem.
Looks like a problem with the margin/padding of form elements.
Try setting these to zero.
Thanks. Are there known issues with FF and IE interpreting margins and padding differently? If so, is there some place I can read up on the differences?
Originally Posted by Fang
Fred- the issues are with IE, in that firefox (and Opera, Safari and most other modern browsers) conforms more closely to the 'rules' of css than IE.
You could make IE behave more like the other browsers by using a strict doctype in your pages, for example:
This signals IE to use as much of the css as it is able, and the result comes a lot closer to the other browsers than what IE calls 'quirks mode', which is the mode used when no doctype is present.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
There will still be some differences in browser rendering, especially in their default margins and paddings, and you always have to test in as many browsers as you can, but using a doctype can save a lot of grief with your style sheets.
Last edited by mrhoo; 01-24-2007 at 11:20 AM.
Thanks - with Quirksmode disabled IE did something very similar to FF so I now have a better way to resolve the problem
Last edited by FredAt; 01-24-2007 at 11:34 AM.
There are differences, particularly with form elements, lists and header elements.
Originally Posted by FredAt
W3C do recommend a default style sheet
Originally Posted by Fang
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)