473,385 Members | 1,588 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Calculating Width?

Hi,

I've noticed a different render behaviour between FF and IE, and now I'm not
sure how to handle this:

<html>
<body>
<div style="width: 100%; padding: 30px; background-color:
#ffd;">Test</div>
</body>
</html>

IE subtracts margins, borders and padding from width whereas FF adds them
up. Result: The above HTML produces a scrollbar in FF.

The CSS spec says "The box width is given by the sum of the left and right
margins, border, and padding, and the content width." - IE seems to
interpret the width parameter as "box width" whereas FF interprets it as
"content width".

Actually, I prefer the IE rendering, because I don't know how to define a
full width coloured block following FF. Any suggestions?

Regards,
Axel Dahmen
Jul 21 '05 #1
2 2152
"Axel Dahmen" <NO_SPAM@No_Spammer_Knows.invalid> wrote in message
news:co**********@online.de...
Hi,

IE subtracts margins, borders and padding from width whereas FF adds them
up. Result: The above HTML produces a scrollbar in FF.


Take a look at http://www.ericmeyeroncss.com/bonus/render-mode.html

Scroll down to where he talks about the box model...

--------------------
My e-mail address doesn't have a 2 in it.
Jul 21 '05 #2
Thanks, Dana, that was really enlightening to me.

Until CSS3 becomes common, did someone come up with an idea before to define
a full width coloured block having padding according to strict CSS2?

TIA,
Axel Dahmen

-----------------
"Dana Cartwright" <da******@weavemaker.com> schrieb im Newsbeitrag
news:z0******************@twister.nyroc.rr.com...
"Axel Dahmen" <NO_SPAM@No_Spammer_Knows.invalid> wrote in message
news:co**********@online.de...
Hi,

IE subtracts margins, borders and padding from width whereas FF adds them up. Result: The above HTML produces a scrollbar in FF.


Take a look at http://www.ericmeyeroncss.com/bonus/render-mode.html

Scroll down to where he talks about the box model...

--------------------
My e-mail address doesn't have a 2 in it.

Jul 21 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Conax | last post by:
Hi, Just wondering if there is a way in ASP, to calculate with of a string of text in pixels. The result is to be used to set table width so that texts don't get wrapped to second line. Thank...
25
by: kie | last post by:
hello, i have a table that creates and deletes rows dynamically using createElement, appendChild, removeChild. when i have added the required amount of rows and input my data, i would like to...
3
by: Lars G. Svensson | last post by:
As a regular ciwas reader, I learned that fixed-pixel designs are evil, so for the newly created site http://www.ddc-deutsch.de (in German, still very much under construction) I arranged the...
6
by: delerious | last post by:
These browser inconsistencies are starting to drive me crazy! Here's an Opera 7.22 bug I just found: When calculating an element's width using...
1
by: mpayne | last post by:
I have a span that has a width of 25%. I want to use that span as the top of a dialog box that has rounded corners. So, the span itself is broken up into 3 smaller spans, one for the left and...
1
by: Nathan Sokalski | last post by:
I want to make a table of links on my page. However, because different users will have different screen widths, I will need to calculate the number of columns based on the screen width and width of...
7
by: Jeff | last post by:
Hey asp.net 2.0 I'm trying to calculate the width of the HyperLink control (see my code below). But all I get is the value 0.0 PlaceHolder placeholder =...
2
by: hgarg | last post by:
The onpaint() is getting called before calculating the required parameters by listBox1_SelectedIndexChanged function. I tried calling it at the end of this function. But of no use. Due to this issue...
21
ddtpmyra
by: ddtpmyra | last post by:
There's two text box that has to enter the the numbers from the user and below I want to display the total value the user inputed. How can I sum it up and have it displayed every they enter a...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.