473,583 Members | 3,129 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 2112
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
3277
by: Richard Lawrence | last post by:
Hi, Consider the following: #Content { margin:0px 210px 50px 200px; padding:10px; } If I use it with the following HTML:
5
6093
by: Robert Downes | last post by:
I'm using the following in a page that I'm testing in Mozilla: p.actionLinkBlock {border: 1px #000000 dashed; padding: 0.2cm; width: auto} But the dashed border is extending to the right-edge of the screen. I want it to only extend as far as it needs to to nicely contain the content within (a couple of links). Is width: auto the wrong...
9
4065
by: Dustin | last post by:
Here's what I am trying to do: (Names represent CSS classes.) I want to create a photo gallery. I want the entire gallery to be surrounded by a box named PhotoGallery. I want a fluid placement of the individual Items within PhotoGallery. An Item is a box that has two child boxes, PhotoBox and Caption. Photobox has an explicit width and...
12
2449
by: Secret Guy | last post by:
I'm trying to understand generally how to make a grid of variously sized boxes using CSS. The first idea I had was to make a box where I can see the margin, padding, border and content edges, and understand why they have the areas that they do. And I'm having trouble... I read in the 2.1 spec, that the height and width properties specify the...
5
3254
by: maya | last post by:
at work they decided to center divs thus: body {text-align:center} #content {width: 612px; text-align:left; margin: 0 auto 0 auto; } this works fine in IE & FF, EXCEPT in FF it doesn't work if I change 'auto' to 0 for left and right margin values; I have to leave those at 'auto'.. so I would like to know what exactly means 'auto' -- what...
11
2188
by: Gérard Talbot | last post by:
Hello, <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <title></title> <style type="text/css"> body {background-color: white; color: black;} #parent_block {background-color: red; width: 100%;} #nested_child_block {margin: 150px 0px; background-color: green; color: white;}
6
3670
by: Dave | last post by:
I want to put the information that the user selects in my combo boxes into a subform that lies on the same form as the combo boxes. Thanks for your help already, Dave
1
2901
by: Dave | last post by:
Hello all, First I'd like to apologize...This post was meant to be put in my previous post, but I tried many times without success to reply within my previous post. Now here goes... I have a main form (RD Form) with 4 combo boxes (i.e. cbo1, cbo2, etc) and a subdatasheet (the subform...let's call it subInfo) below the combo boxes on...
9
1837
by: Neviton | last post by:
Hi I want to create one layout with 3 columns. The left and right columns should have a auto-width. The center column should have a fixed size of 300px. By example: If the browser window width is 500px I need the left column have width=100px and right column have width=100px and center off course
0
8329
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7936
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
8197
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6583
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
3821
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3847
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2335
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1436
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1160
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.