12 svar · 556 visningar · startad av Fredde Mannen
Håller på med ett fotogalleri som presenterar bilder som ligger i divar som bildar en ram runt dem.
I IE blir det snyggt och fint:
Medans de blir felaktigt i FF:
Använder följande class för ändamålet:
.galleryimage {
background-color: #ededed;
width: 58px; height: 58px;
border: solid 1px #000000;
float: left;
padding-top: 6px;
margin-right: 5px;
marign-left: 5px;
}
Någon som har ett förslag på hur jag skall lösa så de blir i FF som det är i IE?
Hmm..
Kan vara flera olika saker...
* Vad har du för <!DOCTYPE (dvs ser du till att få standards- eller quirks mode)?
* Hur ser egentligen HTML-koden ut - ligger varje bild i en <div> eller? (och vad är i så fall CSS:en för den div:en ?)
* Om du ställer in de värden du vill ha på samtliga marginaler och paddings istället för att lita på defaultvärdden, blir det bättre då?
jarvklo skrev:
* Vad har du för <!DOCTYPE (dvs ser du till att få standards- eller quirks mode)?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
jarvklo skrev:
* Hur ser egentligen HTML-koden ut - ligger varje bild i en <div> eller? (och vad är i så fall CSS:en för den div:en ?)
echo "<div class=\"galleryimage\">
<a href=\"".$thispage."?page=".$_GET['page']."&PictureID=".$rad['id']."&CAT=".$_GET['CAT']."\"><div align=\"center\"><img src=\"".$imagepage."?id=".$rad['id']."\" alt=\"\" name=\"\" width=\"42\" height=\"42\" style=\"border: solid 1px #000000;\"></div></a>
</div>";
Där gallerimage är den som skall bilda ramen.
jarvklo skrev:
* Om du ställer in de värden du vill ha på samtliga marginaler och paddings istället för att lita på defaultvärdden, blir det bättre då?
Tror punkt två och classen svarar på den frågan! :OO
*suck* - Jag frågade inte efter din PHP-kod, utan efter resulterande HTML-kod :moose
Och nej, det framgår inte på något sätt av det du visar upp vilka marginalvärden dina divar eventuellt ärver från omliggande kod eftersom du inte redovisar detta i dina kodsnuttar.. Jag menar - du visar t.ex. inte upp om du sätter ett värde för margin-bottom för <div> generellt någon annanstans i din CSS-kod... Vilket skulle kunna påverka svaret... :bla
Men, men...
* Testa att byta <!DOCTYPE till
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Efter det bör du ha samma beteende i MSIE och FF (eftersom den <!DOCTYPEn ger dig "standards mode" - vilket brukar göra det lättare att skapa samma utseende i MSIE och FF eftersom de med den oftast beter sig likadant - till skillnad mot för vad de hittar på med den du kör med nu)
* Ställ därefter in värden för samtliga marginaler och paddings om det behövs (vilket du alltså inte gör idag när du utelämnar margin-bottom och en del andra ;) )
he he..
det är endast classen som jag anger i mitt första inlägg som berör divarna, de finns inga andra i fråga sig... och php-koden innehåller HTML-koden.. så det så! :bla
Skall testa med ditt förslag..
marginalerna i diven påverkar inte utseendet, dock paddingen.. kanske skulle testa med sätta en class på bilden själv också! :)
Återkommer med frusterande svar om det inte funkar! :D
vad händer om du sätter a-taggen direkt framför bilden istället för runt divven?
annars kan du alltid färga innersta divven och se om det är den som spökar eller om det är bilden som ställer till det! :)
Det är väl inte att rekomendera att lägga ett block-element inom ett inline-element så som du gör när du lägger en div inuti din a.
mv icaaq
icaaq skrev:
Det är väl inte att rekomendera att lägga ett block-element inom ett inline-element så som du gör när du lägger en div inuti din a.
mv icaaq
Woops.. de märkte jag inte! :)
men hur som haver barnen kär.. så funkade de inte något bättre i alla fall! :l Skall se om jarvklos tips löser problemet!
Okei problemet löste sig genom att plocka bort width och height i classen.
Slutresultat
.galleryimage {
background-color: #ededed;
border: solid 1px #222222;
float: left;
padding-top: 6px;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 6px;
margin-right: 5px;
}
padding: 6px; istället, a real space saver.
Det är (i vanlig ordning) Firefox som gör rätt, och IE som gör fel ;)
http://web.archive.org/web/20040202073255/http://devedge.netscape.com/viewsource/2002/img-table/
Använd en strict doctype, och sätt display:block på dina bilder :bire
Om jag får lägga mig i skulle jag kunna påpeka att det där nog går att skriva på ett lite smidigare sätt (nu vet jag ju inte exakt hur det ska fungera men nog borde du kunna ta bort några onödiga divar, det här kanske ger nån idé i alla fall.):
echo "
<a class="galleryimg" href=\"".$thispage."?page=".$_GET['page']."&PictureID=".$rad['id']."&CAT=".$_GET['CAT']."\"><img src=\"".$imagepage."?id=".$rad['id']."\" alt=\"\" name=\"\"></a>
";
[KOD]
css:
/*för .galleryimg som ju kommer att påverka länkar kanske du borde sätta :active-, :visited-, och :hover-egenskaper också. Det kan man faktiskt ha nytta av.
*/
.galleryimg {
display: block;
background-color: #ededed;
border: solid 1px #222222;
float: left;
padding: 6px;
margin-right: 5px;
}
.galleryimg img {
/*om precis alla såna här ska vara lika stora kan man lika gärna sätta det i css-koden*/
width: 42px;
height: 42px;
border: 1px solid black;
margin: 0;
padding: 0;
}
/KOD]
Jag har inte testat det här.
r/ glömde bort den viktiga display: block
r2/ efter att ha läst zcorpans länk funderar jag på om inte .galleryimg img också borde ha display: block. Om det blir problem så kan det vara lösningen.