Nybegynner i CSS - En bug i IE!

[Toretore]

Hei

 

Har dem siste uka startet på og lage min første side. Har prøvd og lært meg html koding og CSS. Syntes det går fint, men når jeg skulle plassere menyen min fikk jeg en bug i ie. Den blir plassert for langt ned på siden, den skal være 9px ned fra header, men kommer minst 30 px. Finner ikke feilen! I Opera er den fin.

 

Jeg bruker lister, listene er plasser i diven #meny, meny er wrappa inn i #menywrap (er et bg bilde her) som igjen er wrappa inn i diven #venstre.

Divene #venstre og #hoyre er wrappa inn i #wrap.

 

For å plassere:

 

<div id="menywrap">

<div id="meny">

<ul>

<li><a href="#" class="knapp">Forside</a></li>

</ul>

</div>

</div>

 

...i diven venstre har jeg bare satt padding-top i #venstre. Men i ie blir det langt mer enn 9px. Siden jeg ikke kan så mye håper jeg noen av dere kan se over koden og se om dere finner feilen! Tusen takk på forhåned!

 

LINK

 

Den relevante delen html og css:

 

CSS:

#wrap {
background:         url(gfx/wrap_bg.gif);
width: 755px;
}

#hoyre {
margin: 0 auto;
width: 584px;
float: right;
margin: 0 0 0 0;
padding: 9px 0 0 0;
color: #002354;
clear: right;
}

#venstre {
margin: 0 0 0 1em;
padding-top: 9px;
clear: left;
width: 171px;
}

/* Meny */

#meny {
padding-top: 33px;
padding-bottom: 15px;
}

#meny ul {
text-align: left;
}

#meny ul {
text-align: left;
font-size: 8pt;
list-style-type: none;
}

#meny ul li {
display: inline;
}

#meny a {
width: 171px;
overflow: hidden; 
display: block;
height: 0!important;
padding: 31px 0 0 0;
height /**/: 31px;
}

#meny a:hover {
width: 171px;
overflow: hidden; 
display: block;
height: 0!important;
padding: 31px 0 0 0;
height /**/: 31px;
background-position: 171px 0;
}

a.knapp {background: url(gfx/meny/knapp.gif);}

#menywrap {
background: url(gfx/meny/menybg.gif) no-repeat;
width: 171px;
height: 399px;
}

 

HTML:

<div id="wrap"><!-- Alt innhold -->

<div id="hoyre">
<div class="fishtop"><p class="top">Velkommen til Flage Utleige</p></div>
</div>

<div id="venstre">

<div id="menywrap">
<div id="meny">
<ul>
<li><a href="#" class="knapp">Forside</a></li>
<li><a href="#" class="knapp">Hytter</a></li>
<li><a href="#" class="knapp">Fiske</a></li>
<li><a href="#" class="knapp">Båt</a></li>
<li><a href="#" class="knapp">Bilder</a></li>
<li><a href="#" class="knapp">Gjestebok</a></li>
<li><a href="#" class="knapp">Kontakt</a></li>
<li><a href="#" class="knapp">Voss</a></li>
</ul>
</div>
</div>

</div>

</div>

Endret 14. april 2005 av Toretore

[Mira]

Problemet med nettlesere er at de tolker blandt annet margin og padding forskjellig. Og IE har mistolket hele box-modellen.

Derfor er det altid lurt å legge til

 

* {
margin: 0;
padding: 0;
}

 

I starten av CSS-fila di.

Da starter alle nettleserene med samme utgangspunkt.

Vet ikke om det løser problemet ditt, men det er lurt uansett.

[Toretore]

Den hadde jeg i css fila. Hmms!

[ingveh]

Du har ikke siden liggende ute?

Så mye lettere å hjelpe da

[Toretore]

Er det mulig å glemme link, hehe, LINK

[Equerm]

Fungerer det om du gir ul id="whatever" og setter i css:

 

#whatever {

posotion: relative;

top: -20px;

}

 

?

[Toretore]

Nei det funka heller ikke, uff, er så irriterende og ikke komme lenger pga sånnt tull!

[NisseMannH4X]

Ingen som vet? er først når det kommer innhold i #hoyre at menyen blir plassert feil

[NisseMannH4X]

Fiksa problemet, måtte minske #hoyre litt, selv om den egentlig ikke skulle være for stor, men men, nå virker det iallefall. Er ikke så greit å være nybegynner!