Comments on: Better Page Corner Ads with CSS3 Transforms

By: Louis Lazaris

Louis Lazaris — Sun, 21 Aug 2011 19:06:32 +0000

Hi, Andy. Good question. I didn't realize it had problems in IE7. It can't be fixed for IE7 unless you remove the absolute positioning, which makes it almost not worthwhile. Here is a quote from this page on SitePoint's CSS reference:

In Internet Explorer for Windows versions up to and including 7 ... if overflow is hidden, a relatively positioned element will be visible if the generated box lies outside the parent’s box.

So it's a bug related to positioning and overflow. If I find a solution, I'll post it here.

By: Andy

Andy — Sun, 21 Aug 2011 03:15:46 +0000

Hi, I have used this code on my site and have had to add overflow-x: hidden; so the horizontal scrollbar doesn’t show the right side of the ad box using FF6. But the scrollbars still show up on IE7.

http://www.turkeyturkish.co.uk/

Can you show me how to fix this?

Thanks.

By: CSS3 tutorials and examples

CSS3 tutorials and examples — Thu, 04 Aug 2011 17:16:08 +0000

[...] Better Page Corner Ads with CSS3 Transforms [...]

By: 150+ CSS3 tutorials and exercises for web developers - DesignShock

150+ CSS3 tutorials and exercises for web developers - DesignShock — Tue, 26 Jul 2011 16:41:54 +0000

[...] Better Page Corner Ads with CSS3 Transforms [...]

By: CSS3 tutorials, 150+ exercises for web developers

CSS3 tutorials, 150+ exercises for web developers — Mon, 25 Jul 2011 20:57:17 +0000

[...] Better Page Corner Ads with CSS3 Transforms [...]

By: Louis Lazaris

Louis Lazaris — Sun, 03 Oct 2010 05:27:58 +0000

If you have “overflow: hidden” on the container, and you’re losing the vertical scrollbar, then that means you have a fixed height on the container. Just remove the fixed height, and it will fix it.

The only way I can imagine you’re losing the scrollbar (vertically) is if you have a fixed height. Otherwise, you’ll have to send a link so I can see what you mean. Oh and I don’t think there’s a way to do this without overflow hidden, aside from messing around with nested divs/positioning/z-index, etc…

By: Mike Elmore

Mike Elmore — Sun, 03 Oct 2010 03:42:15 +0000

Is there a way to get this to work without the “Overflow:hidden” because that takes away the scrollbars on my page and you cant scroll down to see the content?

By: DanielV

DanielV — Mon, 05 Jul 2010 16:04:10 +0000

I’m trying to use the same method to create a background for a site and ran into the same problem: adding a “filter:” element to the CSS seems to kill the “overflow: hidden” part for IE7 and instead of a nice triangle in the top right corner we get scrollbars.

By: Louis Lazaris

Louis Lazaris — Sat, 26 Jun 2010 15:16:07 +0000

You’re right. That’s interesting. I’ll have to see if there’s a way to avoid that. Thanks.

By: sal

sal — Thu, 24 Jun 2010 22:17:40 +0000

Not sure if it’s just your demo but the page is able to scroll to right (whether by highlighting text across to the far right or middle clicking the page to get the mouse-follow scroll function) to reveal the rotated box, screenshot here: http://imgur.com/Ncg26.png