Keskustelu: Nettisivujen teko: IE aiheuttaa harmaita hiuksia

Lyhyestä virsi kaunis: IE:llä katseltaessa alla olevan sivun valikko on muutaman pikselin irti sivun laidasta. Mistä voisi johtua?

http://www.lasistudio.fi

<div id="lolz">
<div id="header"><img src="img/lasistudiologo.jpg" alt="Lasistudio Jan Torstensson"></div>
    <ul>
        <li id="isomenu"><a href="index.php" <?php if ($page == 'index.php') { ?>class="active"<?php } ?>>ETUSIVU<br><font size="1">&UUTISET</font></a></li>
        <li><a href="tuotteet.php" <?php if ($page == 'tuotteet.php') { ?>class="active"<?php } ?>>TUOTTEET</a></li>
        <li><a href="jalleenmyyjat.php" <?php if ($page == 'jalleenmyyjat.php') { ?>class="active"<?php } ?>>JÄLLEENMYYJÄT</a></li>
        <li><a href="kurssit.php" <?php if ($page == 'kurssit.php') { ?>class="active"<?php } ?>>KURSSIT</a></li>
        <li><a href="galleria.php" <?php if ($page == 'galleria.php') { ?>class="active"<?php } ?>>GALLERIA</a></li>
        <li id="isomenu"><a href="yritys.php" <?php if ($page == 'yritys.php') { ?>class="active"<?php } ?>>YHTEYSTIEDOT<br><font size="1">&YRITYS</font></a></li>
        <br>
        <li><a href="aboutus.php" <?php if ($page == 'aboutus.php') { ?>class="active"<?php } ?>>ABOUT US</a></li>
    </ul>
</div>

#lolz {
  background-image: url('img/judenssi.jpg');
  background-position: 100% 0%;
  background-repeat: no-repeat;
  width: 270px;
  height: 600px;
  margin: 70px 0 0 0;
}

#menu {
  width: 270px;
  height: 600px;
  margin: 0 10px 0 0;
  border: 1px;
}

#menu ul {
  list-style-type: none;
  padding: 0;
  margin: 20px 0 0 0;
}

#menu li {
  margin: 1px 0 1px 0;
  letter-spacing: 3px;
  text-align: right;
}

#menu a {
  display: block;
  width: 264px;
  height: 21px;
  margin: 0;
  padding: 0px 0px 0 0;
  text-decoration: none;
  color: #777777;
  background
  font-size: 14px;
}

Mielestäni nuo muutama pikseliä eivät haittaa, vaan sivu näyttää silti hyvältä.

Ne voisi saada pois:

CSS

html, body
{
    padding: 0;
    margin: 0;
}

margin ja padding ovat molemmat 0.

Minulla on sellainen tunne, että et laittanut body-elementtiin margin: 0px. Koitin itse, ja hyvin toimii.

Kuten reca sanoi, niin tuo on kyllä noinkin hyvä.

Voitko laittaa koko css-koodin näkyviin?

http://www.lasistudio.fi/lasistudio.css

#menu ul {
	display: block;
	list-style-type: none;
	padding: 0;
	margin: 20px 0 0 0;
}

#menu li {
	display: inline;
}

#menu a {
	margin: 1px 0 1px 0;
	letter-spacing: 3px;
	text-align: right;
	display: block;
	width: 264px;
	height: 21px;
	padding: 0px 0px 0 0;
	text-decoration: none;
	color: #777777;
	background
	font-size: 14px;
}

IE ei ole koskaan tykännyt lohkoelementeistä listaelementin alla, varsinkaan jos jossain välissä on floatti. Tosin nyt en jaksanut testata riittikö tuo pelkkä ullin muuttaminen lohkoelementiksi. Ainakin vanhemmat IE:t tykkää jos li-elementistä tekee inline-elementin.

Nyt toimii. Kiitos paljon!

Höps, huomasinpahan nyt myös että ennen DOCTYPEäsi on tyhjä rivi. Poista se, niin IE ei käytä ikivanhaa ysärimoodia sivun renderöintiin. Tämä selittää sen, miksi myös IE8 toimi vanhanmallisella tavalla.

Merri kirjoitti:

Höps, huomasinpahan nyt myös että ennen DOCTYPEäsi on tyhjä rivi.

Voitko jossain osoittaa tämän todeksi? Itse kun en saa testisivujani muuttumaan millään \r\n\t-yhdistelmällä, vaikka esim. kommentin tai XML-prologin lisääminen kyllä vaikuttaa selvästi.

Ah jaahas, Firefoxin lähdekoodinäkymä valehtelee vain :)

Muoks!
Tai sitten ei, ainakin siellä nyt näyttäisi olevan tyhjä rivinvaihto, aiemmin lataamassani versiossa ei ollut. Eroa tosin tuskin tulee nyt kun sivu on kuitenkin (kai) väännetty siten, että se näyttää samalta riippumatta renderöintitavasta.

Muoks #2!
Ai joo ja tuolla CSS:ssä on virhe, joka kopioitui myös omaan versiooni: tyhjä background-rivi.