firefox pagezoom creates lines around round-cornered buttons

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)
<snip>


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>In de media &laquo; ITNEXT</title>
<style>
.wrapper{width:300px;margin:0 auto;text-align:center;}
.test{height:50px;width:100%;}
#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;}
</style>
</head>
<body>
<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>
<div class="rt"></div><div class="rb"></div
</div>
</div>
</body>
</html>

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

firefox pagezoom creates lines around round-cornered buttons

immols

Major_Payne

immols

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week