Comments on: Spanky Corners 1.0 : Rounded Corners + Clean HTML + No JavaScript

By: hellhound

hellhound — Mon, 07 Jul 2008 15:32:24 +0000

this is not working in ie8 beta, missing top left corner,

By: Tim

Tim — Mon, 16 Apr 2007 14:44:59 +0000

Why do you not use a child selector instead of a descendant and then overriding for 2+ descendants?

By: AlexW

AlexW — Wed, 08 Nov 2006 23:19:40 +0000

Thanks harl,

Some interesting stuff there. I agree PNG are a better option in general. As much as anything, we wanted to provide some graphics that matched the CSS to make it easier to understand when you downloaded the zip. The graphics are quite usable, but being auto-generated, I tend to remake them get them just a little bit slicker.

By: harl

harl — Wed, 08 Nov 2006 05:25:26 +0000

just a hint, but from my experiences with GIF images.. they are not lossless at all, despite there are descriptions on the net which tell otherwise. the way GIF saves ‘hotspotted’(focused/assembled) information by reducing the images colour depth to 8 bit, mostly also reduces overall colour quality. at least that’s what (most) programs do when converting/compressing images. even with raw data and high quality settings it still gets dithered. that’s GIF.
personally, i don’t see and good in that. GIF only works well if the colour depth of the original image doesn’t exceed some value between 8 and 16 bit, depending on how many different colours the image actually includes and which of them are obviously distinguishable by the human eye.

seen that way, at least some of the GIFs generated for ’spanky corners’ are lossy as well, so i would advise against using GIF.

if you’re unsure, try some random colours yourself (ex. my current favourite background: #0f1528 and foreground: #1a2237), setting the corner’s edge length to 60 (so it’s big enough to make the difference more apparent to the eye) and you’ll see the whole 60×60 corner having different colours than both the BODY’s and the DIV’s background.

using PNG instead would solve that problem (it’s lossless and supports transparency as well). corners up to 20 or maybe 30 pixels edge length could even be BMP, as long as you don’t plan to add transparency (or antialiasing) to them.

By: AlexW

AlexW — Tue, 26 Sep 2006 00:23:17 +0000

Tony, I must admit it’s not something I’ve thought about before, but yes, I guess it’s possible that it could be an issue. I know you said you’re not a CSS hacker, but you do have a separate IE stylesheet, so I would guess that tweaking the height in that would adjust the fit.

By: Tegou

Tegou — Mon, 25 Sep 2006 23:29:46 +0000

No problems with lowercase letters on my system with IE 6, using h1 and h2 tags. I did remove rounded-ie.css from my page, and I set the height to Auto. My sample file has 5 rounded corner structures on the page 1 large one and four smaller, equally sized boxes. I tried several letters (just in case it was that specific) and haven’t noticed a problem. I even tested out IE 6 text size from smallest to largest, without a problem.

FWIW,
TeGou

By: Tony H

Tony H — Mon, 25 Sep 2006 17:52:14 +0000

In IE6 at least, there is a horizontal bar in the top left corner if you start the header with a lower case character.

With many designers using lower case chars for site names/logos, this could be problematic?

I’m not a css hacker so don’t really have a fix - but I have just run into the problem…

tony

By: GregM

GregM — Thu, 07 Sep 2006 23:56:33 +0000

Alex, I figured it out. I had your code mixed in with mine and had missed some conflicting code in one of my own header properties that was causing the weird behavior. Thanks for the reply though.

By: AlexW

AlexW — Wed, 06 Sep 2006 07:21:56 +0000

Greg, can you put it online where we can get a look at it?

By: GregM

GregM — Wed, 06 Sep 2006 00:56:34 +0000

I’m seeing some very strange behavior with IE6 (is that an oxymoron?). The code works great for me in Firefox 1.5.0.6 and Opera 9.01 under all conditions that I had problems with in IE. I had to play around with the height of the div.rounded * to 100% to get it to usually work in IE. I’m seeing the following odd behavior:

1) If there aren’t too many lines of text in the box (including header) the box has nice rounded corners no matter what I do, eg. change font size, change screen resolution, etc. Right now I have 6 lines of text and the corners stay rounded. The first box I wanted to create had 35 lines of text in 2 paragraphs. If I preview the page with those 35 lines out of Macromedia it looks fine, but when I minimize IE then restore the window I lose the bottom right rounded corner and it goes back to being square.

2) When I play around with my screen resolution I see funky things in IE. I normally have my screen resolution set to 1600 x 1200. If I reduce down to 1280 x 960 or even lower I get a squared off corner on the bottom right if my box is not fully viewable on the screen without having the scroll to the bottom of it. If the box is viewable without scrolling down then the corners stay rounded if I minimize and restore repeatedly.

Any suggestions would be much appreciated.