Toon posts:

[CSS] Vreemde kader rond link in Firefox

Pagina: 1
Acties:

maandag 30 januari 2006 20:15

Acties:

Verwijderd

Topicstarter
Ik heb een kleine xHTML webgallery gemaakt. Nu als je in de 'lijst' over een foto hoovered, moet er een rode kader rond worden getekend.
In IE6 geeft hij dit perfect weer, maar in Firefox doet ie vreemd. Namelijk, de kader heeft de juiste breedte, maar niet de juiste hoogte.
Als ik in de CSS een breedte en hoogte opgeef, wil hij het nog steeds niet doen. Ik heb al verschillende dingen uitgeprobeerd, maar heb nog geen oplossing kunnen vinden.

Je kan een vb van de gallery hier bekijken.

xHTML 1.0 Strict code:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<body class="PFBody">
<div class="Frame_all">
    <!--Interface-->
    <div class="Pictureframe-01"></div>
    <div class="Pictureframe-02"></div>
    <div class="Pictureframe-03"></div>
    <div class="Pictureframe-04"></div>
    <div class="Pictureframe-05"></div>
    <!--Einde Interface-->
    
    <div class="Browser">
        <a class="Photo" href="Webgallery_1.htm" title="">[img]"images/IMG_1_thumb.jpg"[/img]</a><br />
        <br />
        <a class="Photo" href="Webgallery_2.htm" title="">[img]"images/IMG_2_thumb.jpg"[/img]</a><br />
        <br />
        <a class="Photo" href="Webgallery_3.htm" title="">[img]"images/IMG_3_thumb.jpg"[/img]</a><br />
        <br />
        <a class="Photo" href="Webgallery_4.htm" title="">[img]"images/IMG_4_thumb.jpg"[/img]</a><br />
        <br />
        <a class="Photo" href="Webgallery_5.htm" title="">[img]"images/IMG_5_thumb.jpg"[/img]</a><br />
        <br />
        <a class="Photo" href="Webgallery_6.htm" title="">[img]"images/IMG_6_thumb.jpg"[/img]</a><br />
        <br />
        <a class="Photo" href="Webgallery_7.htm" title="">[img]"images/IMG_7_thumb.jpg"[/img]</a><br />
        <br />
        <a class="Photo" href="Webgallery_8.htm" title="">[img]"images/IMG_8_thumb.jpg"[/img]</a>
    </div>
    <div class="Viewer">
        [img]"images/IMG_1.jpg"[/img]
        <br /><br />
        <h2>titeltjeuh</h2>
    </div>
</div>
</body>


CSS code:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

/*Pictureframe en Fotogallerij*/
.PFBody
    {
    left:0px;
    top:0px;
    width:927px;
    height:606px;
    }
    
.Frame_all
    {
    position:absolute;
    left:2px;
    top:1px;
    }
    
.Pictureframe-01
    {
    background-image:url(images/Pictureframe_01.gif);
    position:absolute;
    left:0px;
    top:0px;
    width:925px;
    height:3px;
    z-index:0;
    }

.Pictureframe-02
    {
    background-image:url(images/Pictureframe_02.gif);
    position:absolute;
    left:0px;
    top:3px;
    width:2px;
    height:602px;
    z-index:0;
    }

.Pictureframe-03
    {
    color:#333333;
    background-color:#A09595;
    position:absolute;
    left:2px;
    top:3px;
    width:882px;
    height:577px;
    z-index:0;
    }

.Pictureframe-04
    {
    background-image:url(images/Pictureframe_04.gif);
    position:absolute;
    left:884px;
    top:3px;
    width:41px;
    height:602px;
    z-index:0;
    }

.Pictureframe-05
    {
    background-image:url(images/Pictureframe_05.gif);
    position:absolute;
    left:2px;
    top:580px;
    width:882px;
    height:25px;
    z-index:0;
    }

.Imagefield
    {
    position:absolute;
    left:8px;
    top:9px;
    width:871px;
    height:570px;
    text-align:center;
    z-index:1;
    }

.Browser
    {
    position:absolute;
    left:8px;
    top:9px;
    width:182px;
    height:551px;
    border-style:solid;
    border-width:4px;
    padding:5px;
    vertical-align:middle;
    text-align:center;
    overflow:auto;
    z-index:1;
    }

.Viewer
    {
    position:absolute;
    left:215px;
    top:9px;
    width:648px;
    height:555px;
    border-style:solid;
    border-width:2px;
    padding:5px;
    vertical-align:middle;
    text-align:center;
    z-index:1;
    }

.Image_select
    {
    border-style:solid;
    border-width:3px;
    border-color:#fe9b00;
    }

.Photo:hover
    {
    border-style:solid;
    border-width:3px;
    border-color:#ff0000;
    text-decoration:none;
    }
/*Einde Pictureframe en Fotogallerij*/

[ Voor 35% gewijzigd door Verwijderd op 30-01-2006 20:17 ]

maandag 30 januari 2006 20:19

Acties:
  • UltimateB
  • Registratie: April 2003
  • Niet online

UltimateB

Pomdiedom

Voilgens mij ligt het aan het feit dat IE elementen automatisch hoger maakt als de content niet past. Als je een hoogte aangeeft aan de links zou het wel moeten werken in ff denk ik.

"True skill is when luck becomes a habit"
SWIS

maandag 30 januari 2006 20:28

Acties:

Verwijderd

Topicstarter
UltimateB schreef op maandag 30 januari 2006 @ 20:19:
Voilgens mij ligt het aan het feit dat IE elementen automatisch hoger maakt als de content niet past. Als je een hoogte aangeeft aan de links zou het wel moeten werken in ff denk ik.
code:
1
2
3
4

.Photo
 {
 height:73px;
 }


Zoals ik al eerder aangaf, wil het zo ook niet werken. |:(

maandag 30 januari 2006 21:02

Acties:
  • UltimateB
  • Registratie: April 2003
  • Niet online

UltimateB

Pomdiedom

Hehe, na veel edits even een samenhangend verhaal.

Een goede mogelijkheid is het volgende.

Gebruik voor IE een hover op de link en voor Firefox een hover op het img. Dit kan je gemakkelijk bereiken door gebruik te maken van conditional comments. Hierover is een hoop te vienden op google.

Een andere oplossing waar ik aan dacht was aan de links display:block; mee te geven, dan zitten ze namelijk wel helemaal om de plaatjes heen.

offtopic:
Zo, dit ziet er ten minste uit als een post.

Heb jij trouwens toevallig een broetjes genaamd Tom?

[ Voor 184% gewijzigd door UltimateB op 30-01-2006 21:14 ]

"True skill is when luck becomes a habit"
SWIS

maandag 30 januari 2006 22:00

Acties:

Verwijderd

Topicstarter
Erg bedankt UltimateB!

Het is opgelost door display:block; te gebruiken.....En er zit nog eens een extraatje op zo, hehe :+.
Nu kan ik rustig verder werken :)

offtopic:
Nope, ik heb wel een broer, maar die heet Mikael.
Reageer