Bordering problem in IE

[Alan Steel]

Amateur trying to produce a bordered, rounded corner template for simple
pages in FF and IE 5+, derived from
http://www.airtightov.com/lab/airtight_corners.html

Seems OK so far in FF but disjointed top and bottom bordering in IE6|7/win,
all running strict html 4.01 validated.

http://homepage.eircom.net/~alansteel/rounded.html

In IE6|7, the top/bottom centre divs don't seem to "join" the right/left
corners (unlike FF), leaving ca a 3px gap. I can increase this gap, but not
close it despite any amount of "googling" for solutions or playing with
margins, padding and border specs.

Clearly something going on I simply can't get a handle on -- presumably some
(subtle?) difference in FF & IE strict "boxing". Any pointers or other help
greatly appreciated if this last problem in IE can be sorted.

Alan

[Bergamot]

Alan Steel wrote:

>
http://homepage.eircom.net/~alansteel/rounded.html

In IE6|7, the top/bottom centre divs don't seem to "join" the right/left
corners (unlike FF), leaving ca a 3px gap

I've seen this technique used before - separate left-center-right
elements for the corners and top/bottom border.

Why don't you just but the 3px border on the .box container, float your
images as you do now, and get rid of the center element altogether? Drop
the left/right borders on the .content block as well.

--
Berg

[Alan Steel]

"Bergamot" <be******@visi.comwrote in message
news:4t*************@mid.individual.net...

Alan Steel wrote:

>>
http://homepage.eircom.net/~alansteel/rounded.html

In IE6|7, the top/bottom centre divs don't seem to "join" the right/left
corners (unlike FF), leaving ca a 3px gap

I've seen this technique used before - separate left-center-right
elements for the corners and top/bottom border.

Why don't you just but the 3px border on the .box container, float your
images as you do now, and get rid of the center element altogether? Drop
the left/right borders on the .content block as well.

--
Berg

Thanks very much for consideration.

If I have correctly implemented your suggestions, then the rectangular
bordering over-rides the rounded cornering, and the div heights
break-down -- perhaps losing the "floats" because there are no longer
"centre" divs? Modified version:

http://homepage.eircom.net/~alansteel/bgrounded.html

My interest was with the airtightov.com technique of offset variation of a
single background image. Perhaps that approach is simply incompatible with
how IE6|7 implements the relevant style(s).

Anyway, thanks again.

Alan

[Bergamot]

Alan Steel wrote:

>
http://homepage.eircom.net/~alansteel/bgrounded.html

Add some negative margins to the floats: -3px
That will position the float over the box borders.

--
Berg

[Alan Steel]

"Bergamot" <be******@visi.comwrote in message
news:4t*************@mid.individual.net...

Alan Steel wrote:

>>
http://homepage.eircom.net/~alansteel/bgrounded.html

Add some negative margins to the floats: -3px
That will position the float over the box borders.

--
Berg

Further thanks -- margin manipulation certainly can reposition the floats,
however the #box border still over-rides. (cf top right). Similarly if
image is put into the corners directly rather than as background. Image
seems only to over-write #box border if "positioned" (cf top left).

http://homepage.eircom.net/~alansteel/bgrounded.html again.

Perhaps 4 *distinct* images are necessary for IE!
Anyway, thanks very much for your input -- obviously still a great deal for
me to learn!

Regards

Alan

[Bergamot]

Alan Steel wrote:

"Bergamot" <be******@visi.comwrote in message
news:4t*************@mid.individual.net...

>Alan Steel wrote:

>>>
http://homepage.eircom.net/~alansteel/bgrounded.html

Add some negative margins to the floats: -3px
That will position the float over the box borders.

http://homepage.eircom.net/~alansteel/bgrounded.html again.

Perhaps 4 *distinct* images are necessary for IE!

No, IE just needs some other added help for its many flaws. Check out
http://www.positioniseverything.net/explorer.html

position:relative

can do wonders. ;) Add that to your top-right corner element.

--
Berg