dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: Firefox Calculates Heights Incorrectly

  1. #1
    Join Date
    Dec 2006
    Posts
    107

    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 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.
    Attached Images Attached Images

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Looks like a problem with the margin/padding of form elements.
    Try setting these to zero.

  3. #3
    Join Date
    Dec 2006
    Posts
    107
    Quote Originally Posted by Fang
    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?

  4. #4
    Join Date
    Feb 2006
    Posts
    2,927
    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.
    Last edited by mrhoo; 01-24-2007 at 11:20 AM.

  5. #5
    Join Date
    Dec 2006
    Posts
    107
    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.

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Quote Originally Posted by FredAt
    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

  7. #7
    Join Date
    Dec 2006
    Posts
    107
    Quote Originally Posted by Fang
    There are differences, particularly with form elements, lists and header elements.
    W3C do recommend a default style sheet
    Thank you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles