CSS3 Anthology

HTML & CSS
1

Greetings! I just got my book, The CSS3 Anthology and I’m on page 281 & 282 trying to get PIE to work with IE8 and make my box-shadows and border-radius’, but it doesn’t seem to be working here. For example, at the top right there’s rounded corners on the newsletter subscription box.

.moduletable-subscribe form {
	width: 375px;
	margin: 0;
	padding: 9px 12px;
	display: block;
	float: right;
	background: #000 url(../images/newsletter_bkgrd.jpg) repeat-x 0 0;
	border: 0px solid #000;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
 -moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	behavior: url(../js/PIE.htc);
}

<form id="subForm" method="post" action="http://email.rewebbed.com/"><label for="name"></label><input type="text" onblur="this.value = this.value==''?'First Name':this.value;" onfocus="this.value = this.value=='First Name'?'':this.value;" value="First Name" id="name" name="cm-name" style="margin-right: 5px;" class="box"> <label for=" "></label> <input type="text" onblur="this.value = this.value==''?'Your Email':this.value;" onfocus="this.value = this.value=='Your Email'?'':this.value;" class="box" id=" " name=" " value="Your Email"> <input type="submit" value="Sign Up">&nbsp; <img width="34" height="35" src="/demo/ras/images/stories/newsletter_envelope.png" alt="Sign Up to receive our Newsletters!"></form>

Solution?

2

IE8 doesn’t support border-radius. Your best bet would just be to leave it alone :). It’s not that important for users to have it.

Although if you wish, you could use images to achieve it.

Not supported until IE9.

3

Thanks, Ryan:

Then what’s the point in having a fix that claims to work? Or am I misunderstanding the point of using PIE?

4

I don’t know what PIE does (though a search tellsm e it does border radius).

All I can suggest is make sure the path to the JS file is correct. From your CSS file folder, go back one folder, find a folder called JS, go into there and the PIE JS should be there. Correct?

5

I’ve not had a problem with IE8 and PIE before. However, I believe you are meant to add position: relative to the CSS, or it won’t work:

.moduletable-subscribe form {
	[COLOR="#FF0000"]position: relative;[/COLOR]
	behavior: url(../js/PIE.htc);
}

See if that helps.