Forums
View unanswered posts | View active topics It is currently Wed Apr 23, 2014 6:00 am



Reply to topic  [ 3 posts ] 
 Background squashed in IE8 when using rounded corners 
Author Message

Joined: Sun Jun 17, 2012 8:42 pm
Posts: 1
Post Background squashed in IE8 when using rounded corners
Hi, I have a pretty simple div with rounded corners and a repeating background, however in IE8 the background is being squashed/clipped. If I remove either the border-radius property or the PIE behavior the background displays as it should, however of course I need both the background image and the rounded corners. Here's the code, I've also included a link to how it looks in other browsers and how it looks in ie8 (IE8 being the bottom image)

http://s1168.photobucket.com/albums/r48 ... ction=view┬Ąt=96d5bbd7.jpg&evt=user_media_share

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color:#999;
}
#banner {
position:relative;
width:80%;
margin:auto;
height:100%;
width:500px;
height:60px;
margin-top:50px;
z-index:3;
border-radius:10px;
background:url('images/banner.jpg') repeat-x #000;
border:none;
behavior: url(PIE.htc);
}
</style>

</head>

<body>
<div id="banner">Starts here Blah</div>
</body>
</html>


Sun Jun 17, 2012 9:01 pm
Profile

Joined: Mon Aug 13, 2012 5:43 am
Posts: 1
Post Re: Background squashed in IE8 when using rounded corners
Try to resize background image size so that height is the same as width. Worked for me.


Mon Aug 13, 2012 5:44 am
Profile

Joined: Wed Aug 29, 2012 6:12 am
Posts: 1
Post Re: Background squashed in IE8 when using rounded corners
Having the same problem. I have a 200x50 button with its up and down states in its background image.

In IE8, with PIE, the 200x100 image is crammed into the 200x50 button, showing both states, warped.

Any ideas? I don't want to use separate images for each state.

The button:
Code:
<a class="button">Create Account</a>


The CSS:
Code:
.button{
   background: #68bcdf url(/image/bg-button.png) center top repeat-x;
   height: 50px;
   width: 200px;
   line-height: 36px;
   font-size: 20px;
   color: white !important;
   display: inline-block;
   padding:  0 15px;
   border: 1px solid #3C758F;
   border-radius: 4px;
   text-shadow: 0px 1px 4px #207fa4;
   cursor: pointer;
   text-decoration: none;
   box-shadow: 0px 1px 0px #fff;
   behavior: url(/js/PIE.php);
}


Wed Aug 29, 2012 6:14 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 3 posts ] 

Who is online

Users browsing this forum: Bing [Bot], Google [Bot] and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.