January 15, 2004

7:52 AM

CSS Issue: I need to add a 45° notch to the bottom right of a table, so I made an oversize background GIF with said notch, assigned it as a background and set its 'background-position attribute' to '100% 100%', as per w3 instructions. The test page I made works fine in IE6, but doesn't work at all in Firebird 0.7, Opera 7.21 or Safari 1.1. Here's the CSS, and the GIF.
posted by signal to (14 comments total)

Doesn't seem to work in Mac IE5 either, by the way.
posted by staggernation at 8:05 AM on January 15, 2004

Use background-position: bottom right; instead of 100% 100%
posted by riffola at 8:11 AM on January 15, 2004

Are background images in tables well supported? My understanding was that you can get flaky results. Can you put the background image into a Div with the table inside the Div instead?
posted by willnot at 8:15 AM on January 15, 2004

Also, background-position removes any need for oversizing the background image. Just make the image as big as your notch, and use a background-colour for the rest of the background. It'll scale better too.
posted by DrJohnEvans at 8:26 AM on January 15, 2004

For some reason, this works:

background: url(imgs/cornerBG.gif) no-repeat right bottom;

whereas my original version, with separate lines for each attribute, didn't.

Good point, DrJohnEvans.
posted by signal at 8:32 AM on January 15, 2004

You could also doing this with some fancy/questionable CSS using borders. I've created a demo page that does the same thing but without using a background image.
posted by Khalad at 8:43 AM on January 15, 2004

Khalad: that's really cool, but I don't understand how it works. How do you get the 45° angle?
posted by signal at 8:52 AM on January 15, 2004

The single-line version works 'cause you're not using background-attachment: fixed.

That causes the background to scroll with the viewport, which isn't what you want with the notch. Mozilla and the other affected browsers implement this by attaching the background to the viewport, thus making the background-position: 100% 100% attach the bottom right corner of the image to the bottom right corner of the browser window—which is outside the viewable area of the background's realm (i.e. your table cell).

It "works" in IE6 simply because IE has flaky support for the fixed property. It works with body backgrounds, but not with divs and such, and apparently not with non-body backgrounds.
posted by DrJohnEvans at 8:52 AM on January 15, 2004

http://www.infimum.dk/HTML/slantinfo.html
posted by Khalad at 8:56 AM on January 15, 2004

If you're sticking things to the right or bottom, make sure you declare the width/ height or that the element is constrained by a container.
posted by yerfatma at 9:05 AM on January 15, 2004

Khalad, based on that slant info link, I was flabbergasted to realize that I can assign two classes to the same div. Thank you! All my time reading through W3C specs, and I never knew that!
posted by oissubke at 9:32 AM on January 15, 2004

Ok, apparently this works. I'd be much obliged if somebody finds a browser where it doesn't and lets me know, here or via email.
posted by signal at 11:35 AM on January 15, 2004

It doesn't work in Netscape 4.7 (natch).
posted by jpoulos at 11:38 AM on January 15, 2004

I'm using, Mozilla 1.4, it wasn't there and then suddenly it was.......which was a bit odd.
posted by Orange Goblin at 12:01 PM on January 15, 2004