Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Thanked 1 Time in 1 Post

    Styling a form in Internet Explorer


    I have an online form which appears different in IE from Safari (please see two screenshots attached). The form is here on a 'test' page:


    The form should look the same in Explorer as it does in Safari (on Windows), but the shadow appears to be missing. How best to correct that, please?

    Here is the CSS:

    input, textarea {   
        padding: 9px;  
        border: solid 1px #E5E5E5;  
        outline: 0;  
        font: normal 13px/100% Verdana, Tahoma, sans-serif;  
        width: 200px;  
        background: #FFFFFF url('bg_form.png') left top repeat-x;  
        background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));  
        background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);  
        box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
        -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
        -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
    textarea {   
        width: 400px;  
        max-width: 400px;  
        height: 150px;  
        line-height: 150%;  
    input:hover, textarea:hover,  
    input:focus, textarea:focus {   
        border-color: #C9C9C9;   
        -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;  
    .form label {   
        margin-left: 10px;   
        color: #999999;   
    .submit input {  
        width: auto;  
        padding: 9px 15px;  
        background: #617798;  
        border: 0;  
        font-size: 14px;  
        color: #FFFFFF;  
        -moz-border-radius: 5px;  
        -webkit-border-radius: 5px;  
    Many thanks

    Attached Thumbnails Attached Thumbnails -ie-jpg   -safari-jpg  

  2. #2
    New to the CF scene
    Join Date
    Jan 2014
    Thanked 0 Times in 0 Posts
    I looked at the site in IE 9 and the shadow is less noticeable than in chrome or Firefox, but it is still there. I would suggest if this bugs you, to make a browser sniffer to detect if IE is used to make the shadow darker when viewed. Another possibility is that your IE isn't working right. Press F12 to access developer tools and make sure IE is in the correct standards mode.

    See the buttons circled? If they don't say the correct version, click them to change.


Posting Permissions

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