More IE woes: the curved corner DIV

— Rendering CSS rounded corners is still surprisingly difficult thanks to inconsistent applied browser standards.”

IE in freefall

In my current efforts to adhere to div-only layouts, it was expected that I would eventually get to a sticky point.

I’m not used to hacking CSS, so progress for me has been slow. Hacking CSS is something of an unnatural process, particularly when you feel most comfortable you’re coding pages fluently from a design.

Of course, it’s not the CSS that’s the problem, it’s the browsers. Or perhaps I should say, the browser. For as Dunstan shows, curved corners are not especially difficult with selectors. It’s good old Internet Explorer that has the issues.

The Microsoft response is particularly horrid, manifested in an abhorrence of nested divs. As someone later pointed out, the whole point of good CSS is that unnecessary markup is removed.

“The drawback to this solution,” owns MS’ Markus Mielke, “is that the code can be difficult to read, and you can end up with convoluted HTML that’s hard to maintain. The DIVs really have no reason to be in the code other than to provide insertion points for each corner, since you can’t put all the images in one DIV.” But that’s his solution, over and above which he suggests we try Google. Great.

If you can get past the invective that was hurled at this by way of response, you certainly find some alternatives that do cater for IE in this particularly thorny area. Though it contains some javascript workings, Alessandro Fulciniti’s “Nifty Corners” solution is one of the tidiest, with Roger Johansson’s cross-browser and transparency effort one of the cleverest.

Finally, a good little tool to help overcome the alien div-only methodology are fu2k.org’s layout test pages- very handy for figuring out the whats and the whys!

Comments

No responses yet to More IE woes: the curved corner DIV

Why not give me your comments?

You can use these tags in your comment:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

See also:

Solution to nested DIV float problems

Nested floated div breaks wrapper!

A CSS hack for nested divs that break out of their container. ...

  • Originally published: 12 Sep 2005 in Technical

Am I a DIV or what?

Kelmscott by Bronwen Hodgkinson on csszengarden.com

Kicking out the tables means having to revise a lot of old habits. ...

  • Originally published: 28 Jul 2005 in Technical

Flash is 10

Flash icon

Love it or hate it, after a decade of design Flash is still with us and with impressive video support, it’s still relevant. ...

Accessibility and web applications

What AJAX is not

A vogueish tidal wave of asynchronous interaction could be a bit of a worry for web accessibility. ...

  • Originally published: 21 Sep 2006 in Technical

IE7 only: float bug on elements with italic, background properties

No bug

What do you get if you cross a float and an italic in Internet Explorer? ...

  • Originally published: 13 Jul 2009 in Technical

Who you gonna call?

Photo

Hello you, I'm Mike Padgett. I'm not the Princeton curator, the US senatorial candidate, the Kentuckian pastor or the journalist from Arizona. In fact, I work as a consultant in User Experience and Information Design.

I also enjoy travel, concerts, films and walking.

I'm originally from Yorkshire, England but nowadays I live in Brussels, Belgium. My current favourite Belgian beer is Ellezelloise Hercule.

RSS feeds