divs verschuiven op Mac (Safari)
ben momenteel bezig met een site die bestaat uit geneste divs. Op de pc ziet het er allemaal prima uit maar op de Mac niet. Ik heb zelf geen mac, maar een vriend van me wel en die gebruikt Safari. Het lijkt erop alsof de divs niet passen in de container en dat daardoor de laatste wordt afgebroken. Iemand eng idee wat er fout kan zijn? Ik gebruik geen marges, paddings en borders in mijn divs.
Dit is de HTML:
<div id="page">
<div id="topbar">
<div id="topbarleft">
</div>
<div id="topbarcenter">
</div>
<div id="topbarright">
</div>
</div>
<div id="center">
<div id="navigation">
test
</div>
<div id="content">
Inhoud
</div>
<div id="rightbar">
Rechtse kolom
</div>
</div>
</div>
En dit de css:
iv#page
{
margin: 0px auto;
width: 778px;
height: 600px;
}
div#topbar
{
margin: 0px auto;
width: 778px;
height: 65px;
}
div#topbarleft
{
float: left;
height: 65px;
width: 197px;
background:#98002E;
border-bottom-style:solid;
border-bottom-width: 4px;
border-bottom-color:#FFFFFF;
}
div#topbarcenter
{
float: left;
height: 65px;
width: 356px;
background:#98002E;
border-left-style:solid;
border-left-width: 4px;
border-left-color:#FFFFFF;
border-right-style:solid;
border-right-width: 4px;
border-right-color:#FFFFFF;
border-bottom-style:solid;
border-bottom-width: 4px;
border-bottom-color:#FFFFFF;
}
div#topbarright
{
float: left;
height: 65px;
width: 225px;
background:#98002E;
border-bottom-style:solid;
border-bottom-width: 4px;
border-bottom-color:#FFFFFF;
}
div#center
{
margin: 0px auto;
width: 778px;
height: 535px;
}
div#navigation
{
float: left;
height: 535px;
width: 260px;
background-image:url(images/nav_background.gif);
background-repeat: repeat-y;
}
div#content
{
text-align: left;
align: left;
float: left;
height: 535px;
width: 293px;
padding-top: 12px;
padding-left: 12px;
padding-right: 12px;
}
div#rightbar
{
float: left;
height: 535px;
width: 225px;
}
Bij voorbaat dank voor de hulp.
Gr,
Robert
PHPerik edit: topic verplaatst naar Webdesign
Gewijzigd op 01/01/1970 01:00:00 door Robert Hamers
http://www.suggestgraphics.nl/TDG
Heb zelf alleen IE, dus kan helaas niet testen met FF.
Robert schreef op 07.07.2007 13:23:
@Blanche: ik wil best met FF testen, maar met IE heb ik geen rare fratsen. Het gaat juist mis op de Mac ivm Safari Browser. Maar goed, ik zal FF eens installeren, misschien zijn die problemen vergelijkbaar met Safari op de mac.
Begin altijd in FF te designen, want die houd zich "goed" aan de W3C regels, heb je hem daarin werkend ga dan de bugs in IE verhelpen ;)
Gewijzigd op 01/01/1970 01:00:00 door Vincent
je kan trouwens ook safari downloaden voor windows op http://www.apple.com/safari
Robert schreef op 09.07.2007 14:53:
Ben er inmiddels achter dat het toch borders zijn die de boel verschuiven. IE houdt er geen rekening mee, maar FF telt de borders op bij de reeds gedefinieerde breedte en dan past het niet meer.
Dat is zoals het hoort. Padding en borders horen volgens de standaard bij de breedte opgeteld te worden. Internet Explorer behandelt het boxmodel fout, maar jij hebt een CSS fout gemaakt die toevallig in je voordeel uitpakt ;-)
Oplossing: als je dingen in een div stopt, doe er dan altijd een extra div in; dus een div in een div. Als je je borders en je padding dan aan die binnenste div meegeeft, heeft dat geen invloed op de breedte van de buitenste div.
Je kunt ook Googlen op "box model hack".
Succes!
Ik begrijp toch niet helemaal wat je bedoelt. Ik heb toch divs in divs. Of bedoel je toch iets anders?
Wat is dan precies de fout in mijn css?
Gr,
Robert