Fout in Html ontwerp

Zonder code (html en css) uiteraard niet.

CSS:

.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:

<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>

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.

probleem is opgelost , wat kan / doet een short tage minder dan <?php ?

short-tags werkt niet altijd als dit staat uitgeschakeld is in je php.ini.
Daarom is het beter om geen short-tags te gebruiken.

Jaimy A op 10/08/2014 14:33:30

probleem is opgelost

Wat was de oplossing?

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.