border question

[Michael Dinowitz]

This is puzzling me a little. Lets say I have a page with a content area of 728px wide. This area is inside a table (kill me later) and the table width is set to 730. Could I set a border of 1px around the whole text area and still be within the table defined 730?

Bottom line question is: Will a border be part of the content 'box' or in addition to it?

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3288
Subscription: http://www.houseoffusion.com/groups/CSS/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

[Sandra Clark]

Rule of thumb is that the borders + margin + padding + content width must
equal 100% of the parent's content width.  

That is the standard box model.

IE 5 and IE6 in quirks mode, do it differently. In these browsers, borders
and padding are in addition to the content width.


Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility


-----Original Message-----
From: Michael Dinowitz [mailto:mdinowit@...]
Sent: Thursday, November 02, 2006 6:59 AM
To: CSS
Subject: border question

This is puzzling me a little. Lets say I have a page with a content area of
728px wide. This area is inside a table (kill me later) and the table width
is set to 730. Could I set a border of 1px around the whole text area and
still be within the table defined 730?

Bottom line question is: Will a border be part of the content 'box' or in
addition to it?



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3289
Subscription: http://www.houseoffusion.com/groups/CSS/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

[Rick Root]

Sandra Clark wrote:
> Rule of thumb is that the borders + margin + padding + content width must
> equal 100% of the parent's content width.  
>
> That is the standard box model.
>
> IE 5 and IE6 in quirks mode, do it differently. In these browsers, borders
> and padding are in addition to the content width.

Sandra - have you done any testing of this in IE7?  I suppose it's
exactly the same as it was before.

Rick

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3290
Subscription: http://www.houseoffusion.com/groups/CSS/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

[Peter Boughton]

Specify a (valid) DOCTYPE and IE6 will work render borders in
accordance with the standard box model.
If IE7 is different to that I'd be very surprised.

On 11/2/06, Rick Root <rick.root@...> wrote:

> Sandra Clark wrote:
> > Rule of thumb is that the borders + margin + padding + content width must
> > equal 100% of the parent's content width.
> >
> > That is the standard box model.
> >
> > IE 5 and IE6 in quirks mode, do it differently. In these browsers, borders
> > and padding are in addition to the content width.
>
> Sandra - have you done any testing of this in IE7?  I suppose it's
> exactly the same as it was before.
>
> Rick
>
>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3291
Subscription: http://www.houseoffusion.com/groups/CSS/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

[Sandra Clark]

IE7 still has a quirks mode, so if you are not using a doctype of HTML 4.01
strict or xHTML 1.0 strict (which are the only ones that render standards
mode across browsers, then it will probably use the broken box type.

Using the xml prolog in IE6 throws it into quirks mode.  IE7 will render
both those doctypes in standards mode regardless of the xml prolog.


Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility


-----Original Message-----
From: Rick Root [mailto:rick.root@...]
Sent: Thursday, November 02, 2006 8:51 AM
To: CSS
Subject: Re: border question

Sandra Clark wrote:
> Rule of thumb is that the borders + margin + padding + content width
> must equal 100% of the parent's content width.
>
> That is the standard box model.
>
> IE 5 and IE6 in quirks mode, do it differently. In these browsers,
> borders and padding are in addition to the content width.

Sandra - have you done any testing of this in IE7?  I suppose it's exactly
the same as it was before.

Rick



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3292
Subscription: http://www.houseoffusion.com/groups/CSS/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

[Michael Dinowitz]

I'm using HTML 4.01 strict and there is always a perceivable difference in
spacing from IE to Mozilla. I've been able to combat it in some cases using
absolute positioning, but that only works for the heading area which has
undergone some SEO alterations. My goal is to be very precise in my page
layout. The left hand bar has 130px. The center has 728px and the right hand
bar has 150px. The result of this is 108px, which is exactly the browser
screen size when resolution is set to 1024 and the page has a scroll bar. I
can make it 1010 without any major loss which gives me 2px for a border
around the content.
If the border is part of the content area, then 730px is 728 content and 2px
border, right? If it's seperate from the content area, then the area is 728
and the border is 2.

> IE7 still has a quirks mode, so if you are not using a doctype of HTML
> 4.01
> strict or xHTML 1.0 strict (which are the only ones that render standards
> mode across browsers, then it will probably use the broken box type.
>
> Using the xml prolog in IE6 throws it into quirks mode.  IE7 will render
> both those doctypes in standards mode regardless of the xml prolog.
>
>
> Sandra Clark
> ==============================
> http://www.shayna.com
> Training in Cascading Style Sheets and Accessibility
>
>
> -----Original Message-----
> From: Rick Root [mailto:rick.root@...]
> Sent: Thursday, November 02, 2006 8:51 AM
> To: CSS
> Subject: Re: border question
>
> Sandra Clark wrote:
>> Rule of thumb is that the borders + margin + padding + content width
>> must equal 100% of the parent's content width.
>>
>> That is the standard box model.
>>
>> IE 5 and IE6 in quirks mode, do it differently. In these browsers,
>> borders and padding are in addition to the content width.
>
> Sandra - have you done any testing of this in IE7?  I suppose it's exactly
> the same as it was before.
>
> Rick
>
>
>
>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3293
Subscription: http://www.houseoffusion.com/groups/CSS/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

[Sandra Clark]

Standards Rendering Mode

Left Margin + Left Border + left padding + width  + right padding + right
border + right margin = parent content width

Make sure that you initially zero out all margins and paddings in your style
sheet before you start setting them.
All browsers have internal stylesheets that have default values.  These
values are not the same across browsers

For all browsers but IE5/6  
 html * {margin:0; padding:0}

For IE5/6, create a comma delimited list of all block level elements (div,
hx, p, ul, li, etc) and then apply the same margin and padding as above.

That way margin and paddings are zero'd out across browsers and you attain a
much higher level of consistency.


Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility


-----Original Message-----
From: Michael Dinowitz [mailto:mdinowit@...]
Sent: Thursday, November 02, 2006 11:14 AM
To: CSS
Subject: Re: border question

I'm using HTML 4.01 strict and there is always a perceivable difference in
spacing from IE to Mozilla. I've been able to combat it in some cases using
absolute positioning, but that only works for the heading area which has
undergone some SEO alterations. My goal is to be very precise in my page
layout. The left hand bar has 130px. The center has 728px and the right hand
bar has 150px. The result of this is 108px, which is exactly the browser
screen size when resolution is set to 1024 and the page has a scroll bar. I
can make it 1010 without any major loss which gives me 2px for a border
around the content.
If the border is part of the content area, then 730px is 728 content and 2px
border, right? If it's seperate from the content area, then the area is 728
and the border is 2.

> IE7 still has a quirks mode, so if you are not using a doctype of HTML
> 4.01
> strict or xHTML 1.0 strict (which are the only ones that render
> standards mode across browsers, then it will probably use the broken box
type.

>
> Using the xml prolog in IE6 throws it into quirks mode.  IE7 will
> render both those doctypes in standards mode regardless of the xml prolog.
>
>
> Sandra Clark
> ==============================
> http://www.shayna.com
> Training in Cascading Style Sheets and Accessibility
>
>
> -----Original Message-----
> From: Rick Root [mailto:rick.root@...]
> Sent: Thursday, November 02, 2006 8:51 AM
> To: CSS
> Subject: Re: border question
>
> Sandra Clark wrote:
>> Rule of thumb is that the borders + margin + padding + content width
>> must equal 100% of the parent's content width.
>>
>> That is the standard box model.
>>
>> IE 5 and IE6 in quirks mode, do it differently. In these browsers,
>> borders and padding are in addition to the content width.
>
> Sandra - have you done any testing of this in IE7?  I suppose it's
> exactly the same as it was before.
>
> Rick
>
>
>
>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3294
Subscription: http://www.houseoffusion.com/groups/CSS/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41