Border problems : IE vs Seamonkey

[Amer Neely]

I'm trying to nail down a 3-column layout but there is a slight
discrepancy in how IE 6 and Seamonkey renders a border.

View my attempt at http://www.softouch.on.ca/scratch/3-columns.html

The problem is that SM does not seem to render the border in the outer
DIV correctly. IE displays 'what I want' but then I'm not sure if that's
because I'm doing something right, or found an artifact that works.

Is SM broken regarding borders, or am I missing something? Can someone
shed some light please?

--
Amer Neely
w: www.softouch.on.ca/
b: www.softouch.on.ca/blog/
Perl | MySQL programming for all data entry forms.
"We make web sites work!"

[Gus Richter]

Amer Neely wrote:

I'm trying to nail down a 3-column layout but there is a slight
discrepancy in how IE 6 and Seamonkey renders a border.

View my attempt at http://www.softouch.on.ca/scratch/3-columns.html

The problem is that SM does not seem to render the border in the outer
DIV correctly. IE displays 'what I want' but then I'm not sure if that's
because I'm doing something right, or found an artifact that works.

Is SM broken regarding borders, or am I missing something? Can someone
shed some light please?

<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.softouch.on.c a%2Fscratch%2F3-columns.html>

--
Gus

[Amer Neely]

Gus Richter wrote:

Amer Neely wrote:

>I'm trying to nail down a 3-column layout but there is a slight
discrepancy in how IE 6 and Seamonkey renders a border.

View my attempt at http://www.softouch.on.ca/scratch/3-columns.html

The problem is that SM does not seem to render the border in the outer
DIV correctly. IE displays 'what I want' but then I'm not sure if
that's because I'm doing something right, or found an artifact that
works.

Is SM broken regarding borders, or am I missing something? Can someone
shed some light please?

<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.softouch.on.c a%2Fscratch%2F3-columns.html>

Ahh. Thank you. I've got it to validate for CSS and XHTML1 now, but the
results still don't appear any better.

--
Amer Neely
w: www.softouch.on.ca/
b: www.softouch.on.ca/blog/
Perl | MySQL programming for all data entry forms.
"We make web sites work!"

[Gus Richter]

Amer Neely wrote:

Gus Richter wrote:

>Amer Neely wrote:

>>I'm trying to nail down a 3-column layout but there is a slight
discrepancy in how IE 6 and Seamonkey renders a border.

View my attempt at http://www.softouch.on.ca/scratch/3-columns.html

The problem is that SM does not seem to render the border in the
outer DIV correctly. IE displays 'what I want' but then I'm not sure
if that's because I'm doing something right, or found an artifact
that works.

Is SM broken regarding borders, or am I missing something? Can
someone shed some light please?

<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.softouch.on.c a%2Fscratch%2F3-columns.html>

Ahh. Thank you. I've got it to validate for CSS and XHTML1 now, but the
results still don't appear any better.

I prefer the HTML 4.01 Strict - as you had it at first. Now you validate
deprecated elements with XHTML 1.0 Transitional.

Your: <br clear="all" / doesn't cut it. See:
<http://www.w3.org/TR/CSS21/visuren.html#propdef-clear>
Is "all" IE proprietory? Although Fx and Opera seem to support it -
don't use it!
Remove it from where it does no good and add at the end of your doc:
.............</p>
<br clear="both" />
</div></div></body></html>

Basically this (per the specs) is what you're probably looking for,
although there needs to be more markup correcting/tweaking and now you
probably have IE6 lack of support to deal with.

--
Gus

[Jeremy]

Amer Neely wrote:

Gus Richter wrote:

>Amer Neely wrote:

>>I'm trying to nail down a 3-column layout but there is a slight
discrepancy in how IE 6 and Seamonkey renders a border.

View my attempt at http://www.softouch.on.ca/scratch/3-columns.html

The problem is that SM does not seem to render the border in the
outer DIV correctly. IE displays 'what I want' but then I'm not sure
if that's because I'm doing something right, or found an artifact
that works.

Is SM broken regarding borders, or am I missing something? Can
someone shed some light please?

<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.softouch.on.c a%2Fscratch%2F3-columns.html>

Ahh. Thank you. I've got it to validate for CSS and XHTML1 now, but the
results still don't appear any better.

Your left and right columns have a width of 20% plus a horizontal
padding of 15px. Remember, dimensions and padding are additive, so
these elements end up with a total width of 20% + 15px each, while the
margins on your center column only account for the 20%.

The reason it displays as you want in IE is because the document is
going into quirks mode as a result of the XML prologue. Remove that, so
the <!DOCTYPEline is the very first one. Then you will get more
consistent results in IE and Mozilla.

Jeremy

[Amer Neely]

Gus Richter wrote:

Amer Neely wrote:

>Gus Richter wrote:

>>Amer Neely wrote:
I'm trying to nail down a 3-column layout but there is a slight
discrepancy in how IE 6 and Seamonkey renders a border.

View my attempt at http://www.softouch.on.ca/scratch/3-columns.html

The problem is that SM does not seem to render the border in the
outer DIV correctly. IE displays 'what I want' but then I'm not sure
if that's because I'm doing something right, or found an artifact
that works.

Is SM broken regarding borders, or am I missing something? Can
someone shed some light please?

<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.softouch.on.c a%2Fscratch%2F3-columns.html>

Ahh. Thank you. I've got it to validate for CSS and XHTML1 now, but
the results still don't appear any better.

I prefer the HTML 4.01 Strict - as you had it at first. Now you validate
deprecated elements with XHTML 1.0 Transitional.

Your: <br clear="all" / doesn't cut it. See:
<http://www.w3.org/TR/CSS21/visuren.html#propdef-clear>
Is "all" IE proprietory? Although Fx and Opera seem to support it -
don't use it!

I believe it is also deprecated :(

Remove it from where it does no good and add at the end of your doc:
............</p>
<br clear="both" />
</div></div></body></html>

Basically this (per the specs) is what you're probably looking for,
although there needs to be more markup correcting/tweaking and now you
probably have IE6 lack of support to deal with.

This seems to be getting worse. I've now made it 4.01 Strict, and made
the above changes to the page. Now it doesn't validate, but tells me
there is no attribute 'style' for the font tag; element 'font' is
undefined; and there is no attribute "CLEAR".

--
Amer Neely
w: www.softouch.on.ca/
b: www.softouch.on.ca/blog/
Perl | MySQL programming for all data entry forms.
"We make web sites work!"

[Amer Neely]

Jeremy wrote:

Amer Neely wrote:

>Gus Richter wrote:

>>Amer Neely wrote:
I'm trying to nail down a 3-column layout but there is a slight
discrepancy in how IE 6 and Seamonkey renders a border.

View my attempt at http://www.softouch.on.ca/scratch/3-columns.html

The problem is that SM does not seem to render the border in the
outer DIV correctly. IE displays 'what I want' but then I'm not sure
if that's because I'm doing something right, or found an artifact
that works.

Is SM broken regarding borders, or am I missing something? Can
someone shed some light please?

<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.softouch.on.c a%2Fscratch%2F3-columns.html>

Ahh. Thank you. I've got it to validate for CSS and XHTML1 now, but
the results still don't appear any better.

Your left and right columns have a width of 20% plus a horizontal
padding of 15px. Remember, dimensions and padding are additive, so
these elements end up with a total width of 20% + 15px each, while the
margins on your center column only account for the 20%.

The reason it displays as you want in IE is because the document is
going into quirks mode as a result of the XML prologue. Remove that, so
the <!DOCTYPEline is the very first one. Then you will get more
consistent results in IE and Mozilla.

Jeremy

I've re-done the width definitions with your advice in mind and have
come up with something I can live with, but as noted in my reply to Gus
Richter it no longer validates.

--
Amer Neely
w: www.softouch.on.ca/
b: www.softouch.on.ca/blog/
Perl | MySQL programming for all data entry forms.
"We make web sites work!"

[Rik]

Amer Neely wrote:

This seems to be getting worse. I've now made it 4.01 Strict, and made
the above changes to the page. Now it doesn't validate, but tells me
there is no attribute 'style' for the font tag; element 'font' is
undefined;

<fontis deprecated. Use a more meaningfull tag, or failing to find one,
use <span>.

and there is no attribute "CLEAR".

Indeed, it's <[TAG] style="clear:both;">.
--
Rik Wasmus

[Amer Neely]

Rik wrote:

Amer Neely wrote:

>This seems to be getting worse. I've now made it 4.01 Strict, and made
the above changes to the page. Now it doesn't validate, but tells me
there is no attribute 'style' for the font tag; element 'font' is
undefined;

<fontis deprecated. Use a more meaningfull tag, or failing to find one,
use <span>.

>and there is no attribute "CLEAR".

Indeed, it's <[TAG] style="clear:both;">.

Good grief, I spend too much time in perl and have lost touch with the
HTML side of things.

The page now validates for both HTML 4.01 Strict and CSS, and more or
less renders the way I hoped. But it still looks different in SM and IE.

Thanks for the input.

--
Amer Neely
w: www.softouch.on.ca/
b: www.softouch.on.ca/blog/
Perl | MySQL programming for all data entry forms.
"We make web sites work!"

[Amer Neely]

Jeremy wrote:

Amer Neely wrote:

>Gus Richter wrote:

>>Amer Neely wrote:
I'm trying to nail down a 3-column layout but there is a slight
discrepancy in how IE 6 and Seamonkey renders a border.

View my attempt at http://www.softouch.on.ca/scratch/3-columns.html

The problem is that SM does not seem to render the border in the
outer DIV correctly. IE displays 'what I want' but then I'm not sure
if that's because I'm doing something right, or found an artifact
that works.

Is SM broken regarding borders, or am I missing something? Can
someone shed some light please?

<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.softouch.on.c a%2Fscratch%2F3-columns.html>

Ahh. Thank you. I've got it to validate for CSS and XHTML1 now, but
the results still don't appear any better.

Your left and right columns have a width of 20% plus a horizontal
padding of 15px. Remember, dimensions and padding are additive, so
these elements end up with a total width of 20% + 15px each, while the
margins on your center column only account for the 20%.

The reason it displays as you want in IE is because the document is
going into quirks mode as a result of the XML prologue. Remove that, so
the <!DOCTYPEline is the very first one. Then you will get more
consistent results in IE and Mozilla.

Jeremy

Many thanks for your time and input, I've made corrections and now the
page validates both CSS & HTML 401, and looks more less like I want.

--
Amer Neely
w: www.softouch.on.ca/
b: www.softouch.on.ca/blog/
Perl | MySQL programming for all data entry forms.
"We make web sites work!"

[Amer Neely]

Gus Richter wrote:

Amer Neely wrote:

>I'm trying to nail down a 3-column layout but there is a slight
discrepancy in how IE 6 and Seamonkey renders a border.

View my attempt at http://www.softouch.on.ca/scratch/3-columns.html

The problem is that SM does not seem to render the border in the outer
DIV correctly. IE displays 'what I want' but then I'm not sure if
that's because I'm doing something right, or found an artifact that
works.

Is SM broken regarding borders, or am I missing something? Can someone
shed some light please?

<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.softouch.on.c a%2Fscratch%2F3-columns.html>

Well, after making some corrections and reading the docs, and taking
advice from you and others, I've got the page to validate under CSS and
HTML 4.01. It also looks more or less like I want! Bonus :)

Many thanks for your time and input.
--
Amer Neely
w: www.softouch.on.ca/
b: www.softouch.on.ca/blog/
Perl | MySQL programming for all data entry forms.
"We make web sites work!"

[Ben C]

On 2006-12-16, Amer Neely <pe*******@softouch.on.cawrote:

Gus Richter wrote:

>Amer Neely wrote:

>>Gus Richter wrote:
Amer Neely wrote:
I'm trying to nail down a 3-column layout but there is a slight
discrepancy in how IE 6 and Seamonkey renders a border.
>
View my attempt at http://www.softouch.on.ca/scratch/3-columns.html
>
The problem is that SM does not seem to render the border in the
outer DIV correctly. IE displays 'what I want' but then I'm not sure
if that's because I'm doing something right, or found an artifact
that works.
>
Is SM broken regarding borders, or am I missing something? Can
someone shed some light please?

<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.softouch.on.c a%2Fscratch%2F3-columns.html>

Ahh. Thank you. I've got it to validate for CSS and XHTML1 now, but
the results still don't appear any better.

I prefer the HTML 4.01 Strict - as you had it at first. Now you validate
deprecated elements with XHTML 1.0 Transitional.

Your: <br clear="all" / doesn't cut it. See:
<http://www.w3.org/TR/CSS21/visuren.html#propdef-clear>
Is "all" IE proprietory? Although Fx and Opera seem to support it -
don't use it!

I believe it is also deprecated :(

>Remove it from where it does no good and add at the end of your doc:
............</p>
<br clear="both" />
</div></div></body></html>

clear is a deprecated HTML attribute, that only applies to <br>, and the
value is "left", "right", or "all". This is in the HTML standard.

There is also a CSS property called "clear" whose value is "left",
"right" or "both".

So <br clear="all"is OK, if deprecated.

<br style="clear: both"on the other hand is a greyish area. According
to the CSS 2.1 default stylesheet, <bris display: inline, but the
clear property only applies to block-level elements. So setting
clear:both on a <brshould do nothing, although it may accidentally
work the same as clear="all" in some UAs depending on how they're
implemented.

In this case better to put clear: both on the next block-level element,
and lose the <braltogether.

[Jeremy]

Amer Neely wrote:

Gus Richter wrote:

>Amer Neely wrote:

>>I'm trying to nail down a 3-column layout but there is a slight
discrepancy in how IE 6 and Seamonkey renders a border.

View my attempt at http://www.softouch.on.ca/scratch/3-columns.html

The problem is that SM does not seem to render the border in the
outer DIV correctly. IE displays 'what I want' but then I'm not sure
if that's because I'm doing something right, or found an artifact
that works.

Is SM broken regarding borders, or am I missing something? Can
someone shed some light please?

<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.softouch.on.c a%2Fscratch%2F3-columns.html>

Well, after making some corrections and reading the docs, and taking
advice from you and others, I've got the page to validate under CSS and
HTML 4.01. It also looks more or less like I want! Bonus :)

Many thanks for your time and input.

I think you will have more success if you change the structure of your
document somewhat.

Change the center column back to 20% left and right margins. Change the
left and right columns back to 20% width, but remove the padding on
these divs. Place another div within each of the left and right
columns, that has the padding and border that you want. Remove the
border from the center column (remember, border is also additive).

Removing borders and padding from the outermost element and adding an
additional element inside it to contain them is the only way to get
exact percentage widths to match up, if you want borders and padding.

See example:
http://www.duckwizard.com/ciwas/3-columns.html

One more note: 100% height is never going to work the way you expect in
IE. It is pretty much useless unless you have a defined height on the
master div. You'll probably have to find a new method of achieving that
effect (where all columns are the same height, which is high enough to
accommodate whatever content the tallest column has).

Jeremy