472,954 Members | 2,010 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

IE 7 bug: declared width for table cell wrongly affects inner block

Sub titulo "Re: DIV borders different in IE7 when in td"
scripsit Ben C:
Table cells should never go narrower than the minimum width required
by their contents. Normal flow block boxes (like default DIV) get the
width you set, overflowing if necessary.
This seems to be the heart of the matter, and I'm trying to get a real
discussion started, by moving the discussion to the right group
(c.i.w.a.stylesheets) and changing the Subject line.

It seems to me that IE 7, specifically in "standards mode" (!),
misbehaves when a table cell has a declared width but the actual width
is larger, due to the requirements of its content. When the <tdelement
contains a <divelement, IE 7 expands the <tdbut not the <divinside
it. This can be seen from the background or border of the <div>, if set,
and even the formatting of its textual content.

However, width calculation is mystic area in CSS, so it might be
possible that under some weird interpretation, IE 7 is "right", though I
cannot see how.

Demo: http://www.cs.tut.fi/~jkorpela/www/width-bug.html

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jun 27 '08 #1
2 3768
On 2008-05-01, Jukka K. Korpela <jk******@cs.tut.fiwrote:
Sub titulo "Re: DIV borders different in IE7 when in td"
scripsit Ben C:
>Table cells should never go narrower than the minimum width required
by their contents. Normal flow block boxes (like default DIV) get the
width you set, overflowing if necessary.

This seems to be the heart of the matter, and I'm trying to get a real
discussion started, by moving the discussion to the right group
(c.i.w.a.stylesheets) and changing the Subject line.

It seems to me that IE 7, specifically in "standards mode" (!),
misbehaves when a table cell has a declared width but the actual width
is larger, due to the requirements of its content. When the <tdelement
contains a <divelement, IE 7 expands the <tdbut not the <divinside
it. This can be seen from the background or border of the <div>, if set,
and even the formatting of its textual content.

However, width calculation is mystic area in CSS, so it might be
possible that under some weird interpretation, IE 7 is "right", though I
cannot see how.

Demo: http://www.cs.tut.fi/~jkorpela/www/width-bug.html
CSS 2.1 10.3.3 is very clear that the div's used width should in this
case (since all horizontal properties are auto) be equal to the width of
its containing block.

The containing block is formed by the content edge of the table cell.

So what is its width?

The computed value of the table-cell's width is "100px". But the used
value of its width is the width required by the long word (it depends on
your font, about 280px in my browser).

My hypothesis for the cause of the bug here is that when IE7 comes to
implement the rules in 10.3.3 for the div, it looks up the computed
width on the td and so gets 100px as the containing block width. It
should instead be looking up the used width [1].

It then solves the equation in 10.3.3 for 100px giving the div a used
negative right margin of about -180px.

So where does the spec say that "width of the containing block" in
10.3.3 means used width and not computed width"?

Well 10.1 says:

2. [..] the containing block is formed by the content edge of the
nearest block-level [p. 117], table cell or inline-block ancestor
box.

"Content edge" is defined in 8.1, as the rectangle given by the "width"
and "height" of the box.

A bit later in 8.1 it says:

The dimensions of the content area of a box — the content width and
content height — depend on several factors: whether the element
generating the box has the 'width' or 'height' property set, whether
the box contains text or other boxes, whether the box is a table, etc.
Box widths and heights are discussed in the chapter on visual
formatting model details [p. 157] .

Clearly this is the used width and height they're talking about, not the
computed width and height.

[1] You possibly get this only in strict mode because it has got conflated
internally within IE with the need not to honour percentages of auto
height table cells in strict mode. In quirks mode browsers will allow
percentage heights of auto height cells for which they have to use
"used" values. In strict they should ignore such percentages.
Jun 27 '08 #2
On May 1, 9:40 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Demo:http://www.cs.tut.fi/~jkorpela/www/width-bug.html
IE 7 formats the box content and observes the long word, which is too
long for that width. It expands the cell to accommodate the long box.
However, once the box has tricked the cell into expanding, it
contracts suddenly, leaving the cell expanded and does a little
contracting trick of its own. Only IE has a sufficiently jokey nature
to pull this one off. It is a real card!
Jun 27 '08 #3

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

Similar topics

1
by: Eric Adem | last post by:
Try out the following code: <html> <body> <table onMouseOut="alert('out');" width="50%" height="50%" bgcolor=yellow><tr><td> <table width="100%" height="100%"><tr valign=middle> <td...
7
by: Neil Zanella | last post by:
Hello, I have posted the following message before but got no replies... I am trying to format an HTML definition list with CSS so that it appears as follows, but am having the following problem:...
7
by: delerious | last post by:
I just found a bug that's related to positioning in IE 5.5 (could someone please tell me if this bug exists in IE 6, and if so, if my solution works in that browser?). I don't know if this bug has...
2
by: steventhrasher42 | last post by:
I can't figure out a way to possibly make this work in HTML. I have a table embedded in another table, with the inner table spanning a few columns. I would like for the outer table to span the...
50
by: Shadow Lynx | last post by:
Consider this simple HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head>...
36
by: phil-news-nospam | last post by:
Here is a simpler (no drop shadows) example of the padding bug I see: http://phil.ipal.org/usenet/ciwas/2006-05-08/buttons-1.html So far I find nothing in the CSS2 document that says I should...
15
by: john | last post by:
This is a repost, I hope with a better explanation: 1. Create 3 tables, all with 2 fields: Table 1: Field IDnr (Autonumber,key) and Field Test1 (Alpha50) Table 2: Field IDnr (Number,key) and...
5
by: Taras_96 | last post by:
Hi everyone, Can anyone tell me why the top paragraph block stretches across the screen (as you would expect), while the bottom div doesn't stretch across the entire screen? When I set the width...
15
by: Davo | last post by:
Hello, I've created a table with two columns, the second column is fixed width at 64px and contains a div, the div has a border and contains some text, the text renders to larger than 64px. This...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
0
by: Mushico | last post by:
How to calculate date of retirement from date of birth
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
1
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
0
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...

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.