Re: div width, IE7 vs. Firefox2

On 10 nov, 22:38, Mark <mfree... (AT) columbus (DOT) rr.com> wrote:

Page:

I am gradually moving from table-based layout to css, but I am running
into a mystery. I have an image that I am using as a horizontal rule.
It is wrapped in a div that is enclosed by a table column. The width
of both the image and the div are set to 100%. In Firefox it displays
fine, extending across the entire table cell. In IE, it continues to
the right, crossing over into the next table column. Any idea how to
fix this?

A simple example page is at http://franklloydwright.tercenim.com/iwidthtest.htm.

404 not found

I have set contrasting background colors on the relevant page elements
to make the issue more obvious. Here is the complete content of the
page:

We never need the complete content. An url is ok. Always preferable
with valid markup code, valid CSS code and with a strict DTD, not a
transitional DTD. Furthermore preferable is a reduced testcase, a
minimalist display of the problem

Can you do that?

Gérard

GTalbot schrieb:

On 10 nov, 22:38, Mark <mfree... (AT) columbus (DOT) rr.com> wrote:
Page:

I am gradually moving from table-based layout to css, but I am running
into a mystery. I have an image that I am using as a horizontal rule.
It is wrapped in a div that is enclosed by a table column. The width
of both the image and the div are set to 100%. In Firefox it displays
fine, extending across the entire table cell. In IE, it continues to
the right, crossing over into the next table column. Any idea how to
fix this?

A simple example page is at http://franklloydwright.tercenim.com/iwidthtest.htm.

404 not found
It's

http://franklloydwright.tercenim.com/widthtest.htm

Klaus
--
Linux User #54760

On Nov 10, 11:12 pm, GTalbot <newsgr... (AT) gtalbot (DOT) org> wrote:

On 10 nov, 22:38, Mark <mfree... (AT) columbus (DOT) rr.com> wrote:

Page:

I am gradually moving from table-based layout to css, but I am running
into a mystery. I have an image that I am using as a horizontal rule.
It is wrapped in a div that is enclosed by a table column. The width
of both the image and the div are set to 100%. In Firefox it displays
fine, extending across the entire table cell. In IE, it continues to
the right, crossing over into the next table column. Any idea how to
fix this?

A simple example page is at http://franklloydwright.tercenim.com/iwidthtest.htm.

404 not found

I have set contrasting background colors on the relevant page elements
to make the issue more obvious. Here is the complete content of the
page:

We never need the complete content. An url is ok. Always preferable
with valid markup code, valid CSS code and with a strict DTD, not a
transitional DTD. Furthermore preferable is a reduced testcase, a
minimalist display of the problem

Can you do that?

Gérard

I apologize for the typo. The correct url is
http://franklloydwright.tercenim.com/widthtest.htm. I have reduced the
test case to the minimal possible code. It shows that the problem is
even more basic than I had originally thought. IE7 doesn't seem to
understand padding-right for a table cell.

Thanks,

Mark

Mark wrote:

http://franklloydwright.tercenim.com/widthtest.htm. I have reduced the
test case to the minimal possible code. It shows that the problem is
even more basic than I had originally thought. IE7 doesn't seem to
understand padding-right for a table cell.

I don't see anything different between IE6, IE7, Firefox, Opera and
Windows Safari beta.

--
Berg

Berg,

I thought I was losing my mind, but I found what triggers the
problem.

http://franklloydwright.tercenim.com/widthtest.htm shows the problem
in IE7. (Screen shot at http://franklloydwright.tercenim.com/widthtest.png)
http://franklloydwright.tercenim.com...est_no_dtd.htm looks fine
in IE7. (Screen shot at http://franklloydwright.tercenim.com...est_no_dtd.png)

The only difference is that the second one has the DTD line at the top
removed.

I tried the strict DTD, but IE7 doesn't like that either:

http://franklloydwright.tercenim.com...est_strict.htm still shows
the problem in IE7. (Screen shot at http://franklloydwright.tercenim.com...est_strict.png)


- Mark

Mark wrote:

Berg,

I thought I was losing my mind, but I found what triggers the
problem.

http://franklloydwright.tercenim.com/widthtest.htm shows the problem
in IE7. (Screen shot at http://franklloydwright.tercenim.com/widthtest.png)
http://franklloydwright.tercenim.com...est_no_dtd.htm looks fine
in IE7. (Screen shot at http://franklloydwright.tercenim.com...est_no_dtd.png)

The only difference is that the second one has the DTD line at the top
removed.

Which makes browsers use quirks mode, not standards mode. This is not a
fix: this just covers up the problem.

TO me it looks like an IE7 bug. It would be much better if a solution
could be found that honours the standards.

C A Upsdell wrote:

Mark wrote:
Berg,

I thought I was losing my mind, but I found what triggers the
problem.

http://franklloydwright.tercenim.com/widthtest.htm shows the problem
in IE7. (Screen shot at http://franklloydwright.tercenim.com/widthtest.png)
http://franklloydwright.tercenim.com...est_no_dtd.htm looks fine
in IE7. (Screen shot at http://franklloydwright.tercenim.com...est_no_dtd.png)

The only difference is that the second one has the DTD line at the top
removed.

Which makes browsers use quirks mode, not standards mode. This is not a
fix: this just covers up the problem.

TO me it looks like an IE7 bug. It would be much better if a solution
could be found that honours the standards.

The image width is set to 100%. 100% of its parent's width, and
starting from the 2em padding on the left, it will stick out 4em
beyond what you thought. 2em of that is covering the padding-right,
and another 2em stick out of the box. And another 2em of td background
yellow is on the right of that, since you still suggested a 2em
padding-right. What's a poor browser to do with these conflicting
suggestions... ;-)

Where I reckon it's IE7's fault (not entirely sure what the specs say
on this though, but I don't have the time to look it up), is that it
does not add the padding to the width of the td, like it does with
divs.
That's where the solution is: pad the td with a div, and set those
paddings on that div, not on the td. Tried that, works fine. Also
consider what Trevor said: don't use tables for layout.

Of course, an image like that should just be used as a background
image, repeating itself from left to right.

--
Els http://locusmeus.com/

On 11 nov, 15:44, Els <els.aNOS... (AT) tiscali (DOT) nl> wrote:

C A Upsdell wrote:
Mark wrote:
Berg,

I thought I was losing my mind, but I found what triggers the
problem.

http://franklloydwright.tercenim.com/widthtest.htmshows the problem
in IE7. (Screen shot athttp://franklloydwright.tercenim.com/widthtest.png)
http://franklloydwright.tercenim.com...o_dtd.htmlooks fine
in IE7. (Screen shot athttp://franklloydwright.tercenim.com/widthtest_no_dtd.png)

The only difference is that the second one has the DTD line at the top
removed.

Which makes browsers use quirks mode, not standards mode. This is not a
fix: this just covers up the problem.

TO me it looks like an IE7 bug. It would be much better if a solution
could be found that honours the standards.

The image width is set to 100%. 100% of its parent's width, and
starting from the 2em padding on the left, it will stick out 4em
beyond what you thought. 2em of that is covering the padding-right,
and another 2em stick out of the box. And another 2em of td background
yellow is on the right of that, since you still suggested a 2em
padding-right. What's a poor browser to do with these conflicting
suggestions... ;-)

Where I reckon it's IE7's fault (not entirely sure what the specs say
on this though, but I don't have the time to look it up), is that it
does not add the padding to the width of the td, like it does with
divs.
That's where the solution is: pad the td with a div, and set those
paddings on that div, not on the td. Tried that, works fine. Also
consider what Trevor said: don't use tables for layout.

Of course, an image like that should just be used as a background
image, repeating itself from left to right.

--
Els http://locusmeus.com/

Exactly, Els. Exactly what I was going to reply. The design and code
is over-constraining the table cell. This happens often, very
frequently in amateur web author: they add padding here and there and
then set width: 100% to every nodes, even nested nodes.

The problem with the webpage has nothing to do really with doctype
declaration. To begin with, choosing a strict DTD is the path to the
best solution.

Regards, Gérard

On Nov 11, 3:44 pm, Els <els.aNOS... (AT) tiscali (DOT) nl> wrote:

C A Upsdell wrote:
The image width is set to 100%. 100% of its parent's width, and
starting from the 2em padding on the left, it will stick out 4em
beyond what you thought. 2em of that is covering the padding-right,
and another 2em stick out of the box. And another 2em of td background
yellow is on the right of that, since you still suggested a 2em
padding-right. What's a poor browser to do with these conflicting
suggestions... ;-)

Where I reckon it's IE7's fault (not entirely sure what the specs say
on this though, but I don't have the time to look it up), is that it
does not add the padding to the width of the td, like it does with
divs.
That's where the solution is: pad the td with a div, and set those
paddings on that div, not on the td. Tried that, works fine.

I just tried that and agree that it neatly solves the problem. I am
VERY grateful for your help with this.

Also consider what Trevor said: don't use tables for layout.

I'm working toward that, but got tripped up by this situation. I
intend to make my pages as standard-conforming as possible.

My main problem with moving to the strict DTD is that I have Amazon
affiliate product links on my pages, and they are provided as
IFRAMEs. Also, and I don't mean to spark any flame wars, I strongly
prefer to specify <base target="_blank"> and the override it with
target="_self" on local links. I don't want my visitors leaving my
site unless they explicitly choose to do so, and not accidentally by
clicking a link. I know too many users who don't know what the back
button is for, and even more that don't know how to open a link to a
new window. I hear that CSS3 may provide a standard way to do this,
but I need something that works now.

Of course, an image like that should just be used as a background
image, repeating itself from left to right.

I just used that as a convenient and universally accessible 1 pixel
wide image, so as not to have the image's width confuse the issue.

Again, my thanks to you and the others that responded to my posting.

- Mark

Mark wrote:

My main problem with moving to the strict DTD is that I have Amazon
affiliate product links on my pages, and they are provided as
IFRAMEs. Also, and I don't mean to spark any flame wars, I strongly
prefer to specify <base target="_blank"> and the override it with
target="_self" on local links. I don't want my visitors leaving my
site unless they explicitly choose to do so, and not accidentally by
clicking a link. I know too many users who don't know what the back
button is for, and even more that don't know how to open a link to a
new window. I hear that CSS3 may provide a standard way to do this,
but I need something that works now.

I would say if you sites is good enough people will stay. Rather than do
that, how about marking such links to indicate that go off-site and
leave it up to your users to open in a new tab or window *if* they wish
or not and then use the back button to return.

a.offsite {
padding-right: 12px;
/* little 10x10 off site arrow image */
background: transparent url(offsite.gif) no-repeat top right;
}


<a class="offsite" title="Off Site Link"
href="http://www.example.com/someWhereElse.html">Some Where Else</a>

People understand the back button more than hunting for the window in
the taskbar.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com