IE下的CSS / HTML ::对齐和按钮问题

Question

i have a weird bug on this page when browsing with IE http://www.emfx.fr/?page_id=38

this image explain clearly the problem : http://appartager.free.fr/site/bugIE.jpg

• when i look at this page localy(easyPHP) with IE everything is OK
• when i look at this page online with IE i have 2 problem 1) my hr tag don't align to center 2) the button send message is crop

BUT the code is exactly the same and the Browser is the same (IE)

the hr behavior is control in a css file

hr.center {
    border: none;
    color: #353a40;
    background-color: #353a40;
    height: 1px;
    width: 371px;
    text-align: center;
}

the button is also control by 2 css file (All Browser/IE exception)

here is the general code :

#contact_form input[type=submit] {
padding: 7px 15px;
background: rgba(255,255,255,0.1);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-family: "Droid Sans", Arial;
cursor: pointer;
border: 1px solid #666;
color: #ccc;
margin-bottom: 10px;
margin-left: 420px;
} 

here is the ie exception

#contact_form input[type=submit] {
    padding: 8px 0px;
    background: rgba(255,255,255,0.1);
    margin-bottom: 300px;
    margin-left: 418px;
    text-align: center;
}

if you guys have any idea on how to solve this it would be great !

cheers !

sk

Answer 1

You've removed the horizontal padding from the button in IE

#contact_form input[type=submit] {
    padding: 8px 0px; /* 15px?*/

and I'd personally center a hr using margin:auto instead of using text-align - but hr is aligned to the center by default; so you shouldn't need to adjust this.

(Taking those declarations out in IE web developer tools appears to resolve the problem).