Bilde og tekst beveger seg

[Tetto]

Jeg har tre forskjellige div-elementer ved siden av hverandre med litt tekst i. Hvert av elementene har en overskrift som også er en link til en artikkel. Hver overskriftene har også et lite img-element foran seg, som er et lite ikon og som også er endel av linken. Både bildet og overskriften ligger altså inni <a>.

Problemet er at når jeg skroller med musa gjør overskriftene og bilde en liten bevegelse opp eller ned, avhengig av hvilken vei jeg skroller. Konsekvensen av det er blant annet jeg ikke alltid kan se nederste delen av symbolet. Dette skjer derimot ikke om jeg bruker scroll-baren. Det er altså snakk om en veldig liten beveglese opp og ned.

Noen forslag til hvordan jeg kan løse dette?

 

[xdex]

Har du link til siden? Det er mye lettere og hjelpe deg, dersom vi ser koden, og hva som skjer. Gjelder det alle nettlesere? osv.

 

[Tetto]

Det gjelder for Firefox, men ikke IE. Har ikke testet noen andre. Siden er ikkke publisert ennå, men legger ved koden. Ikke bry deg om at jeg ikke har lagt all css i stilarket ennå; jeg er på et tidlig stadium, og gjør det etterhvert.

<div class="intro">
<div class="frontHeader"><a class="frontHeaderAnchor" href="link1"><img style="width:20px;margin-right:10px;border:0;" src="image1.png" />Overskrift1</a></div>
Tekst1
</div>
<div class="intro">
<div class="frontHeader"><a class="frontHeaderAnchor" href="link2"><img style="width:20px;margin-right:10px;border:0;" src="image2.png" />Overskrift2</a></div>
Tekst2
</div>
<div class="intro">
<div class="frontHeader"><a class="frontHeaderAnchor" href="link3"><img style="width:25px;margin-right:10px;border:0;" src="image3.png" />Overskrift3</a></div>
Tekst3
</div>

.frontHeader {
margin-bottom: 5px;
}

.frontHeaderAnchor {
font-weight: bold;
text-decoration: none;
color: #000c7b;
font-family: gulim;
font-size: 15pt;
}

.intro {
width: 27%;
float: left;
margin-right: 6%;
}

 

[selbekk]

Her er en jsFiddle av problemet - så ikke ut som et problem i Chrome.

Det høres desto mer ut som disse elementene har en wrapper rundt seg som du har satt overflow: auto på. Det gir ofte denne scrolle-effekten.

Fiks: sleng en

<div class="clearfix"></div>

inn i html-en under den siste intro-blokken din.

Sleng så inn en clearfix-klasse i css-en din:

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

(skamløst stjålet fra StackOverflow)

 

[Tetto]

Nei, det hjalp ikke, men takk for forsøket. Det stemmer at jeg har en wrapper rundt dette.

Det som derimot hjalp var å sette wrapperens margin-bottom som null og heller legge øke padding-top på footeren. Jeg skjønner ikke hvorfor, da jeg selv var sikker på at det hadde noe med bildene eller de tre boksene å gjøre, men det virker i alle fall nå.