I am facing an issue with two divs containing an image that appear split in half. While this layout looks fine in Chrome, other browsers display it with some outline or layout error, causing the document to appear differently than intended. I tried using outline:0; and border:0; to fix this but it didn't work as expected.
Here is how the image should look like in Chrome:
Internet Explorer
FireFox
Safari
CSS:
.login{
position:absolute;
left:50%;
margin-left:-150px;
top:50%;
margin-top:-200px;
width:300px;
height:400px;
border-radius:10px;
text-align:center;
display:table-cell;
vertical-align:central;
padding:0 0 0 0;
border:0;
border-style:none;
outline:0;
}
.login header{
height:75px;
width:100%;
margin-bottom:0;
padding:0 0 0 0;
border-style:none;
outline:0;
border:0;
}
.login header .logo{
width:150px;
height:75px;
outline:none;
margin-left:75px;
border:0;
border-style:none;
outline:0;
background:url(assests/logo_tiny.png) center 0px no-repeat;
background-color:#000;
border-radius:75px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
box-shadow:5px 5px 10px #000;
-moz-box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
-ms-box-shadow:5px 5px 10px #000;
-o-box-shadow:5px 5px 10px #000;
}
.login form{
outline:none;
width:100%;
height:245px;
padding:0 0 0 0;
padding-top:80px;
border:0;
border-style:none;
box-shadow:5px 5px 10px #000;
background:url(assests/logo_tiny.png) center -75px no-repeat;
background-color:#000;
-moz-box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
-ms-box-shadow:5px 5px 10px #000;
-o-box-shadow:5px 5px 10px #000;
border-radius:10px;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color:#FFF;
}
HTML:
<div class="login">
<header>
<div class="logo"></div>
</header>
<form>
</form>
</div>
Update: Fiddle