CSS + Div in N6, IE5

Gent 1 said: I maintain that border goes outside of width, and
that "obscure CSS-2" doesn't change this. It seems to me that our
discussion (and Tapio's) was limited to this point. So you can't,
for instance, have a "100%" width thingie whose borders will be
included in that. What am I missing?

Gent 2 said: If you have time, I'd love an explanation. The
disparity between NS and IE DIV border handling is something that
drives me nuts. 

:::

This would be the whole Ian Hickson discussion.

Hard to summarize, still scratching my head over some of it.

Made more confusing because we have been talking about two
different sets of test pages. The zeldman.com cover at
http://www.zeldman.com/ and the 2001 holiday greeting. Different
"bugs" (real or assumed), discussed different times, different
problems.

All div border handling issues, but otherwise different.


EXAMPLES follow discussion below:


Hickson said if image = 600 pixels, say it IS 600 pixels (not
590). N6 should display this. Said fix by adding background-color
to HTML property, due to obscure CSS-2 rule (he explained in
email you were cc'd ... probably makes more sense to your big
brain than my tiny one.)

Did that. Failed.

Then he explained another rule he forgot to mention. Say
background not fixed, say scrolling. (Doesn't scroll but he says
say scrolling to avoid having border start at top left 0, 0 of
BODY property.)

Worked.

Compare markup differences (differences
HIGHLIGHTED)



	
	Original IE5/Mac style:


<style type="text/css">
<!--

BODY {margin: 0; background-color: #669966; background-image:
url(images/2001.jpg); background-repeat: no-repeat;
background-attachment: fixed; background-position: top left;
border: 10px solid black; height: 600px; width: 800px;}

A:link, A:visited, A:active { text-decoration: none; font-weight:
bold; color: #ff9900; }

A:hover { color: #ccff00; text-decoration: underline; }

#corebut {position: absolute; left: 740px; top: 300px; border:
2px solid black;}

#happy {position: absolute; left: 20px; top: 570px; font: 11px
verdana, arial, sans-serif; color: #ff6600;} 


-->
</style>


	Original N6 style:

<style type="text/css">
<!--

BODY {margin: 0; background-color: #669966; background-image:
url(images/2001.jpg); background-repeat: no-repeat;
background-attachment: fixed; background-position: top left;
border: 10px solid black; height: 590px; width: 790px;}

A:link, A:visited, A:active { text-decoration: none; font-weight:
bold; color: #ff9900; }

A:hover { color: #ccff00; text-decoration: underline; }

#corebut {position: absolute; left: 750px; top: 300px; border:
2px solid black;}

#happy {position: absolute; left: 20px; top: 570px; font: 11px
verdana, arial, sans-serif; color: #ff6600;} 


-->
</style>



	Hickson fix:

<style type="text/css">
<!--

BODY {margin: 0; background-color: #669966; background-image:
url(images/2001.jpg); background-repeat: no-repeat;
background-attachment: scroll; background-position: top left;
border: 10px solid black; height: 600px; width: 800px;}

HTML { background-color: #669966; }

A:link, A:visited, A:active { text-decoration: none; font-weight:
bold; color: #ff9900; }

A:hover { color: #ccff00; text-decoration: underline; }

#corebut {position: absolute; left: 750px; top: 300px; border:
2px solid black;}

#happy {position: absolute; left: 20px; top: 570px; font: 11px
verdana, arial, sans-serif; color: #ff6600;}


-->
</style>

	
	(works both browsers)

	Not tested Opera yet.
	

Relevant documents:

http://www.zeldman.com/2001.html

http://www.zeldman.com/ns4_2001.html
http://www.zeldman.com/ns2001.html
http://www.zeldman.com/ie2001.html


http://www.zeldman.com/ns2001hickson.html
http://www.zeldman.com/ns2001hicksondotted.html
http://www.zeldman.com/ns2001hicksonfixed.html