Select Categories Below
Advertisement
Start Your Own Q&A Site
Create your own Q&A site easily, allowing you to quickly grow a new community around any subject matter or generate new organic traffic for your existing website.
Status: Closed Points: 50 Time: 00:18 - Oct 09, 2006
jgivoni
Why does this give different result in Internet Explorer 6 and Firefox 1.5? <div style="background: #c0c0c0; width: 100px; height: 100px; padding: 10px"></div> Without the padding, both produces a 100x100 pixel grey box. But add the padding and FF adds 2x10 pixels to both width and height of the box. IE doesn't change the size. Which one is right? (And why?) Jakob
Categories:
Add Categories
When adding more than one category, separate them with commas.
rcastagna
Date:: Oct 09, 2006
Time:: 21:24
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
Time:: 22:37
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.
dascope
Date:: Oct 10, 2006
Time:: 17:04
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...
Date:: Oct 20, 2006
Time:: 21:14
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".
onlyab
Date:: Dec 28, 2010
Time:: 23:26
Thanks the author. The computer problems always drive me crazy, I want a program to solve my slow computer, several days ago my friend recommend me a software tuneup360, now I'm waiting for the result.
Question Answered
This question has been closed, and points have been rewarded to the following experts:
You're welcome however to comment or give additional information or if you wish, you have the ability to write a Tutorial in the Tutorial Area.
Answer this Question
New User
Email:
Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address
Registered User
Username:
Password:
Forgot Your Password?
Enter your email address below and we will resend your login information to you.
Login Information Sent
Questions
whats the best food to eat during midnight?
How to identify the tiffany jewelry? www.tffanycheapmall.com.
Send an email alert to each user of the php application based on criteria
How I Increased My AdSense Earnings?
how to choose the lady dress ?
How can I fulfill the minimum requirement to make your computer support 3D?
You have 100 characters to use
Rank
Expert
Points
1.
10354
2.
6493
3.
5596
4.
4848
5.
3487
6.
2840
7.
2770
8.
2303
9.
1820
10.
917
Register today to share your knowledge with the community and be recognized and rewarded for your contributions.
Register Here
"Psst, Quomon is a great site. Pass it on." Tell a Friend | Link To Us | Save to Delicious | Digg it
Language Options
English:
Español:
Sponsors
Questions and Answers Software