• 0

IE9 and placeholder not displaying

Asked by ACTIONpack,

 Share

Question

Grand Master

ACTIONpack

Posted
Posted

I'm trying to get the placeholder to show up in the input in IE9 and it will now display. The code is below. It works in IE10, Chrome and Firefox with no issue.

http://www.romabio.com




<!-- Sign Up Chimp Mail -->

        <div id="signupMail">

            <form action="http://romabio.us5.list-manage.com/subscribe/post?u=2bbf20f7a4d086e87c8b7d9f8&id=64fc10eb91" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
            <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
            <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Subscribe to our Mailing List" required>
            </form>

            <em><a href="http://www.romabio.com/products/files.html" title="echnical or Manufacturer Data Sheet" >Need a Technical or Manufacturer Data Sheet?</a></em>

        </div>

<!-- Sign Up Chimp Mail -->




#signupWrap {
width: 100%;
height: 60px;
display: block;
background: #5B0806;
-webkit-box-shadow: inset 5px 10px 10px -6px rgba(0, 0, 0, .5);
-moz-box-shadow: inset 5px 10px 10px -6px rgba(0, 0, 0, .5);
box-shadow:   inset 5px 10px 10px -6px rgba(0, 0, 0, .5);
}
#signupMail  {
width: 950px;
height: 100%;
margin: 0 auto;
}
#signupMail em {
float: right;
position: relative;
top: -46px;
}
#signupMail em a {
font-family: 'Ubuntu';
font-size: 14px;
color: white;
padding: 9px 4px;
opacity: .6;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius:  2px;
border-radius:   2px;
z-index: 9999;
text-shadow: 0px 0px 1px #000;
    filter: dropshadow(color=#000, offx=0, offy=0);
}
#signupMail em a:hover {
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition:  all 200ms ease-in-out;
-o-transition:  all 200ms ease-in-out;
transition:   all 200ms ease-in-out;
text-decoration: underline;
opacity: .8;
}
#signupMail form {
display: block;
position: relative;
color: #999;
text-align: left;
padding: 10px 0;
}
#signupMail h2 {
font-weight: bold;
padding: 0;
margin: 15px 0;
font-size: 1.4em;
}
#signupMail input {
font-family: 'Ubuntu';
color: #999;
border: 1px solid #5B0806;
-webkit-appearance: none;
background-color: rgba(255, 255, 255, 1);
background-image: url(../images/signupIcon.png);
background-repeat: no-repeat;
background-size: 24px;
background-position: 5px 4px;
-webkit-box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.8) inset;
    -moz-box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.8) inset;
    box-shadow:   0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.8) inset;
-webkit-transition: all 100ms ease-in-out;
-moz-transition: all 100ms ease-in-out;
-ms-transition:  all 100ms ease-in-out;
-o-transition:  all 100ms ease-in-out;
transition:   all 100ms ease-in-out;
}
#signupMail input[type=checkbox] {
-webkit-appearance: checkbox;
}
#signupMail input[type=radio] {
-webkit-appearance: radio;
}
#signupMail .button {
width: auto;
font: normal 12px/2 'Ubuntu', san-sarif;
padding: 0;
border: 0;
color: #fff;
cursor: pointer;
display: inline-block;
text-align: center;
text-decoration: none;
white-space: nowrap;

-webkit-border-radius: 2px;
-moz-border-radius:  2px;
border-radius:   2px;
-webkit-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .2);
-moz-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .2);
box-shadow:   1px 1px 1px 0 rgba(0, 0, 0, .2);
text-shadow: 0px 0px 1px #000;
    filter: dropshadow(color=#000, offx=0, offy=0);

background: rgb(169,3,41);
background: -moz-linear-gradient(top,  rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(to bottom,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition:  all 200ms ease-in-out;
-o-transition:  all 200ms ease-in-out;
transition:   all 200ms ease-in-out;
}
#signupMail .button:hover {
background: rgb(169,3,41);
background: -moz-linear-gradient(top,  rgba(169,3,41,1) 0%, rgba(169,3,41,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(100%,rgba(169,3,41,1)));
background: -webkit-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(169,3,41,1) 100%);
background: -o-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(169,3,41,1) 100%);
background: -ms-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(169,3,41,1) 100%);
background: linear-gradient(to bottom,  rgba(169,3,41,1) 0%,rgba(169,3,41,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#a90329',GradientType=0 );
-webkit-box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, .2);
-moz-box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, .2);
box-shadow:   inset 1px 1px 1px 0 rgba(0, 0, 0, .2);
}
#signupMail .button:active {
background: rgb(109,0,25);
background: -moz-linear-gradient(top,  rgba(109,0,25,1) 2%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(109,0,25,1)), color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top,  rgba(109,0,25,1) 2%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top,  rgba(109,0,25,1) 2%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top,  rgba(109,0,25,1) 2%,rgba(109,0,25,1) 100%);
background: linear-gradient(to bottom,  rgba(109,0,25,1) 2%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d0019', endColorstr='#6d0019',GradientType=0 );
-webkit-box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, .2);
-moz-box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, .2);
box-shadow:   inset 1px 1px 1px 0 rgba(0, 0, 0, .2);
}
#signupMail .small-meta {
font-size: 11px;
}
#signupMail .nowrap {
white-space: nowrap;
}	
#signupMail .clear {
float: right;
position: relative;
top: 47px;
margin: -36.5px 602px 10px 0 !important;
}
#signupMail label {
display: block;
font-size: 16px;
color: #999;
padding-bottom: 10px;
font-weight: bold;
}
#signupMail input.email {
width: 320px;
height: 15px;
font-size: 13px;
color: #999;
display: block;
padding: 9px 0 8px 32px;
margin: 5px 5% 10px 0;
-webkit-border-radius: 3px;
-moz-border-radius:  3px;
border-radius:   3px;
}
#signupMail input.email:hover, #signupMail input.email:focus {
outline: none;
background-color: rgba(255, 255, 255, .95);
-webkit-border-radius: 4px;
-moz-border-radius:  4px;
border-radius:   4px;
}
#signupMail input.button {
width: 80px;
height: 22px;
display: block;
}
#signupMail div#mce-responses {
float: left;
top: -1.4em;
padding: 0em .5em 0em .5em;
overflow: hidden;
width: 90%;
margin: 0 5%;
clear: both;
}
#signupMail div.response {
margin: 1em 0;
padding: 1em .5em .5em 0;
font-weight: bold;
float: left;
top: -1.5em;
z-index: 1;
width: 80%;
}
#signupMail #mce-error-response {
display: none;
}
#signupMail #mce-success-response {
color: #529214;
display: none;
}
#signupMail label.error {
display: block;
float: none;
width: auto;
margin-left: 1.05em;
text-align: left;
padding: .5em 0;
}
[/CODE]

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
Grand Master

ACTIONpack

Posted
  • Author
Posted

IE9 does not support placeholder in HTML5. Workaround is using javascript.


$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();
[/CODE]

[CODE]
.placeholder {
color: Pick your color;
}
[/CODE]

Link to comment
Share on other sites
  • 0
Grand Master

ACTIONpack

Posted
  • Author
Posted

You're aware that the site is horrendously slow right?

49 requests ? 2.0?MB transferred ? 9.05?s (onload: 9.07?s, DOMContentLoaded: 2.56?s)

The feature images is what is slowing down the site but that's just the mean page only.

Link to comment
Share on other sites
  • 0
Grand Master

ACTIONpack

Posted
  • Author
Posted

you've been working on this site for months...

just waiting on content for all the products and images beside that its complete. Just been doing other stuff for the company, print and etc..

you've been working on this site for months...

just waiting on content for all the products and images beside that its complete. Just been doing other stuff for the company, print and etc..

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.