Closed Bug 218715 Opened 21 years ago Closed 21 years ago

DIV size wrong

Categories

(Core :: Layout: Block and Inline, defect)

Product:
Core
Component:
Layout: Block and Inline
Platform:
x86
Windows 98
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
VERIFIED INVALID

People

(Reporter: gerke.kok, Unassigned)

References

(
URL
)

Details

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
Closed: 21 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.