[CSS] Elementy zlewają się po minimalizacji

[tndek]

Witam.

Dziękuję za cenne wskazówki, które zniwelowały wiele niejasności, jakie w ostatnim czasie mnie trapiły.

Akurat byłem w trakcie wprowadzania zasugerowanych zmian, gdy wygląd strony przybrał idealne, jak dla mnie, wizualne kształty. Myślę, że najlepiej będzie, gdy zamieszczę link do strony -> http://tinyurl.com/bwnaak6

Na chwilę obecną, całość CSS wygląda tak:

Kod:

html,body{
margin:0;
padding:0
}
body{
font-family:Verdana;
text-align:center;
background:#000 url(img/mocno_szary.png);
color:#fff;}

#naglowek {
text-align:center;
height:60px;

}

div#logo{
margin:0px auto;
width:260px;
position:relative; right:280px;

}


div.like {
display:block;
float:right
position: relative; bottom:10px; left:10px;
}

div.slogan {
width:960px;
display:block;
float:left;
position:relative; bottom:100px; left:30px;
}


#menu{
margin:0px auto;
width:740px;
text-align:left;
font-weight:bold;
font-size:12px;
position: relative; bottom:60px;
}
#menu ul, #menu ul li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu ul {
    float: left;
    width: 100%;
    padding-right: 20px;
    margin-top: 8px;
}

#menu ul li {
    float: left;
    margin-right: 10px;
}

#menu ul a {
    text-decoration: none;
    display: block;
    background-color: #red;
    color: #red;
    padding: 9px 17px;
    border: 1px solid #FFD700;
    position: relative;
    top: -1px;
    border-radius:4px 4px 4px 4px;
    
}

#menu ul a:hover {
    background-color: #0b81a8;
}
a:link , a:visited , a:active {color:#b9b9b9; text-decoration:none;}
a:hover {color:#ffd500;}

#kontener{
text-align:left;
margin:0 auto;
width:700px;
clear: left;
position:relative; bottom:20px;
background:url(img/cont_bg.png);
box-shadow:0px 0px 10px #151515;
padding:20px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
font-size:12px;
}
#kontener h1 {
font-size: 1.4em;
font-weight: bolder;
padding-bottom: 10px;
color: #FFB903;
border-bottom:1px solid #FFB903;
}
#kontener table {
font-size:12px;
}
#kontener .pole {
border:0;
background:#fff;
width:170px;
height:25px;
padding:2px;
margin:2px;
font-weight:bold;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
#kontener textarea{
border:0;
background:#fff;
width:400px;
height:125px;
padding:2px;
margin:2px;
font-weight:bold;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* CODE BY KLOCEK & Quik */

.shit {
text-align:center;
background:#000;
border:1px solid #4d4d4d;
padding:10px;
margin-top:10px;
margin-bottom:20px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.shit img {
max-width: 670px;
}

.img_title {
    width:100%;
    text-align:left;
}
.img_title a {
    font-size:24px;
    color:#FFFFFF;
    font-weight:bold;
}
.fb_share {
padding-top:8px;
}

.button, .button:visited , .button:link {
   background: #0b81a8;
   padding: 11.5px 22px;
    border-radius:10px;
   color: white;
   font-size: 19px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   text-align: left;
   position:relative;
   }
.button:hover {
   border-top-color: 1px #f08a0c;
   background: #3eaca9;
   color: #ffffff;
   }
#strony {
text-align:center;
margin:0 auto;
width:740px;
padding-top:30px;
font-size:14px;
font-weight:bold;
}
#stopka {
text-align:center;
margin:0 auto;
width:740px;
padding:30px;
font-size:14px;
}
img {
border:0px;
}
.tabela tr:hover { background:#0F0F0F; }
/* begin css tabs */

#tab ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        position:relative;
        bottom:-1px;
        z-index:99;
    }
    #tab li {
        float: left;
        border: 1px solid #FFB903;
        margin-left:10px;
    }
    #tab a {
        text-decoration: none;
        display: block;
        background: #3d3d3d;
        padding: 6px 1em;
        text-align: center;
    }
    #tab a:hover {
        background: #3d3d3d;
        }
    #tab #selected {
        border-bottom-color: #171717;
    }
    #tab #selected a {
        background: #171717;
        font-weight: bold;
    }
    #tab_linia{
        border-top: 1px solid #FFB903;
        clear: both;
        padding-bottom: 10px;
    }

/* end css tabs */
label { float:left; display:inline; width:140px; line-height:2; margin-right:20px; text-align:right;}
#pobierz {
position: fixed;
background-color: #0f4685;
padding: 5px;
border: 1px solid #2867af;
top: 120px;
left:-1px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
width:20px;
text-align:center;
font-weight:bold;
}
.footer {
    margin-top:10px;
    color:#606060;
    font-size:10px;
    font-weight:bold;
}
.footer a {
    color:#c08803;
}

Oto zawartość pliku .php:

Kod:

<div class="nazwa"><a href="http://wpytke.pl"><img src="/img/szaro_logo.png" alt="shity" title="rozrywka, humor, zdjecia, filmy, demotywatory, kwejk" /></a></span></div>
<div class="slogan"><img src="/img/slogan_d.png"</img> <div class="like"><div id="fb-root"></div><script src="http://connect.facebook.net/pl_PL/all.js#xfbml=1"></script><fb:like href="<?php echo 'http://'.$host.$uri.'/'; ?>" send="false" layout="button_count" width="140" show_faces="false" font="verdana"></fb:like></div></div> </div>

Zdaję sobie sprawę, że pod względem kodu nadal nie jest to najoptymalniejsza wersja, jednak obecny efekt wizualny jest właśnie taki, jak oczekiwałem. Jedyny mankament, że w przeglądarce Firefox nie można kliknąć w obrębie logo, jedynie na jego granicach i niewiele wyżej następuje przekierowanie do strony głównej. W Operze jest wszystko w porządku. Dla IE muszę sporządzić osobny CSS. Jak można zlikwidować problem związany z logo (zależy mi na tym, aby tak jak na Operze, cała jego powierzchnia umożliwiała przeniesienie na stronę główną).