Closed
Bug 184825
Opened 23 years ago
Closed 18 years ago
Wrong rendering of <div> with percent width in style
Categories
(Core :: Layout: Tables, defect, P3)
Core
Layout: Tables
Tracking
()
RESOLVED
WORKSFORME
Future
People
(Reporter: pavils, Unassigned)
References
()
Details
(Keywords: testcase, Whiteboard: [HTML4-11.2.1][CSS1-5.5.23])
Attachments
(1 file)
|
489 bytes,
text/html
|
Details |
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.2.1) Gecko/20021130
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.2.1) Gecko/20021130
In some circumstances, when using percent sizes in CSS definition, DIV tag is
rendered incorrectly.
Please see http://www.jurjans.lv/dhtml/divpercent.htm for example
Reproducible: Always
Steps to Reproduce:
See the link
Actual Results:
See the link
Expected Results:
See the link
|
||
Comment 1•23 years ago
|
||
This has nothing to do with the DOM....
If nothing else, the fact that resizing changes the layout is a bug.
Assignee: jst → table
Status: UNCONFIRMED → NEW
Component: DOM Style → Layout: Tables
Ever confirmed: true
OS: Windows XP → All
QA Contact: ian → amar
Hardware: PC → All
|
|
||
Comment 2•23 years ago
|
||
This is demonstrable even without the outermost containing table. See the
attached testcase, with tables of width="100%" containing divs of width="100%".
Setting "table-layout: fixed" on the second table also shows the weird initial
reflow bug.
|
|
||
Updated•23 years ago
|
Keywords: testcase
Summary: Wrong rendering of DIV tag with percent size in style → Wrong rendering of <div> with percent width in style
Whiteboard: [HTML4-11.2.1][CSS1-5.5.23]
|
|
||
Updated•23 years ago
|
Priority: -- → P3
Target Milestone: --- → Future
|
|
||
Comment 3•22 years ago
|
||
Also see http://storm.northwestcomputerservices.com It uses 100% width in div
using css in the file http://storm.northwestcomputerservices.com/maincolors.css
The mozilla browser does not apply the 100% width properly to the tables inside
the div tags with the class applied to them and it leaves large blank spaces
between the table columns as well.
The page renders correctly in both Opera and MSIE 6 and verifies as valid HTML
and CSS at w3c.org.
|
||
Comment 4•21 years ago
|
||
Hi!
I found some DIV rendering problems too. When I use padding and margin
attributes in STYLE paramters (or CLASS and CSS), the mozilla not render the
right side correctly.
I have a small example:
(Try the 'margin:' and 'padding:' parameters in STYLE attribute of DIV element,
and compare another browser.)
<TABLE BGCOLOR="red" BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="200">
<TR>
<TD><DIV ALIGN="left" STYLE="height:200px; width:100%; margin:10px;
padding:20px; border:1px solid black; background-color:white;">
<TABLE BGCOLOR="green" WIDTH="100%" HEIGHT="100%"><TR><TD></TD></TR></TABLE>
</DIV></TD>
</TR>
</TABLE>
comment 4 is unrelated to this bug, and probably not a bug at all.
Comment on attachment 109058 [details]
Simpler testcase
Note that the second half of the testcase seems fine; the bug is in the first
half.
|
|
||
Comment 7•18 years ago
|
||
If you have 3 divs, and their widths sums 100%, IE draws the 3 divs in a row, Firefox (2 and 3) draws the third div in a second row.
Example
<body>
<div style="float:left; width:10%; border:1px solid">a</div>
<div style="float:left; width:80%; text-align:center;">b</div>
<div style="float: right; width:10%;">c</div>
</body>
I don't know if it is related to this bug or if is related to another bug.
If you change from "80%" to "79%" firefox renders the page like I think that it's fine
|
|
||
Comment 8•18 years ago
|
||
I probe my last comment on opera and it works like firefox. The border propertie is the problem. Where can I read about firefox and opera behaviour in this case is the best ?
Thanks you
|
|
||
Comment 9•18 years ago
|
||
Ok, http://www.w3.org/TR/REC-CSS2/box.html#content-width is the link I want to read ..
|
||
Comment 10•18 years ago
|
||
Hi Javier,
Your problem isn't this bug--if you look at the testcase you'll see this uses a table, and only one div. Also, just to make things easier for you, Firefox's rendering is correct, since div 1 has a 1px border on each side so the total width is 100%+2px, which means it needs to break. (Any further discussion on this should be taken outside of this bug, to a css discussion forum or newsgroup or etc.)
Also, the testcase looks like it renders fine to me, and I don't see any issue with resizing (as in bz's comment 1) or any difference between the first half and second half (as in dbaron's comment 6) so this bug -> WORKSFORME
Status: NEW → RESOLVED
Closed: 18 years ago
Resolution: --- → WORKSFORME
You need to log in
before you can comment on or make changes to this bug.
Description
•