Keskustelu: Nettisivujen teko: IE:ssä tyylit eivät toimi

sarip [03.04.2012 10:33:25]

Hei!
Olen tehnyt seuraavat verkkosivut, jotka ovat nyt väliaikaisesti esillä: www.skrivaus.fi
Sivut toimivat irefoxissa ja romessa, mutta contentin sisältö hyppää oikealle IE 7:ssa ja varmaan myös vanhemmissa IE-selaimissa.
Osaisiko joku neuvoa, miten virhettä voisi korjata:

Tyyli näyttää tältä

@charset "utf-8";

body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #333;
	margin: 0;
	padding: 0;
	background-image: url(../img/tausta2.jpg);
	background-repeat: repeat;
}

#Container {
	font-family: "Lucida Sans Unicode", "Lucida Grande",sans-serif;
	height: 660px;
	width: 860px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF;
	}

#Top {
	height: 100px;
	width: 860px;
	margin-top: 10px;
	background-image: url(../img/header.jpg);
	margin-bottom: 0px;
	background-repeat: no-repeat;
}
#content {
	width: 430px;
	height:505px;
	padding-top: 10px;
	float: left;
	margin-left: 210px;
	position: absolute;

}

#right {
	width: 122px;
	height: 495px;
	float: right;
	background-image:url(../img/skrivaus.gif);
	background-repeat: repeat;
	margin-top: -8px;
	margin-right: 10px;
}


#left {
	height: 470px;
	width: 168px;
	float: left;
	padding-right: 10px;
	border: 1px;
	border-style: solid;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 25px;
	}

Ja html alkaa näin:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="vietintä, markkinointi, lehtiartikkelit, tiedotteet, viestinttoimisto, maankyttö, maanmittaus" />


<title>Viestintä Skrivaus 2012</title>

<!-- main -->
<link href="../css/main.css" rel="stylesheet" type="text/css" media="all">


</head>

Mod. korjasi kooditagit!

jukkah [03.04.2012 11:02:25]

Johtuu luultavasti näiden yhdistelmässä:

#content {
    float: left;
    margin-left: 210px;
    position: absolute;
}

Otin floatin ja positionin pois käytästä Chromella, niin tulos oli hyvän näköinen. En nyt onnistunut muokkaamaan lähdekoodia IE:llä, joten tarkempi tutkimus jää ainakin iltapäivään.

Mitä siitä sain kuitenkin selville, margin-left: 0px; saisi aikaan toivotun tuloksen vanhalla IE:llä.

Ps. Muistaakseni vanhat IE:t ymmärtävät positionin omalla erikoisella tavallaan.

Merri [03.04.2012 11:08:37]

Ongelma johtunee footerista, joka luo sivulle vaakasuuntaisen vierityspalkin myös Firefoxilla ja Chromella:

<div class="footer">
    <p>Sivusto päivitetty 1.1.2012. Webmaster  Skrivaus.</p>
    <!-- end .footer --></div>

Siirrä tämä contentin ulkopuolelle, eli seuraavan </div>:n taakse.

Tämän lisäksi tyyliä tarvitsee hieman säätää, tässä oma ehdotukseni:

.footer {
	background: none repeat scroll 0 0 white;
	bottom: 3px;
	clear: both;
	color: #999999;
	font-size: 12px;
	padding: 1px 0;
	right: auto;
	text-align: center;
	top: auto;
	width: 860px;
}

Tämän muutoksen jälkeen voi sitten tutustua paremmin mahdollisiin IE:n ongelmiin :)

sarip [03.04.2012 11:39:30]

Kiitos! Testailin noita molempia ja sain sivuston näkymään myös IE seiskassa.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen