HTML+CSS+JavaScript

Как сделать это одинаковым для отображения в разных браузерах?

<style type="text/css">
html, body {margin:0;padding:0;height:100%;}
body{
padding:50px;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
line-height:100%;
zoom:1;
}
.title{
position:relative;
z-index:1;
zoom:1;
color:#06F;
}
.title em{display:none;}
.title:hover em{
display:block;
position:absolute;
z-index:1;
background-color:#000;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:15px;
line-height:normal;
color:#FFF;
text-decoration:none;
padding:0px 50px;
bottom:60px;
right:0;
-webkit-box-shadow:0 0 5px #000; -moz-box-shadow:0 0 5px #000;
box-shadow:0 0 20px #000;
}
.title:hover em i{
position:absolute;
z-index:1;
bottom:-7px;
right:5px;
border-top:7px solid #000;
border-left:7px solid transparent;
display:block;
height:0;
overflow:hidden;
}
</style>

внутренние и внешние отступы обнулить надо не только для html и ody, но и для других элементов тоже

можно еще здесь посмотреть, префиксы для браузеров
http://www.webremeslo.ru/css3/glava3.html

Sorry, вопрос не правильно понял. Для сафари и хрома верхний отступ лучше не убирать, он верх немного 'проглатывает' под менюшку. По крайней мере у меня...