website ne izgleda lepo u IE

[ deni90 @ 12.05.2011. 15:39 ] @

Pozzz... Imam "mali" problem... Uradio sam 1 sajt za jednu firmu, ali on ne izgleda isto kao u internet explorer-u, sve su pobrkane i slike i fontovi, kao sto se moze videti na slici... u chrome i u firefox lepo izgleda, kao sto treba...

IE:

Chrome:

Sajt je radjen u html-u i CSS... Ne znam stvarno u cemu je problem, pa ako zna neko, da li ima code neki, ili kako uopste da sredim ovo, bio bih mu zahvalan. Hvala...

[ HeYoo @ 12.05.2011. 16:07 ] @

Recimo za pocetak probas da ovako nesto stavis na pocetak svog css-a

Code:
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

[ Br@nkoR @ 12.05.2011. 16:37 ] @

Postavi problematični HTML i CSS kod ili postavi link do sajta. Takođe navedi i verzije browsera.
Pokušaj da staviš DOCTYPE ukoliko nije definisan.

[ deni90 @ 12.05.2011. 23:26 ] @

@HeYoo

delimicno je resio problem taj tvoj code... uglavnom text je na mestu, i ceo template je pomeren u malo ulevo (sada mislim da je dobro centriran) ali img fajlovi su i dalje razdvojeni... :S

@Br@nkoR

Definisan je DOCTYPE...

html code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Streja - Početna</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

                
    <div id="upperBorder">
        <img src="images/okvir_1.gif" alt="gornji okvir" />
    </div>
    <div id="logoBack">
        <img  src="images/logo_backg.gif" alt="logo pozadina" />
    </div>
    <div id="logo">
        <img src="images/logo.gif" alt="logo" />
    </div>
    <div id="banner">
        <img src="images/banner.gif" alt="baner" />
    </div>
    <div id="textBack">
        <img src="images/text_backg.gif" alt="pozadina za tekst" />
    </div>
    <div id="downBorder">
        <img src="images/okvir_2.gif" alt="donji okvir" />
    </div>
    <div id="footer">
        <img src="images/footer.gif" alt="footer" />
    </div>

                

    <div id="meni">
        <ul>
            <li><a href="#">O nama</a></li>
            <li><a href="#">Usluge</a></li>
            <li><a href="#">Reference</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>

                

    <div id="banerText">
        <p> <span class="text"> Dobrodošli na Web prezentaciju građevinsko-limarske <br />
<span style="margin-left: 160px;">radnje ,,Streja".</span>
<br /><br />Odlikujemo se po kvalitetu i efikasnosti u obavljanju <br />
<span style="margin-left: 158px;">poslova u ovoj struci. </span>
<br /><br />Dugogodišnje iskustvo vam garantuje sigurnost u <br />
<span style="margin-left: 155px;">izvršavanju poslova.  </span>
        </p> </span>
    </div>

                

    <div id="copy">
        <p> <span class="copyright"> © 2011 STREJA. All rights reserved.<br />
                       Design by: <b> ALEST </b> </span>
        </p>
    </div>
</div>

</body>
</html>

css:

Code:
@charset "utf-8";
/* CSS Document */

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

#container {
    width:960px;
    margin:0 auto;
    padding-right: 400px;
}
body  {
    font-family: "Trebuchet MS", sans-serif;
    background-color: #333333;
}

#upperBorder {
    margin-left: 230px;
    margin-top: -8px;
}

#logoBack {
    margin-left: 230px;
    margin-top: auto;
}

#logo {
    margin-left: 272.5px;
    margin-top: -118px;
}

#banner {
    margin-left: 230px;
    margin-top: auto;
    padding: 0;
}

#textBack {
    margin-left: 230px;
    margin-top: auto;
}

#downBorder {
    margin-left: 230px;
    margin-top: auto;
}

#footer {
    margin-left: 230px;
    margin-top: auto;
}

/*** nav buttons ***/

ul {
    font-family: "Copperplate Gothic Light", "Georgia" ;
    list-style-type: none;
}

li {
    display: inline;
}

li a:visited {color: #cccccc;}

li a:link {color: #cccccc;}

li a:hover {color: #993333;}

ul a {
    padding-right: 0px;
    padding-left: 15px;
    line-height: 80px;
    text-decoration: none;
    font-size: 15.5px;
}

#meni {
    margin-top: -904px;
    margin-left: 545px;
}

#banerText {
    margin-top: 35px;
    margin-left: -250px;
}

p .text {
    font-family: "Palatino Linotype";
    font-size: 20px;
    color: #999999;
}
#copy {
    margin-top: 522px;
    margin-left: 59px;
}

p .copyright {
    font-family: serif;
    font-size: 10px;
    color: #999999;
}

Ceo template je radjen u photoshop-u, i slajsovan i svaka slika posebno ubacena u html-u... ali nzm zasto se javlja taj problem na IE 6.0, dok na Firefox 4.0 i Chrome 8.0 se lepo vidi, kao sto i treba...

EDIT: i jos nesto... kad zumiram sajt (pomocu skrola) zumira se nekako ulevo (na firefoxu i chrome, a na IE zumira se ulevo i text "bezi" od svoje pozicije... dok kad pokusavam da odzumiram lepo odzumira sa centra, i lepo se vidi... i tu ima neka caka verovatno...

[ HeYoo @ 13.05.2011. 00:30 ] @

Nemam IE pa cu pokusati odokativno da pomognem
Sliku u naslovu mislim da nema potrebe da seckas.
Element se centrira sa margin-left:auto; margin-right:auto; , a ti si na svakoj slici zakucao levu marginu sto je verovatno odgovorno za raspadanje i taj efekat pri zumiranju.
Pozadinske slike je pametnije staviti na primer kao:

#banner
{
background-image: url('nesto.jpg') no-repeat;
height:900px; /* ovde idu dimenzije diva a u tvom slucaju dimenzije same pozadinske slike */
width:350px;
}

pa onda lepo bez zezanja sa marginama u html mozes realizovati kao

<div id="banner">
<p>Tekst u baneru</p>
</div>

a ako hoces da dodatno stilizujes tekst onda u css napises nesto ovako:

#banner p {
margine:5px;
font-size:1.5em;
}

I na kraju manje slicki a vise css-a ce uciniti tvoj sajt brzim :)

_{[Ovu poruku je menjao HeYoo dana 13.05.2011. u 01:46 GMT+1]}

[ Br@nkoR @ 13.05.2011. 09:58 ] @

Ne mogu reprodukujem problem kod sebe, ne znam koliko su dimenzije slika, mogao ih i nekako dobiti ali nije to to, definiši dimenzije slika u html kodu (img tagovi), ili postavi slike uz poruku kako bi znali dimenzije istih. Mada najverovatnije je ovo što je @HeYoo naveo, poslušaj njegove savete, a takođe izbegavaj i upotrebu negativnih margina.

Pozdrav.