By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,879 Members | 1,859 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,879 IT Pros & Developers. It's quick & easy.

CSS Boxes and Auto Margins Problems

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a
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

P: n/a
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

P: n/a
David,

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

Thanks again!
Bryan
Jul 20 '05 #4

P: n/a
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.