468,316 Members | 2,053 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,316 developers. It's quick & easy.

CSS Boxes and Auto Margins Problems

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
Jul 20 '05 #1
4 1988
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/>
Jul 20 '05 #2
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/>
Jul 20 '05 #3
David,

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

Thanks again!
Bryan
Jul 20 '05 #4
David,

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

Thanks again!
Bryan
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Richard Lawrence | last post: by
5 posts views Thread by Robert Downes | last post: by
9 posts views Thread by Dustin | last post: by
12 posts views Thread by Secret Guy | last post: by
5 posts views Thread by maya | last post: by
11 posts views Thread by Gérard Talbot | last post: by
9 posts views Thread by Neviton | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.