Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

firefox pagezoom creates lines around round-cornered buttons

12:13 pm on Aug 9, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Jan 5, 2009
posts: 43
votes: 0

Hey you :-)

Can you help me? I am trying to create a website with blocks with rounded corners. I tried a couple of ways, amongst which was curvycorners, but curvycorners (otherwise perfect) does not rescale the boxes in IE when the viewportsize is changed. Anyways...

I used a clean testcase, of which both the code and the link are posted below.

It shows my problem: resizing the page with page zoom will (in step 3 and 5 i believe) create lines around the rounded box.

Some interesting issues:
1. when i put just the box in the body, the line shows to the right
2. when i put the box in a wrapper, the line shows to the left.
3. when i put a div above this box, the line shows at the top too.

Question: How can i get rid of these lines?

As i cannot post the images here (hence the below case is useless)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="nl">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>In de media &laquo; ITNEXT</title>
.wrapper{width:300px;margin:0 auto;text-align:center;}
#contact {width:180px;position:relative;text-align:center;height:50px;}
#contact a{display:block;padding-top:16px;color:white;}
#contact a:hover{color:#9d0053;}
#contact .lt{position:absolute;top:0;left:0;background-image:url('tl-contact.png');background-repeat:no-repeat;background-position:bottom right;height:20px;width:20px;}
#contact .lb{position:absolute;bottom:0;left:0;background-image:url('bl-contact.png');background-repeat:no-repeat;background-position:bottom right;height:20px;width:20px;}
#contact .c {width:180px;height:50px;background-image:url('c-contact.png');background-repeat:repeat;}
#contact .rt{position:absolute;top:0;right:0;background-image:url('tr-contact.png');background-repeat:no-repeat;background-position:bottom left;height:20px;width:20px;}
#contact .rb{position:absolute;bottom:0;right:0;background-image:url('br-contact.png');background-repeat:no-repeat;background-position:bottom left;height:20px;width:20px;}
#contact a{color:white;}
#contact a:hover{color:#9d0053;}
<div class="wrapper">
<div class="test"></div>
<div id="contact">
<div class="lt"></div><div class="lb"></div><div class="clear"></div>
<div class="c">
<a title="" href="">Contact</a>
<div class="rt"></div><div class="rb"></div

[edited by: limbo at 9:51 am (utc) on Aug 10, 2010]
[edit reason] No URL's please, see TOS [webmasterworld.com] [/edit]

5:35 pm on Aug 9, 2010 (gmt 0)

Full Member

joined:July 31, 2005
posts: 272
votes: 0

You might want to take a look at CSS3 PIE Demo: Tabs [css3pie.com]. That's one way to make curves that is compatible with all browsers including the infamous IE.

CSS Rounded Corners:


Those should give you some additional ideas for how you may need to proceed.

12:18 pm on Aug 18, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Jan 5, 2009
votes: 0

Thanks for your reply, Payne

Are these also compatible with pagezoom in firefox?
The case is not that i cannot see nice rounded corners with the technique described above. My post is about that the images seem to get dislocated when pagezoom is used.

However, i'll bring this to a forum on which i can show an image/post a link, bcs this really needs one :-)