Разное отображение сайта в разных браузерах

У меня возникла проблема, которую я никак не могу решить, я полнейший нуб и я это знаю, тема, наверное не в тему форума...но все же думаю найдутся люди, которые знают и смогут помочь.

Я делаю сайт, на джумле, пока только с шаблоном и дизайном ковыряюсь, вот и возникла проблема, я в css и тем более php кодах не очень разбираюсь, и все делаю методом тыка, ну или практики.

вот сайт santeg.ru

Точнее начальная его стадия, все дело в том, что в Мозиле сайт отображается идеально, как надо!

В IE и Опере плохо, а именно плохо отображается шапка сайта, та, что с меняющимися картинками, под логотипом.

Можете увидеть в IE она будто увеличивается видны какие-то полоски, картинки смещаются вправо. В Опере тоже самое плюс ко всему меню вверх уходит.

Знаю, что нужно, что-то поменять в файлах CSS, плюс все это связано с тремя картинками, три красные полоски(head_b, head_t, head_in) Пытался что-то менять в Css, с clearfix, даже че-то получалось начинало отображаться хорошо в Опере, зато в Мозиле вообще все кувырком.

Ниже приведу CSS файлы, Может кто сможет посмотреть по коду и понять, что нужно изменить, чтоб все было хорошо. Буду очень признателен!

Clearing.css

/* clearing */

/*******************************************************************************

* HACKS : Clearfix

*

* Clearfix provides a means to for an element to contain all it's floated

* children even if it's not normally tall enough to do so. For more information

* on clearfix please see:

*

*/

.clearfix:after

{

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

width: 0%;

height: 0%;

}

.clearfix

{

min-width: 0; /* trigger hasLayout for IE7 */

display: inline-block;

/* \*/ display: block; /* Hide from IE Mac */

}

* html .clearfix

{

/* \*/ height: 1%; /* Hide from IE Mac */

}

.clear {

clear:both;

}

/* end clearing */

Вот часть template.css

@import url('clearing.css');

@import url('menus.css');

html, body {

margin: 0;

padding: 0;

background: #fff;

font-family: Tahoma, Arial, Helvetica, sans-serif;

font-size: 11px;

line-height: 1.5;

color: #464646;

}

table, ul, a, li, img, p, form, hr, dl, dt, dd, div, h1, h2, h3, h4, h5, h6, label,

blockquote,ul,ol,dl,fieldset,address {margin:0; padding:0}

img { border: none; margin: 0; padding: 0;}

fieldset {margin:0; padding:0; border: none;}

#top { width: 960px; background:url(../images/top_bg.gif) top center no-repeat; padding-top: 39px;}

#logo { float: left; }

#top_right { float: right; width: 550px;}

#top_1 { height: 49px; padding-right: 14px; }

#icons { float: left; height: 10px; padding-top: 7px;}

#icons img{ margin: 0 5px;}

#search_box { float: right;}

#menu_box { height: 42px; background: url(../images/menu_bg.gif) top left no-repeat; padding: 0 15px 0 5px; width: 540px;}

#header { width: 960px; background:url(../images/head_in.jpg) left center repeat-y;}

#header_t {width: 960px; background:url(../images/head_t.jpg) left top no-repeat; }

#header_b {width: 960px; background:url(../images/head_b.jpg) left bottom no-repeat; padding: 8px 0; vertical-align: top;}

#header img { margin: 0; padding: 0; border: none}

#head_slogan { float: left; padding-left: 8px; width: 400px; text-align: left; overflow: hidden }

#head_img { float: right; padding-right: 8px; width: 542px; overflow: hidden}

#two_cols {width: 1492px; text-align: justify; padding: 5px 0;}

#mainbody { padding: 0 35px 0px;}

#foot_in {width: 960px; background:url(../images/foot_in.gif) left repeat-y;}

#foot_t {width: 960px; background: url(../images/foot_t.gif) top left no-repeat;}

#foot_b {width: 960px; background:url(../images/foot_b.gif) bottom left no-repeat; min-height: 35px;}

#foot { padding: 15px 15px; color: #fff; }

#foot a:link,#foot a:visited {color:#fff; text-decoration: none; font-weight: bold;}

#foot a:hover {color:#fff; text-decoration: underline;}

#copyright { float: left; width: 670px; text-align: left;}

#design { float: right; width: 250px; text-align: right;}