Avatar billede tolderberg Nybegynder
28. august 2007 - 18:01 Der er 6 kommentarer og
1 løsning

Den klassiske IE6/FF/IE7 konflikt!

Hejsa

Jeg er skaldet, så der er ikke noget hår at rive i. Men nu har jeg siddet og ledt efter CSS Hacks til IE6 for at få denne side til at virke:
http://knudsen.2lderlund.dk/da/da_gallery.php

Problemet er at mine thumbs skal stå fire i hver række. Jeg har lavet to div's. En til img + en til description.
Begge er angivet i stylesheetet:
http://knudsen.2lderlund.dk/css/knudsen.css

Det er noget med left-margin der er galt. Men jeg synes kun jeg kan finde hacks der virker med width. Problemet er at billederne bliver angivet en en  fast bredde, så jeg kan ikke ændre på bredden.

Hvad gør jeg?!!!

pft,

/TB
Avatar billede tolderberg Nybegynder
28. august 2007 - 18:02 #1
Undskyld. Det er kun #imagecontainer der bruges i galleriet.
Men alligevel....
Avatar billede w13 Novice
28. august 2007 - 18:51 #2
Skyldes det ikke blot, at billederne er for brede? Hvad med evt. at gøre dem lidt mindre? Eller lægge dem og deres div'er i én omkringliggende div med en stor nok bredde til at "skubbe" resten af designet ud til en ordentlig størrelse.
Avatar billede tolderberg Nybegynder
28. august 2007 - 21:36 #3
w13

Det kan man godt sige. Så skal man måske aligne billederne inde i div'en i stedet
Og så arbejde med den mindre div
Hmm
Var bare så fast besluttet på at billederne skulle ligge med en fast margin mellem sig i stil med resten af layoutet.

Findes der ikke en måde at styre margin på der løser problemet med IE6?

/TB
Avatar billede olebole Juniormester
28. august 2007 - 23:17 #4
<ole>

Det holder jo slet ikke, at du har fire elementer med id="thumbcontainer". En ID _skal_ være unik i dokumentet. Brug en klasse i stedet.
Der er også en del CSS-fejl:

#thumbcontainer.teaser {
   
    float:left;
    width: 137;  <-- ingen enhed
    height: 103;  <-- ingen enhed
    margin-left: 4px;
    margin-top: 4px;
    margin-bottom:12px;
}

Denne har du to steder:
text-align:left bottom;

#gallery {
    padding-right:155px;
    background-color:#ebebeb;
    padding-bottom:  <-- skaber rod herfra i reglen
    line-height: 18px;
    position:relative;
}

Det, der giver dig problemer, er dog nok IE's dobbelt-margin-bug. Prøv at bruge span i stedet for dine div med id="thumbcontainer".

Hvorfor i øvrigt et div - med et link - med et billede? Hvorfor ikke bare links med billeder? Så slipper du også for den omtalte bug  :)

/mvh
</bole>
Avatar billede stenger Nybegynder
29. august 2007 - 15:39 #5
I øvrigt er det også en bedre idé at bruge padding, frem for margin, når man har muligheden. Det virker som om der er lidt mere overensstemmelse mellem de forskellige browsere, når man bruger padding.

/Stenger
Avatar billede tolderberg Nybegynder
29. august 2007 - 16:22 #6
Hej Ole,

Jeg har prøvet med spans i stedet, og det virker. Så ved jeg det til en anden gang.
Tak for svaret:-)
Det med Thumbcontaineren og det unikke id er jeg godt klar over ikke er smart. Men også denne finesse undgås ved brug af spans.

/TB
Avatar billede tolderberg Nybegynder
29. august 2007 - 16:23 #7
Ej, øv. Nu kom jeg til at høste point selv. Det var ikke en del af planen...
Der ligger et nyt indlæg til dig olebole...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester