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 logo
The main area
The Prompt
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?
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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
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.
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.
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?
There are differences, particularly with form elements, lists and header elements.
W3C do recommend a default style sheet
At least 98% of internet users' DNA is identical to that of chimpanzees
Reply With Quote
Originally Posted by Fang
Bookmarks