Jump to content



Photo

IE9 and placeholder not displaying


  • Please log in to reply
6 replies to this topic

#1 ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 01 April 2013 - 18:25

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;
}



#2 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 01 April 2013 - 19:08

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;
}


#3 PhilTheThrill

PhilTheThrill

    Neowinian Senior

  • Joined: 28-November 03
  • Location: Canada
  • OS: Win 8.1
  • Phone: WP8

Posted 01 April 2013 - 20:15

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)

#4 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 01 April 2013 - 20:53

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.

#5 primexx

primexx

    Neowinian Senior

  • Tech Issues Solved: 6
  • Joined: 24-April 05

Posted 02 April 2013 - 00:13

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

#6 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 02 April 2013 - 01:46

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

#7 PhilTheThrill

PhilTheThrill

    Neowinian Senior

  • Joined: 28-November 03
  • Location: Canada
  • OS: Win 8.1
  • Phone: WP8

Posted 02 April 2013 - 13:19

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.kissmetr...ng-time/?wide=1