Rounded corners & IE

[Schraalhans Keukenmeester]

I want to achieve the following:
A small image in each of the corners of a box, like below:

+-------------------------------+
|[img] [img]+
| +
| +
| +
| +
| +
|[img] [img]+
+-------------------------------+

The images are rounded corners. The box grows/shrinks dynamically with
browser resizing (hor and vert), so a fixed image is not an option.

I have a nice working solution for Gecko-based browsers (or any other
that supports the :before and :after pseudo-classes) based on an extra
div inside another div and the :before and :after tricks (as used by
blogger.com, at least in the past, not sure if they still rely on it).

(Of course) MS IE6 and previous don't support these pseudo-classes.
Luckily IE ignores them completely, so viewers are stuck with sharp
corners instead. Not ideal but doable. Not sure if IE7 supports this
construct, I haven't got Windows, nor a working IE7 with wine.

An alternative is creating a div soup with top and bottom parts
separated to accomodate the images. Does anyone know of a more elegant
solution to the rounded corners box that DOES work for IE as well?

The page should degrade without problems to viewing without any style
applied. (ie. no weird separate corner images show up)

Thanks in advance for any good tip!
Sh.

[Martin Eyles]

Hi

I tend to stick four divs in the box to have rounded corners, and style them
to be in the corners with appropriate background images. I don't think pure
css is an option unfortunatley.

Of course, rather than putting this in the html, you could add these to the
document when it is loaded using some java-script instead. Of course, this
wouldn't be that elegant either - in fact, it's workings might be a bit
obvious in slowing the rendering down.

M

"Schraalhans Keukenmeester" <bi*******@invalid.spamwrote in message
news:45*********************@news.xs4all.nl...

>I want to achieve the following:
A small image in each of the corners of a box, like below:

+-------------------------------+
|[img] [img]+
| +
| +
| +
| +
| +
|[img] [img]+
+-------------------------------+

The images are rounded corners. The box grows/shrinks dynamically with
browser resizing (hor and vert), so a fixed image is not an option.

I have a nice working solution for Gecko-based browsers (or any other that
supports the :before and :after pseudo-classes) based on an extra div
inside another div and the :before and :after tricks (as used by
blogger.com, at least in the past, not sure if they still rely on it).

(Of course) MS IE6 and previous don't support these pseudo-classes.
Luckily IE ignores them completely, so viewers are stuck with sharp
corners instead. Not ideal but doable. Not sure if IE7 supports this
construct, I haven't got Windows, nor a working IE7 with wine.

An alternative is creating a div soup with top and bottom parts separated
to accomodate the images. Does anyone know of a more elegant solution to
the rounded corners box that DOES work for IE as well?

The page should degrade without problems to viewing without any style
applied. (ie. no weird separate corner images show up)

Thanks in advance for any good tip!
Sh.

[Brendan Gillatt]

On Tue, 28 Nov 2006 14:55:06 +0100, Schraalhans Keukenmeester
<bi*******@invalid.spamwrote:

>I want to achieve the following:
A small image in each of the corners of a box, like below:

A very elegent solution which I currently use:
http://www.airtightov.com/lab/airtight_corners.html

[Schraalhans Keukenmeester]

Martin Eyles wrote:

"Schraalhans Keukenmeester" <bi*******@invalid.spamwrote in message
news:45*********************@news.xs4all.nl...

>I want to achieve the following:
A small image in each of the corners of a box, like below:

+-------------------------------+
|[img] [img]+
| +
| +
| +
| +
| +
|[img] [img]+
+-------------------------------+

The images are rounded corners. The box grows/shrinks dynamically with
browser resizing (hor and vert), so a fixed image is not an option.

I have a nice working solution for Gecko-based browsers (or any other that
supports the :before and :after pseudo-classes) based on an extra div
inside another div and the :before and :after tricks (as used by
blogger.com, at least in the past, not sure if they still rely on it).

(Of course) MS IE6 and previous don't support these pseudo-classes.
Luckily IE ignores them completely, so viewers are stuck with sharp
corners instead. Not ideal but doable. Not sure if IE7 supports this
construct, I haven't got Windows, nor a working IE7 with wine.

An alternative is creating a div soup with top and bottom parts separated
to accomodate the images. Does anyone know of a more elegant solution to
the rounded corners box that DOES work for IE as well?

The page should degrade without problems to viewing without any style
applied. (ie. no weird separate corner images show up)

Thanks in advance for any good tip!
Sh.

Hi

I tend to stick four divs in the box to have rounded corners, and style them
to be in the corners with appropriate background images. I don't think pure
css is an option unfortunatley.

Of course, rather than putting this in the html, you could add these to the
document when it is loaded using some java-script instead. Of course, this
wouldn't be that elegant either - in fact, it's workings might be a bit
obvious in slowing the rendering down.

M

I've considered some of the JavaScript-based solutions around and
dismissed those, on grounds of performance, the fact not everyone likes
to have Javascript switched on and design principles.

While working on the solution I mentioned I discovered there is a
possible issue with Mozilla FF 1.5 which appears to have some rounding
errors in some -rather unpredictable- situations leaving ugly 1px lines
below the bottom corners. Not sure this is the case on all OSes and with
the latest FF versions. Maybe someone knows, my Linux+FF shows no such
artifacts AFAIK. Besides, Konqueror does not only not recognize the
pesudo-tags, it renders the page with ugly 'error' imgs instead. Since
Safari used to be based on the same engine as Konqueror I suspect some
people using Macs won't be too happy either.

So my initial solution is out of the question.

Besides the promising (airtightcorners) solution offered by Brendan
Gillat in this same thread I found a candidate in "Sliding Doors" at 'a
list apart', see it at http://www.alistapart.com/articles/slidingdoors/

Since this topic is still very much alive I will probably end up
combining all my experiences on a new web page on my site, as I won't be
the only one looking for Columbus' egg.

Thanks for your suggestion Martin!
Kind Regards
Sh.

[Schraalhans Keukenmeester]

Brendan Gillatt wrote:

On Tue, 28 Nov 2006 14:55:06 +0100, Schraalhans Keukenmeester
<bi*******@invalid.spamwrote:

>I want to achieve the following:
A small image in each of the corners of a box, like below:

A very elegent solution which I currently use:
http://www.airtightov.com/lab/airtight_corners.html

This looks very elegant indeed. Kudos!
Please see my reply to Martin Eyles' suggestion for (a link to) an
alternative I found on the 'A list apart' site.

Thanks very much for this slick solution Brendan.
Kind regards,
Sh.

[Martin Eyles]

"Schraalhans Keukenmeester" <bi*******@invalid.spamwrote in message
news:45*********************@news.xs4all.nl...

Besides the promising (airtightcorners) solution offered by Brendan Gillat
in this same thread I found a candidate in "Sliding Doors" at 'a list
apart', see it at http://www.alistapart.com/articles/slidingdoors/

Since this topic is still very much alive I will probably end up combining
all my experiences on a new web page on my site, as I won't be the only
one looking for Columbus' egg.

Thanks for the link Sh. I take the odd peak at alistapart, but managed to
miss this little gem. I think I may actually have some uses for that on some
future projects, so I keep it in mind for them.

Martin

[Schraalhans Keukenmeester]

Martin Eyles wrote:

"Schraalhans Keukenmeester" <bi*******@invalid.spamwrote in message
news:45*********************@news.xs4all.nl...

>Besides the promising (airtightcorners) solution offered by Brendan Gillat
in this same thread I found a candidate in "Sliding Doors" at 'a list
apart', see it at http://www.alistapart.com/articles/slidingdoors/

Since this topic is still very much alive I will probably end up combining
all my experiences on a new web page on my site, as I won't be the only
one looking for Columbus' egg.

Thanks for the link Sh. I take the odd peak at alistapart, but managed to
miss this little gem. I think I may actually have some uses for that on some
future projects, so I keep it in mind for them.

Martin

Same here, I often seem to miss key items on the more interesting sites...
Not sure who mentioned this one and where, but did you see 'Nifty
Corners' as well? http://www.html.it/articoli/nifty/
I am using the classic version without Javascript and such for my
current project.Without ANY images. Slight disadvantage: the corners get
edgy when zooming in in the browser, apart from FF which keeps the
round look intact. Konqueror, Opera, IE7 all accept this one. Even with
text-indent and justification.

Airtightcorners works in FF, Opera, IE6, but -sigh- now IE7 is a problem
with rounded boxes of single line height. (lower half of the text
disappears, I am getting sooooo frustrated with yet another MS quirk)

Amaya, supposedly THE standards browser, has problems with nearly ALL
the available techniques. But, then again, who uses Amaya on a day to
day basis...

Rgds
Sh.