CODEWITHSUNDEEP
css
Siva
Siva

Reputation: 3728

CSS alignment in IE

Hi i created a label with some css. The label css is working fine Firefox , chrome but when i run in IE the css is not coming properly. 

label.formInputField {width:119px; height:26px; margin:3px 0px 0 0; padding:11px 6px 0 6px; background: #dadada url('css-images/labelBG.png') 50% 50% repeat-x; float:left; display: block; font-size: 12px; font-weight: normal; line-height: 1.1; color:#333; text-align:right; border: 1px solid #AAAAAA; border-right: 1px solid #dadada; } 

 .div_form_textbox { width:200px; float:left; text-align:left; background-color:#E6E6E6; height:29px; margin:3px 2px 0 0; padding:5px 0 3px 5px;    border-right: 1px solid #AAAAAA;border-top: 1px solid #AAAAAA;border-bottom: 1px solid #AAAAAA; background: #e6e6e6 url('siva_images/form_input_bg.png') 50% 50% repeat-x;}

.ui-corner-left { -webkit-border-bottom-left-radius :4px;-webkit-border-top-left-radius :4px; border-bottom-left-radius: 4px; border-top-left-radius: 4px; }
            .ui-corner-right {  -webkit-border-bottom-right-radius :4px;-webkit-border-top-right-radius :4px;border-bottom-right-radius: 4px; border-top-right-radius: 4px; }


<label class ="formInputField ui-corner-left" for="Pdoctor">Doctor First Name:</label>
<div class="div_form_textbox ui-corner-right">
                                    <input id="fname" name="fname" type="text" size="30" class="textbox ui-corner-all"/>
                                </div>

The proper output in mozilla and chrome like this enter image description here

So the same thing in IE is coming like this:

enter image description here

The left side is the label and the right is the div inside there is a textbox. my problem Only half of that is coming in the label of doctors first name . Please help me to get out this issue

Upvotes: 0

Views: 99

Answers (2)

Mansoor Gee
Mansoor Gee

Reputation: 1069

IE8 and less browsers cannot render CSS3 -webkit commands. Like the one you have used in css style:

.ui-corner-left { -webkit-border-bottom-left-radius :4px;....

Upvotes: 0

thirtydot
thirtydot

Reputation: 228162

I get that exact behaviour in IE when I look at it in Quirks Mode.

You probably just need to add a valid doctype as the very first line, such as:

<!DOCTYPE html>

If you already have that, then there are other possible reasons for Quirks Mode.

Upvotes: 3

Related Questions