homepage Welcome to WebmasterWorld Guest from 54.227.171.163
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

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
immols

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

 

Major_Payne



 
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:

[css3.info...]
[cssjuice.com...]
[kalsey.com...]
[malsup.com...]
[html.it...]

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

Ron

immols

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

regards

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