SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: CSS3 Anthology

  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question CSS3 Anthology

    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.

    Code:
    .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);
    }

    HTML Code:
    <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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.

    http://msdn.microsoft.com/en-us/libr...(v=vs.85).aspx

    Not supported until IE9.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.
    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. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    .moduletable-subscribe form {
    	position: relative;
    	behavior: url(../js/PIE.htc);
    }
    See if that helps.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •