Vandaag mijn nieuwe website online gezet en helaas een klein probleem ontdekt, alleen op de iPad

-als je op deze test-pagina kijkt op de ipad, dan zie je rechts van het blauwe logo een verticale grijze strook. Voor het gemak heb ik er ook een foto bijgezet.
>>> www.winterbergbus.nl/test.html

-het rare: als ik de div met het blauwe logo verwijder, dan is alles ok en loopt de witte balk 100% door. Wie oh wie ziet de fout / oplossing?

CSS:

#onder { <<< witte onderlaag
background-color: #FFF;
height: 96px;
width: 100%;
}
#wrapper {
width: 1002px;
margin-right: auto;
margin-left: auto;
}
#kopw { <<< wrapper voor kopwl en kopwl
width: 1002px;
}
#kopwl {
float: left;
width: 854px;
}
#kopwr { <<< de div met het logo
text-align: left;
float: left;
width: 148px;
padding-top: 15px;
height: 125px;
}


HTML:

<div id="onder">
<div id="wrapper">
<div id="kopw">
<div id="kopwl">
<div id="language">
<ul>
<li><img src="bus_reis_winterberg_images/nl_vakantie_winterberg_sauerland.png" width="18" height="12" /></li>
<li><img src="bus_reis_winterberg_images/en_ski_snowboard_snow_trip_company_day_out_winterb erg_sauerland_germany_by_bus.png" width="18" height="12" border="0" /></li>
</ul>
</div>
<div id="menu">
<ul>
<li></li>
</ul>
</div>
</div>
<div id="kopwr"><a href="index.html"><img src="bus_reis_winterberg_images/busreis_busreizen_winterberg_sauerland_duitsland.p ng" width="125" height="125" border="0" /></a></div>
</div>
</div>
</div>

viewport probleem.. probeer het eens met min-width: 980px

Als ik de tekst selecteer zie een vakje naast het logo


Ik denk dat het komt omdat je de DIV om het logo een breedte meegeeft die breeder is dan het logo.

#kopwr heeft een width van 148px.

Als je die weghaalt is denk ik het probleem opgelost

Opgelost! @ J de Jong, dit werkt inderdaad, heb de onderlaag een min waarde van 1002px meegegeven. Thanks!