470,624 Members | 2,472 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,624 developers. It's quick & easy.

Bordering problem in IE

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

Dec 5 '06 #1
5 1549
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
Dec 5 '06 #2

"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
Dec 5 '06 #3
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
Dec 5 '06 #4

"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

Dec 5 '06 #5
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
Dec 5 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.

By using this site, you agree to our Privacy Policy and Terms of Use.