Nu har jeg endelig fået de farveskiftende link-knapper til at
virke. Men kun i Netscape v7.11.
De skifter godt nok osse farve i Opera 7.21 og i Internet
Exploder v6.??, helt som tilsigtet. Men det ser *grimt* ud i
disse to programmer, og jeg kan simpelthen ikke forstår hvorfor.
Jeg bruger metoden foreslået af Erik Ginnerskov, hvor jeg har en
transparent grafik inde i cellen, som altså er indlejret i min
HTML-kode. Så har brugeren altid noget han eller hun kan klikke
på. Oven på den grafik indsætter jeg så noget via CSS, nemlig en
anden grafik, med én farve hvis brugerens computer kender
linket, og en anden farve hvis brugeren ikke kender linket
(henholdsvis grønlig turkis og ren grøn).
Jeg har nu fusket mig frem, med indstillingerne i CSS, sådan at
at disse to grafikker overlapper 100% i Netscape. Men i Opera og
i Internet Exploder er de to grafikker forskudt i forhold til
hinanden, med hvad der ligner 2 pixels, både nedad og til højre.
Det kan jeg se, fordi jeg selvfølgelig bruger nogle
testgrafikker, der har tydelige røde "sigtelinier", så jeg kan
se om tingene matcher.
Her ses den GIF jeg bruger som baggrund. Det er altså den som
min HTML refererer til:
<
http://www.sagatafl.org/png/trp_30x40-2.gif >. Den er
transparent, bortset fra de fire røde "klammer" i hjørnerne.
(Grunden til at jeg bruger en GIF istedet for en PNG er at jeg
ikke kunne hitte ud af at lave en transparent PNG i Ultimate
Paint. Det burde ikke have nogen betydning).
Her ses den PNG som jeg bruger som knap (der er kun den ene PNG,
og denne her skal ikke skifte farve, for det er kun en test-PNG)
<
http://www.sagatafl.org/png/riba2.png >. Denne PNG har fire
røde streger øverst, nederst, til venstre og til højre, som skal
bruges til at se om de to ikoner sidder hvor de skal. Det er kun
min CSS som refererer til denne ikon, min HTML gør ikke.
Begge ikoner har samme størrelse, 30 pixels i bredden og 40
pixels i højden. De røde sigtelinier skal tilsammen danne en
firkant for at "bevise" at overlappet er perfekt.
Her ses den testside som jeg p.t. arbejder med
<
http://www.sagatafl.org/ql8.htm >. Læg mærke til hvordan de
røde streger ikke matcher op i hverken IE eller Opera (jeg hører
gerne om FireFox/Mozilla samt andre browsere også) i min
test-celle som er den nederst til højre i den første tabel.
Hvorfor gør de ikke det?
Min HTML ser således ud:
> <table border="1" cellpadding="12" cellspacing="12" width="100%">
> <tr>
> <td align="right"><a href="" class="BlL"><img src="png/trp_30x40-2.gif" width="30" height="40" border="0" align="middle" alt="Blank">
> </td">
> <td>Blank Url
> </td>
> <tr>
> </table>
[dog har jeg forkortet de tre andre celler væk - de er ikke
relevante]
Min CSS ser således ud, igen har jeg forkortet det irrelevante væk:
> body{background-color:#EFEFEF;
> color:#000000;}
> a.BlL:link {
> background-image: url(../png/riba2.png);
> background-repeat: no-repeat;
> background-position: center;
> padding-bottom: 15px;
> padding-top: 9px;
> }
> a.BlL:visited {
> background-image: url(../png/riba2.png);
> background-repeat: no-repeat;
> background-position: center;
> padding-bottom: 15px;
> padding-top: 9px;
> }
Jeg har måttet justere på padding-bottom og padding-top indtil
jeg fik de to ikoner til at overlappe i Netscapes browser. Men
det medfører så at de ikke overlapper i Opera og Internet Exploder.
Desuden kommer der en grim sort streg på alle fire ikoner i
Opera v6.21 (de fire ikoner i den øverste tabel). Hvorfor sker det?
Håber der er nogen der kan hjælpe...
--
Peter Knutsen
sagatafl.org