Fout in Html ontwerp

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jaimy A

Jaimy A

10/08/2014 10:50:12
Quote Anchor link
hey allemaal;

heb zojuist een fout ontdekt dat zich voordoet in IE en mobile browser maar niet in mijn standaard browers firefox.

Afbeelding

Iemand een ideetje hoe ik dit ook kan voorkomen in IE en mobile brower ?
 
PHP hulp

PHP hulp

19/12/2024 13:53:35
 
Erwin H

Erwin H

10/08/2014 10:55:39
Quote Anchor link
Zonder code (html en css) uiteraard niet.
 
Jaimy A

Jaimy A

10/08/2014 11:20:37
Quote Anchor link
CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
.columnsholder .tabsholder {
float: left;
width:530px;
height:250px;
padding: 10px;
}
#tabs-ot .ui-tabs-panel .jcarousel-prev, #tabs-ot .ui-tabs-panel .prev {
float: left;
width: 5px;
background: url('../images/openingsuren/schaduwlinks.jpg') no-repeat scroll 100% 0px transparent;
height: 50px;
padding: 180px 0px 0px;
margin-right: 10px;
}
#tabs-ot .ui-tabs-panel .jcarousel-next, #tabs-ot .ui-tabs-panel .next {
float: right;
width: 5px;
background: url('../images/openingsuren/schaduwrecht.jpg') no-repeat scroll 0% 0% transparent;
height: 50px;
padding: 180px 0px 0px;
}
#tabs-ot .ui-tabs-panel .galleryarea {
    left: 8px;
    position: absolute;
    width: 520px;
    overflow: hidden;
    top: -15px;
}
#tabs-ot .ui-tabs-panel .galleryarea .jcarousel-clip { position: relative; overflow: hidden; }
#tabs-ot .ui-tabs-panel .galleryarea ul { margin: 0px; padding: 0px; list-style: none outside none; width: 99999px; overflow: hidden; position: relative; }
#tabs-ot .ui-tabs-panel .galleryarea ul li { width: 530px; padding: 0px 10px; float: left; }
#tabs-ot .ui-tabs-panel .titleline, .tabcontent .titleline { height: 1%; padding: 0px 0px 26px 6px; overflow: hidden; margin-bottom:  30px; background: url('../images/openingsuren/lijn.gif') repeat-x scroll 0px 100% transparent; }
#tabs-ot .ui-tabs-panel .titleline strong, .tabcontent .titleline strong { display: block; font-size: 1.1em; float: left; line-height: 20px; font-weight: 400; }
#tabs-ot .ui-tabs-panel .galleryarea .row { width: 488px; padding: 9px 12px; margin: 0px -10px; line-height: 14px; overflow: hidden; font-size: 1.2em; }
#tabs-ot .ui-tabs-panel .galleryarea .active {  font-weight: 700; font-size: 1.4em; border: 2px solid; color: #71FF00; padding: 17px 11px; }
#tabs-ot .ui-tabs-panel .galleryarea .closed {  font-weight: 700; font-size: 1.4em; border: 2px solid; color:#FF0004; padding: 17px 11px; }
#tabs-ot .ui-tabs-panel .galleryarea .col1 { color: rgba(0,0,0,1.00); font-size: 12px; float: left; width: 80px; }
#tabs-ot .ui-tabs-panel .galleryarea .col2 { color: rgba(0,0,0,1.00); font-size: 12px; float: left; width: 80px; }
#tabs-ot .ui-tabs-panel .galleryarea .col3 { color: rgba(0,0,0,1.00); font-size: 12px; float: left; width: 262px; }
#tabs-ot .ui-tabs-panel .galleryarea .col4 { color: rgba(0,0,0,1.00); font-size: 12px; float: left; width: 50px; }
#tabs-ot .ui-tabs-panel .galleryarea .type2 { color: rgb(153, 153, 153); font-size: 12px; font-weight: 400;  display: inline; }
#tabs-ot .ui-tabs-panel .scale {
width: 250px; height: 9px;
margin-top: 2px;
background: url('../images/openingsuren/tijdlijn.gif') no-repeat scroll 0% 0% transparent; overflow: hidden; }
#tabs-ot .ui-tabs-panel .scalefeest {
width: 250px; height: 9px;
margin-top: 2px;
background: url('../images/openingsuren/tijdlijnfeestdag.gif') no-repeat scroll 0% 0% transparent; overflow: hidden; }
#tabs-ot .ui-tabs-panel .scale .nietgesloten {
float: left; height: 9px;
padding-right: 4px; display: inline;
background: url('../images/openingsuren/tijdlijnrechts.gif') no-repeat scroll 100% 0px transparent; }
#tabs-ot .ui-tabs-panel .scale .nietgesloten .l {
height: 9px;
background: url('../images/openingsuren/tijdlijnleft.gif') no-repeat scroll 0% 0% transparent; }
#tabs-ot .ui-tabs-panel .scale .gesloten {
float: left; height: 9px;
padding-right: 4px; display: inline;
background: url('../images/openingsuren/tijdlijnrechtsG.gif') no-repeat scroll 100% 0px transparent; }
#tabs-ot .ui-tabs-panel .scale .gesloten .l {
height: 9px;
background: url('../images/openingsuren/tijdlijnleftG.gif') no-repeat scroll 0% 0% transparent; }


HTML:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<div class="columnsholder">
<h3>Openingsuren <a href="sluitingsdagen.php">  (Bekijk onze uitzonderlijke sluitingsdagen)</a></h3>
<br />
<span id="tabs-ot" class="tabsholder ui-tabs ui-widget ui-widget-content ui-corner-all">
<span style="display: block;" class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="Zwaluw">                        
<span style="position: relative; display: block;" class="gallery gall-tab jcarousel-container jcarousel-container-horizontal" id="carousel-535fd1e3d4ccc"><span style="visibility: visible;" class="galleryarea"><span style="position: relative;" class="jcarousel-clip jcarousel-clip-horizontal"><ul style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: -14300px; width: 28700px;" class="jcarousel-list jcarousel-list-horizontal"><li jcarouselindex="0" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-0 jcarousel-item-0-horizontal"><br></br></li><li jcarouselindex="1" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal"><br></br></li><li jcarouselindex="2" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal"><br></br></li><li jcarouselindex="3" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal"><br></br></li><li jcarouselindex="4" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal"><br></br></li><li jcarouselindex="5" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-5 jcarousel-item-5-horizontal"><br></br></li><li jcarouselindex="6" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal"><br></br></li><li jcarouselindex="7" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-7 jcarousel-item-7-horizontal"><br></br></li><li jcarouselindex="8" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-8 jcarousel-item-8-horizontal"><br></br></li><li jcarouselindex="9" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-9 jcarousel-item-9-horizontal"><br></br></li><li jcarouselindex="10" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-10 jcarousel-item-10-horizontal"><br></br></li><li jcarouselindex="11" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-11 jcarousel-item-11-horizontal"><br></br></li><li jcarouselindex="12" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-12 jcarousel-item-12-horizontal"><br></br></li><li jcarouselindex="13" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-13 jcarousel-item-13-horizontal"><br></br></li><li jcarouselindex="14" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-14 jcarousel-item-14-horizontal"><br></br></li><li jcarouselindex="15" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-15 jcarousel-item-15-horizontal"><br></br></li><li jcarouselindex="16" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-16 jcarousel-item-16-horizontal"><br></br></li><li jcarouselindex="17" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-17 jcarousel-item-17-horizontal"><br></br></li><li jcarouselindex="18" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-18 jcarousel-item-18-horizontal"><br></br></li><li jcarouselindex="19" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-19 jcarousel-item-19-horizontal"><br></br></li><li jcarouselindex="20" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-20 jcarousel-item-20-horizontal"><br></br></li><li jcarouselindex="21" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-21 jcarousel-item-21-horizontal"><br></br></li><li jcarouselindex="22" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-22 jcarousel-item-22-horizontal"><br></br></li><li jcarouselindex="23" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-23 jcarousel-item-23-horizontal"><br></br></li><li jcarouselindex="24" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-24 jcarousel-item-24-horizontal"><br></br></li><li jcarouselindex="25" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-25 jcarousel-item-25-horizontal"><br></br></li><li jcarouselindex="26" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-26 jcarousel-item-26-horizontal">    

<? if($IsF == 1 && $DvW == 1){?>
<div class="row"><div class="col1"><? echo $DaT; ?></div><div class="col2">09:00-12:00</div>
<div class="col3"><div class="scalefeest"></div>
</div><div class="col4">13:00-18:00</div></div>
<? } else { ?>                
<div class="row <? echo $OS1 ?>"><div class="col1">Maandag</div><div class="col2">09:00-12:00</div>
<div class="col3"><div class="scale">
<div class="<? echo $open1.'gesloten'; ?>"  style="margin-left: 17px; width: 58px; position: absolute;">
<div class="l"></div></div>
<div class="<? echo $open1.'gesloten'; ?>"  style="margin-left: 94px; width: 136px; position: absolute;">
<div class="l"></div></div></div>
</div><div class="col4">13:00-18:00</div></div>
<? }

if($IsF == 1 && $DvW == 2){?>
<div class="row"><div class="col1"><? echo $DaT; ?></div><div class="col2">09:00-12:00</div>
<div class="col3"><div class="scalefeest"></div>
</div><div class="col4">13:00-18:00</div></div>
<? } else { ?>        
<div class="row <? echo $OS2 ?>"><div class="col1">Dinsdag</div><div class="col2">09:00-12:00</div>
<div class="col3"><div class="scale">
<div class="<? echo $open2.'gesloten'; ?>"  style="margin-left: 17px; width: 58px; position: absolute;">
<div class="l"></div></div>
<div class="<? echo $open2.'gesloten'; ?>"  style="margin-left: 94px; width: 136px; position: absolute;">
<div class="l"></div></div></div>
</div><div class="col4">13:00-18:00</div></div>
<? }

if($IsF == 1 && $DvW == 3){?>
<div class="row"><div class="col1"><? echo $DaT; ?></div><div class="col2">09:00-12:00</div>
<div class="col3"><div class="scalefeest"></div>
</div><div class="col4">13:00-18:00</div></div>
<? } else { ?>    
<div class="row <? echo $OS3 ?>"><div class="col1">Woensdag</div><div class="col2">09:00-12:00</div>
<div class="col3"><div class="scale">
<div class="<? echo $open3.'gesloten'; ?>"  style="margin-left: 17px; width: 58px; position: absolute;">
<div class="l"></div></div>
<div class="<? echo $open3.'gesloten'; ?>"  style="margin-left: 94px; width: 136px; position: absolute;">
<div class="l"></div></div></div>
</div><div class="col4">13:00-18:00</div></div>
<? }

if($IsF == 1 && $DvW == 4){?>
<div class="row"><div class="col1"><? echo $DaT; ?></div><div class="col2">09:00-12:00</div>
<div class="col3"><div class="scalefeest"></div>
</div><div class="col4">13:00-18:00</div></div>
<? } else { ?>    
<div class="row <? echo $OS4 ?>"><div class="col1">Donderdag</div><div class="col2">09:00-12:00</div>
<div class="col3"><div class="scale">
<div class="<? echo $open4.'gesloten'; ?>"  style="margin-left: 17px; width: 58px; position: absolute;">
<div class="l"></div></div>
<div class="<? echo $open4.'gesloten'; ?>"  style="margin-left: 94px; width: 136px; position: absolute;">
<div class="l"></div></div></div>
</div><div class="col4">13:00-18:00</div></div>
<? }
if($IsF == 1 && $DvW == 5){?>
<div class="row"><div class="col1"><? echo $DaT; ?></div><div class="col2">09:00-12:00</div>
<div class="col3"><div class="scalefeest"></div>
</div><div class="col4">13:00-18:00</div></div>
<? } else { ?>    
<div class="row <? echo $OS5 ?>"><div class="col1">Vrijdag</div><div class="col2">09:00-12:00</div>
<div class="col3"><div class="scale">
<div class="<? echo $open5.'gesloten'; ?>" style="margin-left: 17px; width: 58px; position: absolute;">
<div class="l"></div></div>
<div class="<? echo $open5.'gesloten'; ?>"  style="margin-left: 94px; width: 136px; position: absolute;">
<div class="l"></div></div></div>
</div><div class="col4">13:00-18:00</div></div>
<? }
if($IsF == 1 && $DvW == 6){?>
<div class="row"><div class="col1"><? echo $DaT; ?></div><div class="col2">09:00-12:00</div>
<div class="col3"><div class="scalefeest"></div>
</div><div class="col4">13:00-18:00</div></div>
<? } else { ?>    
<div class="row <? echo $OS6 ?>"><div class="col1">Zaterdag</div><div class="col2">09:00</div>
<div class="col3"><div class="scale">
<div class="<? echo $open6.'gesloten'; ?>"  style="margin-left: 17px; width: 199px; position: absolute;">
<div class="l"></div></div></div>
</div><div class="col4">17:00</div></div>
<? } ?>

<div class="row <? echo $OS7 ?>"><div class="col1">Zondag</div><div class="col2 type2">Gesloten</div>
<div class="col3"><div class="scale"></div>
</div><div class="col4"></div></div>
</li>

</ul></span>
</span>
<span style="display: block;" class="prev jcarousel-prev jcarousel-prev-horizontal"></span>
<span style="display: block;" class="next jcarousel-next jcarousel-next-horizontal"></span>
</span>
</span>
</span>
 
Obelix Idefix

Obelix Idefix

10/08/2014 13:16:03
Quote Anchor link
Je probleem zit, als ik de afbeelding goed begrijp, in de overlap van de adresgegevens en de openingstijden.
Waar staat er in je code hierboven dan geen adresgegevens? Zo is het nog moeilijk voor ons om te achterhalen wat er fout gaat.
Heb je geen live-omgeving waar we kunnen kijken?

Verder zijn er verschillende tools om 'onder water' te testen met opmaak. Firebug voor FF is zo'n voorbeeld. IE heeft dat ongetwijfeld ook.

Zou overigens geen shorttags gebruiken voor php.
 
Jaimy A

Jaimy A

10/08/2014 14:33:30
Quote Anchor link
probleem is opgelost , wat kan / doet een short tage minder dan
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<?php ?
 
Bart V B

Bart V B

10/08/2014 14:37:33
Quote Anchor link
short-tags werkt niet altijd als dit staat uitgeschakeld is in je php.ini.
Daarom is het beter om geen short-tags te gebruiken.
Gewijzigd op 10/08/2014 14:43:22 door Bart V B
 
Obelix Idefix

Obelix Idefix

10/08/2014 14:58:44
Quote Anchor link
Jaimy A op 10/08/2014 14:33:30:
probleem is opgelost

Wat was de oplossing?
 
Jaimy A

Jaimy A

10/08/2014 15:04:51
Quote Anchor link
Wat me opviel in IE en op mijn brower is dat de openingsuren achteraan boven elkaar stonden en dit was niet het geval bij mozila, heb alles een 20tal pixels verkleind en margins een beetje aangepast waardoor de uren nu wel mooi naast elkaar staan en het probleem zich niet meer voordeed.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.