Sign in to follow this  
Followers 0

IE9 and placeholder not displaying

7 posts in this topic

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&amp;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;

}

Share this post


Link to post
Share on other sites

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();


.placeholder {

color: Pick your color;

}

1 person likes this

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

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..

Share this post


Link to post
Share on other sites

Posted

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

Which is the first page most visitors go to and therefore should fully load as fast as possible.

http://blog.kissmetrics.com/loading-time/?wide=1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.