GlitterMedlem sedan juli 2003465 inlägg Hej
Jag har stött på ett problem i FF. Jag har en lista med bilder och text under bilderna. Har lagt upp det i divar som nedan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
<!--
#Content a {margin-right: 32px; height:90px;}
#Content img {margin-bottom: 32px;}
#ContentText {margin-left: 70px; position: absolute; top: 118px; word-spacing: 107px; line-height: 123px;}
-->
</style>
</head>
<body>
<div style="width: 527px;">
<div style="margin-bottom: 50px;">
<b>Referensobjekt</b><br/>Se bilder från utställningar, klicka för större exemplar.
</div>
<div id="Content" style="margin-left: 3px;">
<a href="referensobjekt/11.html"><img src="_gfx/77188_10_7.jpg" height="90" width="90" alt="01"/></a>
<a href="referensobjekt/12.html"><img src="_gfx/77188_10_8.jpg" height="90" width="90" alt="02"/></a>
<a href="referensobjekt/13.html"><img src="_gfx/77188_10_9.jpg" height="90" width="90" alt="03"/></a>
<a href="referensobjekt/14.html"><img src="_gfx/77188_10_10.jpg" height="90" width="90" alt="04"/></a>
<a href="referensobjekt/15.html"><img src="_gfx/77188_10_11.jpg" height="90" width="90" alt="05"/></a>
<a href="referensobjekt/16.html"><img src="_gfx/77188_10_12.jpg" height="90" width="90" alt="06"/></a>
<a href="referensobjekt/17.html"><img src="_gfx/77188_10_13.jpg" height="90" width="90" alt="07"/></a>
<a href="referensobjekt/18.html"><img src="_gfx/77188_10_14.jpg" height="90" width="90" alt="08"/></a>
</div>
<div id="ContentText">
01
02
03
04<br/>
05
06
07
08
</div>
</div>
</body>
</html>
Problemet är att länkarna inte sträcker sig över hela bilden i FF och jag fattar inte varför. Alltså jag kan inte klicka vart jag vill på bilderna i FF men i opera och i IE så funkar det perfekt.
Kollar man i firebug så ligger länkarna under bilden men det stämmer inte överens med firefox för där är det lite olika vart man kan klicka.
Jag var tvungen att sätta "margin-bottom" på "img" för det funkade inte på "a" det förstår jag inte heller och det kanske hade löst mitt problem.
Nu kanske ni undrar varför jag inte har lagt upp det i tabeller. svaret är enkelt. Det är lättare att lägga till/tabort bilder vart som helst utan att behöva lägga för mycket tid på det.
Tacksam för en lösning.
tantenMedlem sedan nov. 20051 596 inlägg Tips lägg bilderna i en lista...
Kopierade en variant som jag har som fungerar. Inte dina värden men någonting i stil med...då ska nog alla dina problem försvinna...
<li><a href="någonting"><img src="bilder/bild.jpg" alt="någonting" /></a></li>
och i css :
#content a{
text-decoration:none;
}
#content a:hover{
text-decoration:none;
}
#Content ul{
width: 527px;
margin-left: 3px;
}
#Content img{
border:none;
width: 90px;
height: 90px;
}
#Content li{
background-color: #FFF;
display:block;
float:left;
list-style-type:none;
margin:0 32px 32px 0;
}
ändrade i css efter dina värden
och då ska
<div id="Content">
<ul>
<li><a href="referensobjekt/11.html"><img src="_gfx/77188_10_7.jpg" alt="beskrivning av bilden"/></a></li>
GlitterMedlem sedan juli 2003465 inlägg Nej tyvärr det hjälpte inte för att lagret med texten lägger sig ovanför länkarna och därför blir det som det blir.
Hur löser man det? har provat z-index men det verkar inte funka.
tantenMedlem sedan nov. 20051 596 inlägg Vart vill du ha texten?
Prova med float:left i stället för absolut position
tantenMedlem sedan nov. 20051 596 inlägg Är det text som ska vara till bilderna?
GlitterMedlem sedan juli 2003465 inlägg Ja det är text som skall vara under varje bild...
ex:
bild 1 bild 2
text1 text 2
bild 3 bild 4
text3 text 4
red/ förtydligande
tantenMedlem sedan nov. 20051 596 inlägg Lägg in texten efter </a><br />Här...</li> och fortsätt att sätta värden i li med lite högre höjd text-align osv.
tantenMedlem sedan nov. 20051 596 inlägg #Content li{
background-color: #FFF;
display:block;
float:left;
list-style-type:none;
margin:0 32px 32px 0;
width: 90px;
height: 110px;
text-align: center;
color: #000;
}
så fungerar det hos mig om det var så du menade
GlitterMedlem sedan juli 2003465 inlägg Jo det kan jag göra men texten skall nästan vara höger justerad och då blir det lite problematiskt för jag kan inte använda mig av padding då det påverkar bilden också. eller så kan man lägga in efter men det ser jag inte som ett alternativ.
Måste gå att göra som jag har gjort eller?
tantenMedlem sedan nov. 20051 596 inlägg text-align:right blir för mycket då?
tantenMedlem sedan nov. 20051 596 inlägg Ja då vet jag inte annat än justera med . Detta med att dra in text från en annan div orsakar oftast en hel del problem så fort användaren ändrar fönsterstorlek, textstorlek och så dina hitta länkproblem, så jag skulle undvika det...
Så skulle jag tycka att det vore enklare om text och bild fanns på samma ställe när man skulle bita ut dem, men, men...
tantenMedlem sedan nov. 20051 596 inlägg Kom på att du har ju möjlighet med att lägga in texten i <p> och justera med t.ex.
#Content p{margin: 0 0 0 20px;} på det jag skrev förut med .
GlitterMedlem sedan juli 2003465 inlägg Jag ger upp föregående ide för den verkar inte funka fastän den borde...
Kör med lista och <p> nu...
Tack för hjälpen!
