Länk som flyttar på sig..!

11 svar · 617 visningar · startad av learn 8 dec. 2005

learnMedlem sedan jan. 20051 130 inlägg

Frågan8 dec. 2005 11:47#1

Jag har ett VÄLDIGT irreterande problem!

Det är en länk som jag satt skugga på mha att lägga text på text genom position:absolute. Till vänster om länken har jag placerat en liten bild. Ser väldigt snyggt ut, men bara när jag klickat på "uppdatera" på browsern (Firefox). När jag först öppnar sidan så ligger både länken och dess skugga ovanpå bilden, men så fort jag uppdaterar så flyttar sig texten till höger om bilden...??????????

Någon som förstår vad jag menar och kanske stött på det själv? Måste vara en bugg??

Snälla hjälp mig!

learnMedlem sedan jan. 20051 130 inlägg

8 dec. 2005 11:56#2

Upptäckte samma effekt på http://www.tydal.nu/category/. Alla länkarna till vänster hamnar ovanpå varandra, tills jag klickar på uppdatera...

learnMedlem sedan jan. 20051 130 inlägg

8 dec. 2005 19:33#3

Ingen som kan hjälpa mig..? :q

Tydal tycks ju ha samma problem som jag...

Det är likadant från min andra dator (samma webbläsare)... Funkar dock bra i IE.

UlfTMedlem sedan maj 20018 027 inlägg

8 dec. 2005 19:48#4

Jag förstår inte vad du menar. Jag har själv Firefox. Jag tycker Tydals länkar ser ok ut.

m_soderlundMedlem sedan sep. 20026 425 inlägg

8 dec. 2005 19:48#5

Jag förstår inte vad som händer på tydals hemsida? Den fungerar ju utmärkt med alla länkar?

learnMedlem sedan jan. 20051 130 inlägg

8 dec. 2005 19:54#6

Så här ser det ut för mig (se bifogad bild). Liknande problem har jag på min sida... :x

tantenMedlem sedan nov. 20051 596 inlägg

8 dec. 2005 20:01#7

Sådant har oftast att göra med att man inte placerat objektet eller vad det nu är på ett sådant sätt så webläsaren inte behöver tveka när den ska placera den på sidan. Svårt att uttrycka vad jag menar med rätta ord känner jag, så det får bli lite som det blir. Tydals h4 svävar i en jättestor div och vet inte vart den egentligen ska placera sig. Så den dyker ner där den tror den ska vara. När webläsaren sedan har gått igenom all kod, så finns det noterat någonstans i minnet vart den skulle ha varit och placerar sig där när man uppdaterar. Ingen bugg, man har bara varit vag.
När det gäller din bild så är det svårt att säga utan att ha sett koden. Men förmodligen handlar det om samma sak på ett ungefär :-)

learnMedlem sedan jan. 20051 130 inlägg

8 dec. 2005 20:06#8

Ok! Jobbigt problem! Hur kommer det sig att det ser bra ut för andra då?

tantenMedlem sedan nov. 20051 596 inlägg

8 dec. 2005 20:14#9

webläsaren, cachminne... Jag fick samma problem första gången jag gick in på sidan, men inte nu längre.
Problemet behöver inte alls vara jobbigt, kan vara en pyttegrej, ibland kan det räcka med att man flyttar ner det som spökar längst ner i stylesheeten... så webläsaren läser det sist. Lite fuskigt kanske, men prova med det.

learnMedlem sedan jan. 20051 130 inlägg

9 dec. 2005 10:09#10

Har testat allt nu känns det som...

Här kommer koden som strular:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >	

<head>
<title>Test</title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="sv" />

<style type="text/css">

html, body {
font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif;
}
p {
margin-bottom:2px;
}
p img, p span { 
vertical-align:middle; 
}
.skugga{
color:#000;
font-weight:bold;
position:absolute; 
margin:1px 0px 0px 1px; 
}
.meny a:link, .meny a:visited {
text-decoration: none; 
color:#CCC; font-weight:bold;
position:absolute;
}
.meny a:active, .meny a:hover {
text-decoration: none; 
color: #000; font-weight:bold;
position:absolute;
}

</style>

</head>

<body>

<div class="meny">

<p><img src="bild.gif" border="0" />&nbsp;<span class="skugga">Länk 1</span><span><a href="#">Länk 1</a></span></p>

<p><img src="bild.gif" border="0" />&nbsp;<span class="skugga">Länk 2</span><span><a href="#">Länk 2</a></span></p>

<p><img src="bild.gif" border="0" />&nbsp;<span class="skugga">Länk 3</span><span><a href="#">Länk 3</a></span></p>

</div>

</body>
</html>

Bifogar även bilden.

tantenMedlem sedan nov. 20051 596 inlägg

9 dec. 2005 13:34#11

Har du testat med att sätta vidd och höjd på dina bilder, det vill ff ha...:-).
När du kör xhtml får du inte ha border på bilderna.
i stället skriver du
img {
border: none;
padding-right: 2px; (så slipper du ha i koden)
}

learnMedlem sedan jan. 20051 130 inlägg

9 dec. 2005 14:04#12

Tack!! Det var bredden på bilden som saknades, nu funkar det fint. Tack!!