6 replies [Last post]
GeeWhizzler
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-10-28
Posts: 19
Points: 0

I have a 800 pixel width container declared as follows:

.container
{
width: 800px;
margin: 0px auto;
border: 4px solid #000000;
padding: 0px;
text-align: left;
}

Notice that there is a border of 4 pixels on top,left,bottom, right.

What pixel size width should be used for a image that is to take up the entire width? 800pixels? 792pixels?

According to the box model, the image should be 792 pixels wide.
width = margin + border + padding + content
width = 0 + 8 + 0 + 792

So I create a 800 pixel image wide and it looks fine under all browsers. However, the container reallly isn't 800 pixels but rather looks like 808.

So then i create a 792 pixel image wide and there is a gap on the right hand side for firefox, opera, and netscape. Why is this so?

Most importantly, if I want a 800 pixel width container how can I fix this? Is it because of the auto property?

Very confused here.

Anonymous
Anonymous's picture
Guru

Borders and imaging

Linky?

GeeWhizzler
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-10-28
Posts: 19
Points: 0

Borders and imaging

Solved it...

the container should be 792px wide to accomodate the 8 pix wide total in border. the image should then be 792 pixels wide.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Borders and imaging

You're using the wrong box model. The content width is 800px. padding and borders are outside the width. You get the faulty box model in IE<=5 and in IE6 in quirks mode. Be sure that the DTD is complete to force standards mode on IE6. A bug in IE will cause the quirky box to expand to contain the content in IE5[1].

cheers,

gary

[1] Or, you can use conditional comments to feed IE5 separate corrected dimensions.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Anonymous
Anonymous's picture
Guru

Borders and imaging

kk5st wrote:
You're using the wrong box model.
That's what I was thinking. Seemed backwards.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Borders and imaging

@ very confused,

This point regarding the box model and dimensions was asked by you in this thread
and if you read the last post you will see that I gave a short explanation of the two box models, if your going to ask questions of us please do us the curtesy of reading them, if they are still insufficient to answer the question or if Standards versus Quirks is confusing to you just say so and we can explain further.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

GeeWhizzler
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-10-28
Posts: 19
Points: 0

Borders and imaging

Hugo, the problem was two fold:

1) Wrong width for container
2) Use of <?xml version="1.0" encoding="utf-8"?> that put IE into quirks mode

I read the CSS box model specification without getting into detail. By doing so, I realized the width does not contain the border and margins as you stated. But all of this worked with Mozilla browsers but IE failed.

I then further found out that IE bungles the box model (my DTD was in XHTML strict mode). Then I found a reference made by someone that the use of <?xml version="1.0" encoding="utf-8"?> puts IE in non-standard quirks mode. I had that in there.

If anything, its an education.