homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

firefox pagezoom creates lines around round-cornered buttons

5+ Year Member

Msg#: 4184178 posted 12:13 pm on Aug 9, 2010 (gmt 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]



Msg#: 4184178 posted 5:35 pm on Aug 9, 2010 (gmt 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.



5+ Year Member

Msg#: 4184178 posted 12:18 pm on Aug 18, 2010 (gmt 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 :-)


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved