Как сделать верстку кроссбраузерной

[NightHawk]

Сверстал свой первый макет и при проверки на кроссбраузерность в safare и chrome поплыли некоторые элементы, скажите, что именно исправить и почему так выходит?

Вот как выглядит нормально в опере:

А вот в сафаре:

Скидываю эти участки кода. html:

<div id="topmenu">
<ul id="navigation">
<li><a href="#" class="select">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li></ul>
<div id="rss"><img src="img/rss.jpg" alt="rss блога" class="imgrss"/><a href="#">Subscribe</a></div> <!-- end rss -->

<div id="search">
<form name="Search" method="get" action="http://www.yandex.ru:8081/yandsearch">
<input name="text" type="text" id="search_text"/>
<input type="submit" value="Поиск" id="search_button"/>
</form>

</div><!-- end search -->
</div> <!-- end topmenu -->
<div id="banner">
<h1>Magnifico</h1><img src="img/wavet.png" width="93" height="27" class="wave" alt="" />
</div>

Css:

/* Header*/
#topmenu {
height: 32px;
background: #050505;
}
#topmenu ul {
float: left;
padding: 0px 0px 0px 86px;
}
#topmenu ul li {
float: left;
display: block;
line-height: 30px;
position: relative;  
}
#topmenu ul li  a {
height: 32px;
display: block;
text-decoration: none;
text-transform: uppercase;
text-align:center;
padding: 0 16px;
   }
#topmenu ul li a:hover,
#topmenu ul li a.select
{
    height: 32px;
display: block;
text-decoration: none;
background: #0a9fb0 ;
color: #fff;
   }
#topmenu ul li  a:hover:after,
#topmenu ul li a.select:after
{
  content: " "; 
	    background: url(img/arrow.png) no-repeat;
   left: 44%;
  display: block;
							    height: 7px; 
							    width: 13px; 
							   position: absolute; 
							    top: 32px; 
}  
#rss {
float: left; 
}
.imgrss {
padding: 9px 0px 6px 9px; 
}
#rss a {
float: right;
text-decoration: none;
line-height: 30px;
text-align:center;
padding: 2px 0px 0px 9px;
text-transform: uppercase;
}
#rss a:hover {
text-decoration: underline;
}
/* Search Form*/
#search {
float: right;
}
#search_text {
width: 121px;
height: 16px;
background: #272727;
border: 1px solid #353535;
margin: 8px 21px 6px 0px; }
#search_button {
height: 32px;
display: block;
padding: 0 16px;
float: right;
text-decoration: none;
border: none;
margin: 0px 168px 6px 0px;
background: #0a9fb0;
color: #fff;
text-transform: uppercase;
cursor: pointer;
}

/* Banner */

#banner {
height: 115px;
}
#banner h1 {
font-size: 30px;
font-family: Arial, Arial, Helvetica, sans-serif;
color: #3c3c3c;
text-transform: uppercase;
text-align: center;
padding: 30px 100px 0px 0px;
display: block;
position: relative;   
}
.wave {
display: block;
left: 48%;
position: absolute;  
}

Так же, в сафаре не работает "cursor: pointer;" можно что-то ещё с кнопкой предпринять?

[red4pony]

#search_button {
height: 32px;
display: block; /*——————————————удалить——————--*/
padding: 0 16px;
float: right;/*——————————————удалить——————--*/
text-decoration: none;
border: none;
margin: 0px 168px 6px 0px;
background: #0a9fb0;
color: #fff;
text-transform: uppercase;
cursor: pointer;

vertical-align:top;/*———————добавить——————*/
}

Edited May 8, 2013 by red4pony

[NightHawk]

Спасибо большое! все стало на свои места :-)