Jakob,
Take a look at http://www.quirksmode.org for more information on this issue. It's the infamous "box model" that has plagued developers for quite a while. The short answer is: IE does not calculate the height/width the same way that FF does, depending on the "mode" you set for your page interpretation.
Hope the link helps...
Ric
|
|
Expert:
|
rcastagna
|
|
Date:
|
Oct 09, 2006
|
|
Time:
|
21:24
|
|
|
|
Votes: Good (0) | Bad (0)
Login to rate this answer
|
|
Ric,
Yes, the "box model". Heard about it, but thought that there was only one standard for it.
Apparently IE used to use an alternative box model, where "width" specifies the total width of the element, including the "padding".
In the "correct" box model, however, "width" is the width of the element without the padding.
In my example:
<div style="background: #c0c0c0; width: 100px; height: 100px; padding: 10px"></div>
according to the "correct" box model, the total width of the grey box, that this will display, will be 100 + 2 x 10 px = 120px
Specifying a doctype like
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-t...
will trigger IE to use the same "correct" box model as FF. That way it is easier to make cross-browser compatible web pages.
Personally, I would have preferred IE old "quirky" box model, so that the "width" is the actual width of the box shown. Then the box would stay the same no matter how I choose to change the padding.
|
|
Expert:
|
jgivoni
|
|
Date:
|
Oct 09, 2006
|
|
Time:
|
22:37
|
|
|
|
Votes: Good (0) | Bad (0)
Login to rate this answer
|
|
you can use "display: inline" to fix this!
Your code would look like this
<div style="display: inline; background: #c0c0c0; width: 100px; height: 100px; padding: 10px"></div>
An voila, your page now displays the way you want it to look in both browsers :)
read more about it here if you're interested:
http://www.positioniseverything.net/expl...
|
|
Expert:
|
dascope
|
|
Date:
|
Oct 10, 2006
|
|
Time:
|
17:04
|
|
|
|
Votes: Good (0) | Bad (0)
Login to rate this answer
|
|
|
Not exactly, dascope...
If I leave out the DOCTYPE, IE displays it exactly the same way as without "inline".
FF however shrinks the box to fit the content (none).
If I keep the DOCTYPE, IE also shrinks the box to fit the content - since it's empty, the box disappears altogether.
So I wouldn't say this solution is very solid, but I do get the point that the width specified includes padding if I use "inline".
|
|
Expert:
|
jgivoni
|
|
Date:
|
Oct 20, 2006
|
|
Time:
|
21:14
|
|
|
|
Votes: Good (0) | Bad (0)
Login to rate this answer
|
|
|
|
|
|
|
This question has been answered, and points have been rewarded to the following experts:
| rcastagna: |
15 |
| jgivoni: |
30 |
| dascope: |
5 |
You're welcome however to comment or give additional information or if you wish, you have the ability to write an Answer Summary for this question by clicking on the "Answer Summaries" Tab.
|
|