CSS Boxes and Auto Margins Problems

[Bryan R. Meyer]

Hello Everyone,

I've been working with CSS trying to understand it and incorporate it
into a revised version of my web page. I've noticed a few problems
which perhaps someone could shed some light on.

1) I've attempted to create an empty box with an inset border and a
width of 782px. What I've noticed is that in IE 6 the border does not
change the size of the box. However, I've noticed that in Netscape
7.02, the border actually causes the box to be larger. This is a
problem because the box becomes wider than the adjacent header graphic
I've made. Is there anything I can do to solve this? My class for
the box is below.

div.content {
background: #d8d9d7;
position: absolute;
left: 118px;
top: 150px;
width: 782px;
border: inset;
}

2) I've used auto margins (top, bottom, left, and right) with my
content because I want the webpage content to be centered. I've
placed my header graphic on my page followed by a box containing text,
etc. The problem is that IE seems to have a non-zero size auto top
margin yet Netscape does not. This results in a small gap between the
header graphic and the box. Any ideas on a workaround for this? Is
this just a compatibility problem amongst the browsers?

I would appreciate any help you could provide. Thanks!

-Bryan

[David Dorward]

Bryan R. Meyer wrote:

1) I've attempted to create an empty box with an inset border and a
width of 782px. What I've noticed is that in IE 6 the border does not
change the size of the box.
In CSS the width refers to the width of the content.
In IE 5.5 and earlier the width refers to the space between the outside
edges of the borders (thus including the border and padding in the width).
IE 6 will emulate this bug if you fail to use a Doctype that triggers
standards mode.

http://gutfeldt.ch/matthias/articles/doctypeswitch.html
2) I've used auto margins (top, bottom, left, and right) with my
content because I want the webpage content to be centered. I've
placed my header graphic on my page followed by a box containing text,
etc. The problem is that IE seems to have a non-zero size auto top
margin yet Netscape does not. This results in a small gap between the
header graphic and the box. Any ideas on a workaround for this?

Set the top and bottom borders to 0.

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>

[David Dorward]

Bryan R. Meyer wrote:

1) I've attempted to create an empty box with an inset border and a
width of 782px. What I've noticed is that in IE 6 the border does not
change the size of the box.
In CSS the width refers to the width of the content.
In IE 5.5 and earlier the width refers to the space between the outside
edges of the borders (thus including the border and padding in the width).
IE 6 will emulate this bug if you fail to use a Doctype that triggers
standards mode.

http://gutfeldt.ch/matthias/articles/doctypeswitch.html
2) I've used auto margins (top, bottom, left, and right) with my
content because I want the webpage content to be centered. I've
placed my header graphic on my page followed by a box containing text,
etc. The problem is that IE seems to have a non-zero size auto top
margin yet Netscape does not. This results in a small gap between the
header graphic and the box. Any ideas on a workaround for this?

Set the top and bottom borders to 0.

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>

[Bryan R. Meyer]

David,

Thanks for your help. With your assistance, my problems were easily resolved.

Thanks again!
Bryan

[Bryan R. Meyer]

David,

Thanks for your help. With your assistance, my problems were easily resolved.

Thanks again!
Bryan