teksten onder header image wordt afwijkend getoond in firefox browser ,andere browsers tonen helem
wat kan het reden zijn dat in firefox het teksten onder header image van mij website
(Welkom bij David's Auto Service, 40 jaar vaak ervaring BMW specialist(25 jaar ervaring) )wordt afwijkend getoond dan bij andere browsers.
is het komt omdat ik gebruik maakt van foundation grid system of van google fonts letter type(merriweather) of er is een andere reden .
hoe ik kan deze probleem oplossen.
U kunt zelf zien in firefox wat ik bedoel precies mij url is :http://webdesignleren.net/
het code in php:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div class="site-image-board">
<div class="expanded row">
<div class="site-image-boardT1 small-4 small column">Welkom bij David's Auto Service</div> </div>
<div class="expanded row">
<div class="site-image-boardT2 small-4 small-push-5 column">40 jaar vaak ervaring</div></div>
<div class="expanded row">
<div class="site-image-boardT3 small-4 small-push-9 column">BMW Specialist(25 jaar ervaring)</div>
</div> </div>
<div class="expanded row">
<div class="site-image-boardT1 small-4 small column">Welkom bij David's Auto Service</div> </div>
<div class="expanded row">
<div class="site-image-boardT2 small-4 small-push-5 column">40 jaar vaak ervaring</div></div>
<div class="expanded row">
<div class="site-image-boardT3 small-4 small-push-9 column">BMW Specialist(25 jaar ervaring)</div>
</div> </div>
het code in css :
Code (php)
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
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
.site-image-board {
border:0.0625em solid #074e68;
background-color:#074e68;
height:3em;
width:100%;
margin-top:-1em;
}
.site-image-boardT1 {
color:#f5f5f5;
margin-top:1.2%;
font-size:1em;
margin-left:-0.7%;
font-weight:500;
}
.site-image-boardT2 {
color:#f5f5f5;
margin-top:-1.45%;
font-size:1em;
margin-right:-1.75em;
font-weight:500;
}
.site-image-boardT3 {
color:#f5f5f5;
margin-top:-1.50%;
font-size:1em;
margin-left:1.85em;
font-weight:500;
}
border:0.0625em solid #074e68;
background-color:#074e68;
height:3em;
width:100%;
margin-top:-1em;
}
.site-image-boardT1 {
color:#f5f5f5;
margin-top:1.2%;
font-size:1em;
margin-left:-0.7%;
font-weight:500;
}
.site-image-boardT2 {
color:#f5f5f5;
margin-top:-1.45%;
font-size:1em;
margin-right:-1.75em;
font-weight:500;
}
.site-image-boardT3 {
color:#f5f5f5;
margin-top:-1.50%;
font-size:1em;
margin-left:1.85em;
font-weight:500;
}
bedankt
johannes
valideert kan niet worden gegarandeerd dat deze correct rendert.
BTW: ik zie in je broncode ~1700 regels code waarvan het gros JavaScript en CSS is. Zou je die niet eens in externe bestanden steken? Dat zou de leesbaarheid behoorlijk helpen. En mogelijk vind je dan eerder fouten die enkel op HTML betrekking hebben.
Indien een pagina niet goed BTW: ik zie in je broncode ~1700 regels code waarvan het gros JavaScript en CSS is. Zou je die niet eens in externe bestanden steken? Dat zou de leesbaarheid behoorlijk helpen. En mogelijk vind je dan eerder fouten die enkel op HTML betrekking hebben.
Gewijzigd op 16/04/2017 00:30:23 door Thomas van den Heuvel
Ik zie dat je gebruik maakt van negatieve top-margins. Dat is een bekend dingetje met Firefox. Het lijkt erop dat FF bij het positioneren van een box de negatieve margin van de parent box niet verwerkt, waardoor de box dus te laag komt te staan.
ik heb bepaalde dingen gecorigeerd in validator,
maar ik heb het probleem als volgende opgelost net als Willem heeft verteld .
eerst ik heb het gridsysteem code gewijzigd in header'php:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div class="site-image-board"> </div>
<div class="site-image-boardT1 small-4 small column">Welkom bij David's Auto Service</div>
<div class="site-image-boardT2 small-4 small-push-6 column">40 jaar vaak ervaring</div>
<div class="site-image-boardT3 small-4 small-push-9 column">BMW Specialist(25 jaar ervaring)</div>
<div class="site-image-boardT1 small-4 small column">Welkom bij David's Auto Service</div>
<div class="site-image-boardT2 small-4 small-push-6 column">40 jaar vaak ervaring</div>
<div class="site-image-boardT3 small-4 small-push-9 column">BMW Specialist(25 jaar ervaring)</div>
en dan het CSS code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.site-image-boardT1 {
color:#f5f5f5;
margin-top:-1.85%;
font-size:1em;
margin-left:-0.7%;
font-weight:400;
}
.site-image-boardT2 {
color:#f5f5f5;
margin-top:-1.85%;
font-size:1em;
margin-right:-1.75em;
font-weight:400;
}
.site-image-boardT3 {
color:#f5f5f5;
margin-top:-1.85%;
font-size:1em;
margin-left:1.85em;
font-weight:400;
}
color:#f5f5f5;
margin-top:-1.85%;
font-size:1em;
margin-left:-0.7%;
font-weight:400;
}
.site-image-boardT2 {
color:#f5f5f5;
margin-top:-1.85%;
font-size:1em;
margin-right:-1.75em;
font-weight:400;
}
.site-image-boardT3 {
color:#f5f5f5;
margin-top:-1.85%;
font-size:1em;
margin-left:1.85em;
font-weight:400;
}
het is opgelost .
Dank U Wel voor het goede advies
Prettige Paasdagen
johannes
Dank U Wel
johannes