15 svar · 465 visningar · startad av mattiasnordin
Olika i IE6 och Firefox
Jag har tidigare använt mig av nedan för att visa en text över en bild. Men testar nu i firefox och då hamnar texten under bilden. Hur kan man göra så att det blir lika i båda?
<img name="bild1" align=right src="_designen/vanster_menyn/meny_2_selected.gif">
<!-- texten --><font face=tahoma size=2 style="position:relative;left:18px;top:0px;"><b>Löpsedeln</b></font>
Jag hade samma problem med mina relativa divar och löste det men en liten fulhack.
Om min css kod som fungerade i IE såg ut så här:
endiv {
position:relative;
top:-15px;
}
Så fick jag lägga till en rad efter:
html>body endiv {top:0px;}
Då använder FF det värde som deklarerats med "html>body" (0px) medans IE inte läser det och kör på -15px.
Varken snyggt eller smidigt, men det var det enda sätt jag lyckades lösa problemet på.
Fungerar inte position:relative; alls med firefox ???
Verkar finnas buggar inom det området. Koden ovan ligger i en tabell...
Blixtsystems, jag är inte riktigt med. Kan du ge mig ett kodexempel ??? :)
Jodå...position relative funkar med FF.
Både IE och FF läser in stil deklarationen och sätter först elementet till position:relative och top:-15px.
Men eftersom inte IE begriper html>body biten så kan man ändra de redan deklarerade värdena speciellt för FF.
Så för FF ser det tillslut ut som {position:relative; top:0px} och för IE förblir det {position:relative; top:-15px;}
Det verkar som IE tolkar positions värden lite konstigt.
Då jag I själva verket ville ha en position på 0px så var jag tvungen att se till att IE istället fick -15px.
Det hela förefaller märkligt för mig och jag kan ha missat något då jag inte är någon baddare på html och css direkt.
Men den fulhacken fungerade för mig så det är det enda förslag på lösning jag har.
Vad menar du med html>body biten ?
Jag vet inte vad bug 271387 har med ditt exempel att göra, och jag förstår inte riktigt vad du försöker få till...
Ok...jag testade lite med ett enkelt exempel, och det måste vara något konstigt med min kod då IE gav annat positionsvärde så glöm bort vad jag sade tidigare :)
Om jag bara provar att lägga lite text över en bild så ger det samma resultat i IE och FF.
Nu vet jag inte hur ditt upplägg ser ut och hur det kan komma sig attt texten kommer över bilden i IE, men detta var den kod jag använde för att testa, och den ser likadan ut i IE och FF:
<html>
<head>
<style type="text/css">
img {
position:absolute;
z-index:2;
}
.menuText {
position:relative;
color: #000000;
font-family: tahoma;
font-size: 14px;
top: 15px;
left:18px;
font-weight:bold;
z-index:3;
}
</style>
</head>
<body>
<img name="bild1" src="bild.gif" alt="löpsedeln">
<div class="menuText">Löpsedeln</div>
</body>
</html>
Jag ska testa din kod...
Så här ser det som inte fungerar ut...
<table border=0 cellpadding=1 cellspacing=1 width=100% align="right">
<td onClick="funRedirect(1); parent.xxx.location='lopsedeln/lopsedeln_start.asp';" onMouseOver="bilden_in(1);return true" onMouseOut="bilden_out(1);return true" style="cursor:pointer;">
<!-- LÖPSEDELN -->
<img name="bild1" align=right src="_designen/vanster_menyn/meny_2_selected.gif">
<!-- texten --><div style="position:relative;left:18px;top:0px;"><b>Löpsedeln</b></div>
<br>
</td></tr>
Fasen vad drygt det här är... !!!
<img name="bild1" align=right src="_designen/vanster_menyn/meny_2_selected.gif">[b]<br>[/b]
<!-- texten --><font face=verdana size=2 style="position:relative;left:18px;top:-19px;"><b>Löpsedeln</b></font>
Om jag lägger till en <br> (bold ovan) så fungerar det i bägge webläsarna. MEN då får jag en extra radbrytning mellan alla menyer och så kan jag inte ha det. suck...
Hilfe :)
Hmm...
position:relative anger en position som är relativ den koordinat där blocket självt hade hamnat i flödet om det inte varit positionerat alls...
Det är position:absolute som anger en position "relativt omgivande block", dvs omgivande blocks origo...
Att tänka på är också att man bör lägga på ett "position:relative" (!) utan att ange koordinater på det omgivande blocket som en (kokboksmetod för att ta sig förbi en del kända buggar i en större kommersiell webbläsare ;)
Prova alltså följande:
<td>
<div style="position:relative">
<img src="testbild.jpg">
<!-- texten --><span style="position:absolute;left:18px;top:0"><b>Löpsedeln</b></span>
</div>
</td>
(dvs om tabellcellen är bred nog till att börja med ;) )
Läs mer om positionering på http://www.autisticcuckoo.net/arkiv.php?id=2004/12/07/relativt-absolut
(dvs om tabellcellen är bred nog till att börja med )
Det är nog det här som blir problemet. Tabellcellen är inte nog bred för <img src="testbild.jpg">& n b s p ;<span style="position:absolute;left:18px;top:0"><b>Löpsedeln</b></span>
Det verkar som att IE och andra webläsare hanterar mellanslaget (automatisk radbrytning) annorlunda.
REDIGERAT NEDAN:
MIN kod ovan, enligt ditt förslag, fungerar bra i IE men inte i tex firefox.
Antar att det inte är möjligt att fixa detta. Synd bara för att det var ju jätteenkelt att lägga text ovanpå en tom knapp i IE.
Antar att det lättaste sättet är att lägga knappen som bakground i en tabell istället...
Supertack för hjälpen dock :)
Tja - eller direkt i <font> (eftersom du nu redan använder den) så du slipper onödigt tabellbrus :P
mattiasnordin skrev:
Din kod ovan fungerar bra i IE men inte i tex firefox.
Ehm, nu får du ge dig - koden funkar i FF på WinXP om du lägger in den exakt som den är skriven i exemplet i en tabell (med en rad och en cell) som har den bredd du angett i dina förutsättningar (100%)!- jag hade min vana trogen naturligtvis testat koden jag lade upp innan jag öppnade truten, men eftersom du envisas med att inte ge oss alla detaljer över hur din kod egentligen ser ut (i detta fall har jag t.ex. fått anta att du kör i "Quirks mode" eftersom du dels har en massa tabeller, och dels nyligen frågat vad man har en <!DOCTYPE till) så kan det naturligtvis finnas andra faktorer (som t.ex. vilken <!DOCTYPE du använder - och hur koden runt den tabellen du ger som exempel ser ut) som gör att det "inte funkar" i den ena eller andra webbläsaren :bla
Vill du ha mer hjälp får du ge oss en länk till sidan - för det här *är* naturligtvis lösbart bara du inte tvingar oss att famla i blindo och sedan belönar oss genom att klaga på att det vi gissat oss fram till inte funkar och sedan direkt deklarera problemet olösbart... Särskilt som det faktum att det inte funkar för dig med största sannolikhet kommer sig av att vi tvingats göra ett eller annat antagande som sedan visat sig inte hålla pga att du tjuvhållit på någon skitdetalj som du inte tror har med saken att göra :bla
Jag menar inte att din kod inte fungerar som du har skrivit den. Jag menar att MIN kod inte fungerar pga bredden som på tabellen. Precis som du nämner ovan. Det är i alla fall min slutsats. Jag skulle dock bli överlycklig om det fanns något smidigt sätt att lösa det på...
Sidan ligger i en frame som är ca 170 pixlar bred. Denna version är inte den jag har labbat med. Denna fungerar som jag hade tänkt mig fast bara i IE.
<style type="text/css">
.menuText {
position:relative;
color: #000000;
font-family: tahoma;
font-size: 12px;
top: 1px;
left:18px;
font-weight:bold;
z-index:3;
}
</style>
<table height=100% width=100% border=0 cellpadding=0 cellspacing=0><td height=* width=100% align="right" valign=top><!---designtable--->
<img hspace=0 vspace=0 border=0 src="_designen/menysidan_oversta_halva_cirkeln.gif"><br><br>
<table border=0 cellpadding=1 cellspacing=1 width=100% align="right">
<td onClick="funRedirect(1); parent.xxx.location='lopsedeln/lopsedeln_start.asp';" onMouseOver="bilden_in(1);return true" onMouseOut="bilden_out(1);return true" style="cursor:pointer;">
<!-- LÖPSEDELN -->
<div style="position:relative">
<img name="bild1" align=right src="_designen/vanster_menyn/meny_2_selected.gif">
<!-- texten --><span class=menuText>Löpsedeln</span>
</div>
<br>
</td></tr>
<tr><td align="right" onClick="funRedirect(2); parent.xxx.location='nya_personbilar/nya_personbilar_start.asp';" onMouseOver="bilden_in(2);return true" onMouseOut="bilden_out(2);return true" style="cursor:pointer;">
<!-- Personbilar -->
<div style="position:relative">
<img name="bild2" align=right src="_designen/vanster_menyn/meny_0.gif">
<!-- texten --><span class=menuText>Nya Personbilar</span>
</div>
</td></tr>
<tr><td align="right" onClick="funRedirect(3);parent.xxx.location='nya_transportbilar/nya_transportbilar_start.asp';" onMouseOver="bilden_in(3);return true" onMouseOut="bilden_out(3);return true" style="cursor:pointer;">
<!-- Transportbilar -->
<img name="bild3" align=right src="_designen/vanster_menyn/meny_0.gif">
<!-- texten --><span class=menuText>Nya Transportbilar</span>
</td></tr>
<tr><td !align="right" onClick="funRedirect(4);parent.xxx.location='begagnade_bilar/bytbil/begagnade_bilar_bytbil_vasteras.asp';" onMouseOver="bilden_in(4);return true" onMouseOut="bilden_out(4);return true" style="cursor:pointer;">
<!-- Bilar i lager -->
<img name="bild4" align=right src="_designen/vanster_menyn/meny_0.gif">
<span class=menuText>Beg bilar i lager</span>
</td></tr>
<tr><td align="right" onClick="funRedirect(5);parent.xxx.location='verkstaden/verkstaden_vasteras.asp';" onMouseOver="bilden_in(5);return true" onMouseOut="bilden_out(5);return true" style="cursor:pointer;">
<!-- Verkstaden -->
<img name="bild5" align=right src="_designen/vanster_menyn/meny_0.gif">
<span class=menuText>Personbilsverkstaden</span>
</td></tr>
<tr><td align="right" onClick="alert('Kommer snart...');" !onClick="funRedirect(11);parent.xxx.location='verkstaden/verkstaden_vasteras.asp';" onMouseOver="bilden_in(11);return true" onMouseOut="bilden_out(11);return true" style="cursor:pointer;">
<!-- Verkstaden - PLÅT -->
<img name="bild11" align=right src="_designen/vanster_menyn/meny_0.gif">
<span class=menuText>Plåtverkstaden</span>
</td></tr>
<tr><td align="right" onClick="funRedirect(6);parent.xxx.location='verkstad_plat/verkstad_plat_vasteras.asp';" onMouseOver="bilden_in(6);return true" onMouseOut="bilden_out(6);return true" style="cursor:pointer;">
<!-- Shop/reservdelar -->
<img name="bild6" align=right src="_designen/vanster_menyn/meny_0.gif">
<span class=menuText>Butik/Reservdelar</span>
</td></tr>
<tr><td align="right" onClick="funRedirect(7); parent.xxx.location='om_foretaget/om_foretaget_start.asp';" onMouseOver="bilden_in(7);return true" onMouseOut="bilden_out(7);return true" style="cursor:pointer;">
<!-- OM FÖRETAGET -->
<img name="bild7" align=right src="_designen/vanster_menyn/meny_0.gif">
<span class=menuText>Om Företaget</span>
</td></tr>
<tr><td align="right" onClick="funRedirect(8); parent.xxx.location='har_finns_vi/har_finns_vi_vasteras.asp';" onMouseOver="bilden_in(8);return true" onMouseOut="bilden_out(8);return true" style="cursor:pointer;">
<!-- HÄR FINNS VI -->
<img name="bild8" align=right src="_designen/vanster_menyn/meny_0.gif">
<span class=menuText>Här finns vi</span>
</td></tr>
<tr><td align="right" onClick="funRedirect(9); parent.xxx.location='kontakta_oss/kontakta_oss_vasteras.asp';" onMouseOver="bilden_in(9);return true" onMouseOut="bilden_out(9);return true" style="cursor:pointer;">
<!-- KONTAKTA OSS -->
<img name="bild9" align=right src="_designen/vanster_menyn/meny_0.gif">
<span class=menuText>Kontakta oss</span>
</td></tr>
<tr><td align="right" onClick="funRedirect(10);parent.xxx.location='oppettider/oppettider_start.asp';" onMouseOver="bilden_in(10);return true" onMouseOut="bilden_out(10);return true" style="cursor:pointer;">
<!-- ÖPPETTIDER -->
<img name="bild10" align=right src="_designen/vanster_menyn/meny_0.gif">
<span class=menuText>Öppettider</span>
</td></tr>
</td></table>
Okej. :) Nu har ju inte jag dina bilder... Men din kod i en iframe på 170px bredd ser ganska lika ut mellan IE och Fx.
Om du vill lägga text ovanpå en bild är det lättare att använda en bakgrundsbild. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="sv">
<head>
<title>Navigeringsmeny</title>
<style type="text/css">
ul.nav { font-weight:bolder; font-size:80%; list-style-type:none; text-align:right; margin:0; padding:0; line-height:2; }
ul.nav li { background:url("_designen/vanster_menyn/meny_0.gif") no-repeat right; }
ul.nav li.selected { background:url("_designen/vanster_menyn/meny_2_selected.gif") no-repeat right; }
ul.nav li a { color:black; background:transparent; text-decoration:none; }
</style>
</head>
<body>
<ul class="nav">
<li class="selected"><a href="lopsedeln/lopsedeln_start.asp" target="xxx">Löpsedeln</a></li>
<li><a href="nya_personbilar/nya_personbilar_start.asp" target="xxx">Nya Personbilar</a></li>
<li><a href="nya_transportbilar/nya_transportbilar_start.asp" target="xxx">Nya Transportbilar</a></li>
<li><a href="#" target="xxx">Beg bilar i lager</a></li>
<li><a href="#" target="xxx">Personbilsverkstaden</a></li>
<li><a href="#" target="xxx">Plåtverkstaden</a></li>
<li><a href="#" target="xxx">Butik/Reservdelar</a></li>
<li><a href="#" target="xxx">Om Företaget</a></li>
<li><a href="#" target="xxx">Här finns vi</a></li>
<li><a href="#" target="xxx">Kontakta oss</a></li>
<li><a href="#" target="xxx">Öppettider</a></li>
</ul>
</body>
</html>