Preparing to write a post that blasts CSS.

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

dterrors@hotmail.com - 27 Jun 2005 06:22 GMT

I figure before I go and write my summary of why you should go back to
tables and only use CSS for fonts and colors and stuff, I ought to make
sure I've got my facts right. So, please tell me how I can get this:

<div style="border:1px solid #000;width:100% ">
<table style="background:#CABE9E;
        margin:10px 10px 10px 10px;
        border-bottom:4px solid #000;
        border-left:4px solid #000;
        border-right:4px solid #000;
        border-top:4px solid #000;
        width:100%;">
        <tr><td>some table stuff...</td><td>spills over in firefox, and
causes everpresent vertical scroll in IE</td></tr></table>
</div>

to look like this:

<table cellspacing="0" cellpadding="1" bgcolor="000000"
width="100%"><tr><td>
<table bgcolor="ffffff" cellpadding="8" cellspacing="0"
width="100%"><tr><td>
<table bgcolor="000000" cellpadding="4" cellspacing="0"
width="100%"><tr><td>
        <table bgcolor="CABE9E" cellpadding="4" width="100%"><tr><td>some
table stuff...</td><td>spills over in firefox, and causes everpresent
vertical scroll in IE</td></tr></table></td></tr></table>
</td></tr></table>
</td></tr></table>

Try them in both IE and Firefox.

Apparently the spec for CSS says that the border and margins shouldn't
be counted when calcing the size of the div/table. Take a look at this
(these) bug reports:

https://bugzilla.mozilla.org/show_bug.cgi?id=258523

But IE does something bad too- notice that you get a horizontal scroll
bar at the bottom, no matter how wide your screen goes (with the CSS
version).

But the table version looks fine in both browsers.

Anyway, if I'm missing something that would fix this, tell me.

Reply to this Message

logic_earth - 27 Jun 2005 06:53 GMT

> I figure before I go and write my summary of why you should go back to
> tables and only use CSS for fonts and colors and stuff, I ought to make
> sure I've got my facts right.

Just because you can't use CSS to make a layout doesn't mean everyone
else can't.

> Apparently the spec for CSS says that the border and margins shouldn't
> be counted when calcing the size of the div/table.

Infact they do margin/border/padding add to the width/height.
http://www.w3.org/TR/REC-CSS2/box.html

P.S. The table version makes me sick it takes four table to do
something so simple.

Reply to this Message

logic_earth - 27 Jun 2005 06:55 GMT

Quote From: W3C | http://www.w3.org/TR/REC-CSS2/box.html

"The box width is given by the sum of the left and right margins,
border, and padding, and the content width. The height is given by the
sum of the top and bottom margins, border, and padding, and the content
height."

Reply to this Message

dterrors@hotmail.com - 28 Jun 2005 06:32 GMT

All this says is that the "box width" is calculated by including the
margins and border. It doesn't say that when an outer div is deciding
how wide to be, it should include the inner div/table's border's and
margins. In other words, the outer div is supposed to ignore the
inner div's border and margin even though it's part of the "box width".

Seriously, look at the firefox bug url I gave you.

Reply to this Message

Michael Winter - 28 Jun 2005 13:57 GMT

> All this says is that the "box width" is calculated by including the
> margins and border. It doesn't say that when an outer div is deciding
> how wide to be, it should include the inner div/table's border's and
> margins.

The algorithm clearly states that an unconstrained block level element
will take all the space it can. So, with:

#outer {
width: auto;

/* These are normally the default: */
margin: 0;
padding: 0;
border-style: none;
}

<body>
<div id="outer">
...
</div>
</body>

the content area of #outer will span the complete content width of the
BODY element. If you then add inner block level elements with explicit
100% content widths, they will have the same width as #outer. If those
inner elements have margins, padding, or borders, then their content
width will be the same, but the dimensions of those added features will
then cause the box to overflow.

In the case you presented, the outer DIV element had a border and an
explicit 100% width. So, it's content width will be the same as the
viewport minus the margin/padding/border of the BODY element. The border
of that outer element will then add two pixels to that, extending it two
pixels beyond the right-hand edge of the BODY element.

Next, you had a TABLE element (though it could have been any block level
element) with a wide margin (10px), border (4px), and an explicit 100%
content width. As the values are over-constrained, the right margin is
ignored, but again the content width will be the same as the above, and
again we must add the extra box surroundings: a total of eighteen
pixels. Add that to the left border of the DIV element, and the TABLE
element will extend nineteen pixels beyond the right-hand edge of the
BODY element. As the right margin/padding of the BODY element will only
be ten pixels (in most cases), the TABLE will extend ten pixels off the
right-hand edge of the viewport.

[snip]

> Seriously, look at the firefox bug url I gave you.

You did notice that it was marked as 'resolved invalid', didn't you?
That means the 'bug' is nonsense and Firefox is acting correctly.

Mike

Signature

Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Reply to this Message

Lauri Raittila - 27 Jun 2005 09:18 GMT

in comp.infosystems.www.authoring.stylesheets, dterrors@hotmail.com
wrote:

> I figure before I go and write my summary of why you should go back to
> tables and only use CSS for fonts and colors and stuff, I ought to make
> sure I've got my facts right. So, please tell me how I can get this:

You didn't. It is quite arrogant to complain about CSS, when you don't
know even the very basics. And even for advanced stuff, it is never fault
of CSS, but browers support.

Tables are not fully supported by browsers, I think that CSS is at least
as well supported.

[failure]

> to look like this:

[overcomplicated tables, you could have cut at least 2. Of course, then
you would have to know how to use tables.]

div {border:1px solid black;background:#fff;padding:8px;}
table {border:4px solid #000;padding:4px;background:#CABE9E;width:100%;}

<div>
<table><tr><td>some
table stuff...</td><td>spills over in firefox, and causes everpresent
vertical scroll in IE</td></tr></table>
</div>

> Try them in both IE and Firefox.

Didn't as you didn't give any URL. But it was clear what your problem
was. Simple cure is KISS.

> Anyway, if I'm missing something

You didn't miss my killfile.

Signature

Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Kohtuuhintainen yksiö/huone haussa Oulusta syyskuusta eteenpäin.
Searching places to sleep on axis Bonn - Tsech - Poland - baltic sea in
july

Reply to this Message

dterrors@hotmail.com - 28 Jun 2005 06:05 GMT

Your html still has the infinite horizontal scroll bar problem in IE.
It may be simpler but it solves nothing.

Reply to this Message

Lauri Raittila - 28 Jun 2005 08:07 GMT

in comp.infosystems.www.authoring.stylesheets, dterrors@hotmail.com
wrote:

> Your html still has the infinite horizontal scroll bar problem in IE.
> It may be simpler but it solves nothing.

I was too soon to say yoy didn't miss my killfile (forgot to put you
there apparently), but
http://www.student.oulu.fi/~laurirai/www/test/iehoverimage.html

Google for quirks mode.

Signature

Reply to this Message

Beauregard T. Shagnasty - 27 Jun 2005 14:49 GMT

> I figure before I go and write my summary of why you should go back
> to tables and only use CSS for fonts and colors and stuff, I ought
> to make sure I've got my facts right.

I cannot make a nice wooden cabinet. I blame my chisel.

Next time, make sample pages and post them so we can see what else
might be wrong with your code, missing DOCTYPE for example. Thanks for
your indulgence.

Signature

-bts
-This space intentionally left blank.

Reply to this Message

logic_earth - 27 Jun 2005 20:22 GMT

> Next time, make sample pages and post them so we can see what else
> might be wrong with your code, missing DOCTYPE for example. Thanks for
> your indulgence.

If you add a strict DOCTYPE the table fails to work (well not on IE of
course).
However that is because he failed to put '#' (bgcolor="000000").

Reply to this Message

Beauregard T. Shagnasty - 27 Jun 2005 21:06 GMT

>> Next time, make sample pages and post them so we can see what
>> else might be wrong with your code, missing DOCTYPE for example.
[quoted text clipped - 3 lines]
> of course). However that is because he failed to put '#'
> (bgcolor="000000").

One must repair errors as well. <g>

Signature

-bts
-This space intentionally left blank.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / June 2005

Preparing to write a post that blasts CSS.