Rounded corners & IE

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Schraalhans Keukenmeester - 28 Nov 2006 13:55 GMT

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.

Reply to this Message

Martin Eyles - 28 Nov 2006 16:23 GMT

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 want to achieve the following:
> A small image in each of the corners of a box, like below:
[quoted text clipped - 31 lines]
> Thanks in advance for any good tip!
> Sh.

Reply to this Message

Schraalhans Keukenmeester - 28 Nov 2006 21:18 GMT

>> I want to achieve the following:
>> A small image in each of the corners of a box, like below:
[quoted text clipped - 44 lines]
>
> 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.

Reply to this Message

Martin Eyles - 29 Nov 2006 12:16 GMT

> Besides the promising (airtightcorners) solution offered by Brendan Gillat
> in this same thread I found a candidate in "Sliding Doors" at 'a list
[quoted text clipped - 3 lines]
> 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

Reply to this Message

Schraalhans Keukenmeester - 30 Nov 2006 23:21 GMT

>> Besides the promising (airtightcorners) solution offered by Brendan Gillat
>> in this same thread I found a candidate in "Sliding Doors" at 'a list
[quoted text clipped - 9 lines]
>
> 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.

Reply to this Message

Brendan Gillatt - 28 Nov 2006 20:42 GMT

>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

Reply to this Message

Schraalhans Keukenmeester - 28 Nov 2006 21:22 GMT

>> 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.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / November 2006

Rounded corners & IE