User-Agent: Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.5b) Gecko/20030908 Build Identifier: Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.5b) Gecko/20030908 The DIV's in this page are not displayed correctly. Whe I tell the width of a DIV to be 20% and the left to be 0%(or 0cm) and I setup another DIV to start left: 20% that these are displayed next to eachother. In stead, they overlap in Mozilla. Reproducible: Always Steps to Reproduce: 1. 2. 3. Actual Results: The DIV's that should be ajacent overlap Expected Results: I would like them to be displayed next to eachother.
IE/Windows interprets 'width' incorrectly. 'width' is the area inside the border, so the border-edge of the box is really 20% plus 2pt wide. Thus the overlap. (You can always create an extra element inside the positioned one and put the border on that. But the correct CSS model does make more sense in many cases as well.)
Status: UNCONFIRMED → RESOLVED
Last Resolved: 15 years ago
Resolution: --- → INVALID
Please have a look at this page too: http://kok.thuis99.org/testoo/index-2.html It shows the same as the former, but also shows that there is still overlap. Even without the border.
You're not accounting for the padding. In your other case, the box is 20% + .1cm wide because of the padding. So you still get overlap. Verifying invalid.
Status: RESOLVED → VERIFIED
The pain is that other browser (Opera & IE) don't take the width for the inside of the DIV element. This makes it hard to make cross-browser pages. I know we get into religious areas with this, but it does make sense to consider this...
>The pain is that other browser (Opera & IE) don't take the width for the inside >of the DIV element. The current versions of both these browsers get this right if not displaying in compatibility mode. See, for example, http://www.opera.com/docs/specs/doctype/ for a good summary.
I made the page http://kok.thuis99.org/testoo/index-2.html using DOCTYPE Strict (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">) and took a look at it with different browsers. This does not make it much better. You can see a difference still: the bottom two boxes over-lap where they should NOT IMHO. Please have another look. (index-3.html is even with the requeired URL in the DOCTYPE)
You need to log in before you can comment on or make changes to this bug.