form background style not expanding with form in IE8.0

Question

My css code for the form,

form {
            margin:0 auto; 
            text-align:left;
            width:740px;
            border:1px solid #ccc;
            padding:15px;
            background:#fff;
            border-radius: 10px; 
            -moz-border-radius: 10px; 
            -webkit-border-radius: 10px; 
            box-shadow: 0 0 4px #ccc; 
            -webkit-box-shadow: 0 0 4px #ccc; 
            -moz-box-shadow: 0 0 4px #ccc;
            behavior: url(./border-radius.htc);
            font-family:Calibri;
            height: auto;
        }

JS Fiddle

I want the form background to expand with the form, its happening in Chrome but not in IE8.

I have some hidden DIV that are set to visible depending on the selections.

Also how can I get CSS formatting of Chrome and IE look alike.

Ex: if I want to make 2 div visible the form will expand accordingly but the thing is the form border does not extend in IE.

Please check out the entire working code in jsfiddle

enter image description here

So what's your problem? Your border remains and content spills out of it? It's no good putting the code in js.fiddle when you problem is with IE8 which is incompatible with jsfiddle. — jezzipin, Jul 31 '13 at 12:36
@jezzipin yes exactly my content is spilling out of it. I shall remove the code. Thanks for info. — , Jul 31 '13 at 12:40
Am I right in thinking that you are trying to use images to achieve the rounded border effect in IE8 that would be acheived using border-radius in other browsers? — jezzipin, Jul 31 '13 at 12:41
@jezzipin No I am not using images. Its just the border and a bit shadow given to it. — , Jul 31 '13 at 12:43
Please provide a screenshot of the bad behaviour in IE8. I cannot replicate it with your code. — jezzipin, Jul 31 '13 at 12:44

score 0 · Accepted Answer · edited May 23 '17 at 12:28

0

Create a container div that goes around your form (in this case called formcontainer) and move the following CSS styles to that class.

    .formcontainer{
      border-radius: 10px;  
      -moz-border-radius: 10px; 
        -webkit-border-radius: 10px; 
        box-shadow: 0 0 4px #ccc; 
        -webkit-box-shadow: 0 0 4px #ccc; 
        -moz-box-shadow: 0 0 4px #ccc;  
        border:1px solid #ccc;
        padding:15px;
        width: 740px;
    }

Then your form should have the following css rules:

        form {
        margin:0 auto; 
        text-align:left;
        width:100%;
        background:#fff;    
        behavior: url(./border-radius.htc);
        font-family:Calibri;
        height: auto;
    }

I'm not sure what your behaviour property is doing so you might need to move that to the container div as well.

http://jsfiddle.net/Jzbgj/1/

Aside

Also, your JavaScript may need amending as it displays my age as 25 when I enter my D.O.B when it should be 24.

This may help with your age calculation: Calculate age in JavaScript

edited May 23 '17 at 12:28

Community

1
1

answered Jul 31 '13 at 12:55

jezzipin

4,110
14
50
94

behavior is responsible for displaying rounded edges in browsers like IE. – Jul 31 '13 at 13:03
I'd add that to the container div then although border-radius is what should be used for IE10 now. – jezzipin Jul 31 '13 at 13:04
Its done but I am not able to get rounded borders that I used to get using .htc file as you can see in the above screenshot – Jul 31 '13 at 13:05
What are the contents of the .htc file? With things such as rounded borders you should really look at graceful degradation as IE8 will soon be phased out like IE7. – jezzipin Jul 31 '13 at 13:06
border-radius is not supported in IE8 is ther any alternative to it? – Jul 31 '13 at 13:07
No it's not supported. With graceful degradation you would just use run of the mill squared borders. – jezzipin Jul 31 '13 at 13:10
No worries. If this answer has helped, please remember to mark it as correct! I've added a link that might help with the age in my answer. – jezzipin Jul 31 '13 at 13:13
1

Hay thanks for the link and here you go marked the answer as correct – Jul 31 '13 at 13:15

form background style not expanding with form in IE8.0

1 Answers1