DIV+CSS uitlijn fenomeen in MSIE 5.5

[Verwijderd]

Goed,

Dan denk je flash-gordon-himself te zijn met je tweede website (opzetje dan) ooit, draait als een trein...nouja tram...whatever. Tijdens het bouwen netjes getest in laatste versie Opera, Fox en MSIE, en geen problemen. Nu hoor ik via via dat de box in het midden van mijn pagina in MSIE 5.5 (rev?) naar rechtsonder uitlijnt.

Via Google kom ik de meest creepy problemen tegen, maar niets waarin de hele box in zijn geheel naar rechtsonder schiet.

De site staat op: http://www.wbdsgn.nl/home_nl.html

Iemand die me een duwtje in de juiste richting kan geven?

De site moet het straks ook binnen Safari lekker doen op de Mac. Iemand een tip hoe ik (zonder Mac) een browservalidation kan doen hiervoor?

Alvast bedankt,
Bill

[Vinzzz243]

Denk dat je moet gaan zoeken naar het box model probleem.

Er zijn verscheidene websites die screenshots leveren bij het opgeven van een url zoals http://www.browsercam.com/

verder zou ik eens kijken naar mn html als ik jou was, weet niet in hoeverre je die wil optimaliseren, maar dat kan ook wel iets "netter". je gebruikt OVERAL id's. En moet je site ECHT rechtsonder uitgelijnd zijn? Je gebruikt daarvoor harde pixels, dus bij andere resoluties/ groottes werkt dit niet meer.
Krijg trouwens ook scrollbars...

[ Voor 50% gewijzigd door Vinzzz243 op 02-08-2005 13:59 ]

[Verwijderd]

Hey Vinzzz,

Bedankt voor je reply en de tip voor browsercam. Ik zal nog even verder zoeken naar het box-probleem alhoewel ik het verspringen van het midden naar rechtsonder nog niet heb kunnen ontdekken.

Btw, educate me please, wat is wel "netjes" dan itt het gebruik van ID's?

Hoi,
-Bill

[Vinzzz243]

je hele pagina bestaat uit div's. Zoek eens op semantische html. Je zou bv een UL kunnen gebruiken voor je menu. Op zich is het gebruik van alleen id's geen "ramp", er is pas nog een topic over geweest meen ik (classes en id's).

Veel img's kun je in je stylesheet zetten ipv in de html. (is nietszeggend voor de pagina, is puur layout)

En je gebruikt inline stylesheets en stylesheet in je head door elkaar...zet het allemaal netjes bij elkaar

[Verwijderd]

Aha, thanks!

Waarom heeft semantische HTML de voorkeur op DIV's eigenlijk? Of is dat situatie afhankelijk?

-Bill

[nXXt]

Verwijderd schreef op woensdag 03 augustus 2005 @ 08:17:
Aha, thanks!

Waarom heeft semantische HTML de voorkeur op DIV's eigenlijk? Of is dat situatie afhankelijk?

-Bill

NOFI, maar op de site staat "olieën", het is "oliën" omdat de klemtoon op de eerste lettergreep valt.

[Vinzzz243]

Verwijderd schreef op woensdag 03 augustus 2005 @ 08:17:
Aha, thanks!

Waarom heeft semantische HTML de voorkeur op DIV's eigenlijk? Of is dat situatie afhankelijk?

-Bill

Heb je al gezocht naar semantisch? Daar vind je namelijk je antwoord. Suc6!

[Zoefff]

Probeer ook wat te doen met die spacers, dat is echt not done

Met de CSS elemtenten padding en margin kan je een hele hoop, spacer-plaatjes zijn met goed gebruik van CSS echt overbodig

[JJvG]

Als ik zo naar je positionering kijk (alles hard-coded pixels) dan begrijp ik wel waarom het lijkt dat het rechts onder uitgelijnd staat: Maak je browserscherm maar eens (ongeveer) 800 pixels breed en 600 pixels hoog. Tada! Alles rechtsonder.

Tip: Probeer de positionering van de div in het midden relatief te maken t.o.v. de breedte. Waarschijnlijk moet je een containerdiv hebben (100% breed), met daarin twee divs met variabele breedte en 1 met een vaste breedte. Hiervoor kun je het best kijken op http://www.positioniseverything.net/ of hier verder op het forum.

Voor gratis kijken door een bril van Apple Safari raad ik je iCapture aan: http://www.danvine.com/icapture/

[supakeen]

Mag ik het nog erger maken door te zeggen dat ook in Firefox 1.06 op Debian je site rechtsonder uitlijnt?

[Zoefff]

Dat was me nog niet eens opgevallen nee, je positioneert gewoon alles absoluut? Je moet inderdaad een containerdiv maken die je in het midden, en daarin je hele site neerknallen. Een voorbeeldje dat ik ooit gemaakt heb kan je vinden op http://zoefff.gotdns.com/divcenter.htm .

HTML:

<div id="container">
    Blaat
</div>

Cascading Stylesheet:

#container {
    margin-left: -311px;
    margin-top: -211px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 622px;
    height: 422px;
}

Je laat de container dus eerst op 50% van de hoogte en 50% van de breedte van je venster beginnen (top: 50%; left: 50%;) en dan schuif je hem de helft van de hoogte en breedte weer terug, om de container in het midden te krijgen (margin-left: -311px; margin-top: -211px;).

[mullah]

hmm.. met maar een nadeel - je div is niet meer helemaal zichtbaar aan de bovenkant in mijn 800x600 browser met wat extra toolbars (je kunt namelijk niet hoog genoeg scrollen)

[Zoefff]

Daar heb je gelijk in. Als je het browservenster maar klein genoeg maakt, vallen er inderdaad stukken weg omdat de container altijd in het midden zal blijven staan. Er is nog wel een andere oplossing om te voorkomen dat er links stukken wegvallen, maar voor de boven- en onderkant weet ik geen oplossing.

Door de body of je container margin: 0px auto 0px auto; mee te geven, blijft het element altijd in het midden, maar als je het venster smaller maakt, blijft het element links tegen de kant hangen zegmaar, net zoals hier op GoT (als je de gecentreerde layout gebruikt). Om je element ook nog vertikaal in het midden te krijgen, moet je het trucje in mijn vorige post gebruiken.

[Verwijderd]

Wow, wat een reacties en tips. Thanks allemaal!

Ik ga geljik even puzzelen.

-Bill

*note to self: spacers is not done,.. spacers is not done*

[Verwijderd]

Pfffff,

Ik zie door de bomen het bos even niet meer. Ik heb een lege container DIV (#content) gemaakt die resized als je je browser van grootte verandert. Maar als ik mijn mijn losse verzameling DIV's (die voorheen samen via absolute pixels de box vormde) daarin zet, dan verschuift alles onder elkaar en heb ik de grootste moeite om alles te krijgen zoals het stond. Ik heb met absolutes, relatives en inherit gespeeld, maar ik krijg het niet voor elkaar. Iemand enig idee?

-Bill


CSS stylesheet:

BODY {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN-TOP: 150px; COLOR: #ccc; PADDING-TOP: 0px; FONT-FAMILY: verdana, arial, helvetica, sans-serif; BACKGROUND-COLOR: #fff; TEXT-ALIGN: center
}

#content {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 10px; BACKGROUND: #fff; PADDING-BOTTOM: 10px; MARGIN: 20px auto; BORDER-LEFT: #000 1px solid; WIDTH: 760px; HEIGHT: 420px ; PADDING-TOP: 10px; BORDER-BOTTOM: #000 1px solid; TEXT-ALIGN: left; voice-family: inherit
}

CSS in file (uiteindelijk verhuis ik dat naar stylesheet):

#body {
position:absolute;
left:249px;
top:218px;
width:760px;
height:420px;
}

#main {
position:absolute;
left:0px;
top:0px;
width:760px;
height:153px;
}

#navspacer {
position:absolute;
left:0px;
top:153px;
width:134px;
height:24px;
}

#home {
position:absolute;
left:134px;
top:153px;
width:57px;
height:30px;
}

HTML:

<div id="content">

<div id="body">
<div id="main">[img]"../images/main_yellow.gif"[/img]</div>
<div id="navspacer">[img]"../images/navspacer.gif"[/img] </div>
<div id="home"><a href="home_nl.html" target="_top" onClick="MM_nbGroup('down','group1','home','../images/home_pos.gif',1)" onMouseOver="MM_nbGroup('over','home','../images/home_pos.gif','',1)" onMouseOut="MM_nbGroup('out')">[img]"../images/home_pos.gif"[/img]</a> </div>
<div id="olijfolie"><a href="productlist_olie.html" target="_top" onClick="MM_nbGroup('down','group1','olijfolie','../images/olijfolie_pos.gif',1)" onMouseOver="MM_nbGroup('over','olijfolie','../images/olijfolie_pos.gif','',1)" onMouseOut="MM_nbGroup('out')">[img]"../images/olijfolie.gif"[/img]</a>
</div>
<div id="azijn"><a href="productlist_azijn.html" target="_top" onClick="MM_nbGroup('down','group1','azijn','../images/azijn_pos.gif',1)" onMouseOver="MM_nbGroup('over','azijn','../images/azijn_pos.gif','',1)" onMouseOut="MM_nbGroup('out')">[img]"../images/azijn.gif"[/img]</a>
</div>
<div id="vleeswaren"><a href="productlist_vlees.html" target="_top" onClick="MM_nbGroup('down','group1','vleeswaren','../images/vleeswaren_pos.gif',1)" onMouseOver="MM_nbGroup('over','vleeswaren','../images/vleeswaren_pos.gif','',1)" onMouseOut="MM_nbGroup('out')">[img]"../images/vleeswaren.gif"[/img]</a>
</div>
<div id="recepten"><a href="recepten.html" target="_top" onClick="MM_nbGroup('down','group1','recepten','../images/recepten_pos.gif',1)" onMouseOver="MM_nbGroup('over','recepten','../images/recepten_pos.gif','',1)" onMouseOut="MM_nbGroup('out')">[img]"../images/recepten.gif"[/img]</a>
</div>
<div id="bestellen"><a href="bestellen.html" target="_top" onClick="MM_nbGroup('down','group1','bestellen','../images/bestellen_pos.gif',1)" onMouseOver="MM_nbGroup('over','bestellen','../images/bestellen_pos.gif','',1)" onMouseOut="MM_nbGroup('out')">[img]"../images/bestellen.gif"[/img]</a>
</div>
<div id="navspacer009">[img]"../images/navspacer-09.gif"[/img] </div>
<div id="vorigespace">[img]"../images/vorigespace.gif"[/img] </div>
<div id="volgendespacer">[img]"../images/volgendespacer.gif"[/img]
</div>
<div id="vorigespace012">[img]"../images/vorigespace-12.gif"[/img]
</div>
<div id="volgende"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('volgende','','../images/volgende-16_omo.gif',1)">[img]"../images/volgende-16.gif"[/img]</a>
</div>
[img]"../images/volgende-16.gif"[/img]
<div id="vorige"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('vorige','','../images/vorige_omo.gif',1)">[img]"../images/vorige.gif"[/img]</a>
</div>
<div id="dot">[img]"../images/dot.gif"[/img]
</div>
<div id="volgendespacer013">
[img]"../images/volgendespacer-13.gif"[/img]
</div>
<div id="bodyfillerleft">
[img]"../images/bodyfillerleft.gif"[/img]
</div>
<div id="bodyfillerright">
[img]"../images/bodyfillerright.gif"[/img]
</div>
<div id="bottom">
[img]"../images/bottom.gif"[/img]
</div>
</div>

[Zoefff]

Je denkt imho nog veel te veel in blokjes en op de oude tabel-design manier. Het absoluut positioneren is helemaal niet nodig, je gebruikt het alleen om de boel echt in het midden te krijgen, de rest kan je allemaal relatief positioneren.

Zie het voorbeeldje wat ik even snel gemaakt heb op http://zoefff.gotdns.com/got/que_lio.htm

HTML:

<div id='container'>
    <h1 id='header'>
        Qu&eacute; Lio
    </h1>
    <ul id='menu'>
        <li>Home</li>
        <li>Olijfolie</li>
        <li>Azijn</li>
        <li>Vleeswaren</li>
        <li>Recepten</li>
        <li>Bestellen</li>
    </ul>
    <div id='column_left'>
        <!-- plaatje -->
    </div>
    <div id='content'>
        <h2>Welkom</h2>
        <p>Lorem Ipsum bladiebla bla.</p>
    </div>  
    <h5 id='footer'>
        Copyright
    </h5>
</div>

Cascading Stylesheet:

body {
    margin:0px auto 0px auto;
    width:760px;
}
#container {
    width:760px;
    height:400px;
    margin-top:-200px;
    position:absolute;
    top:50%;
    border:2px solid black;
}
#header {
    margin:0px;
    height:100px;
    background-color:#99CC33;
}
#menu {
    height:25px;
    margin:0px;
    padding:5px 0px 0px 0px;
    background-color:#00FFFF;
}
#menu li {
    list-style-type:none;
    float:left;
    padding:0px 10px 0px 10px;
}
#column_left {
    width:200px;
    height:250px;
    float:left;
    background-color:#FFFF99;
}
#content {
    height:250px;
    margin-left:200px;
    background-color:#FF9933;
}
#content h2 {
    margin-top:0px;
}
#footer {
    height:18px;
    margin:0px;
    text-align:center;
    padding:2px 0px 0px 0px;
    background-color:#339999;
}

Dat is toch veel overzichtelijker? En het werkt als een tiet. De plaatjes in de header en column_left zou ik dan met een background-image in de CSS doen, evenals de menu-item-plaatjes. Met een a:hover kan je ze vervolgens verwisselen als je er met je muis overheen gaat, zonder extra javascript dus.

Hopenlijk kan, en wil, je hier mee aan de slag

[crisp]

Zelfs voor het horizontaal centreren heb je geen absolute positioning nodig:

Cascading Stylesheet:

body {
    text-align: center; /* voor IE 5.x */
}
#container {
    width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

ik zou niet de margins op het body-element zetten; volgens mij gaan oudere browsers daar niet goed mee om.
verticaal centreren is alleen voor mensen die echt nog zo'n retro postzegel-formaat site willen

de 'negatieve margin' truuk levert problemen op op het moment dat de breedte (of hoogte) van het window niet breed of hoog genoeg is voor het formaat van de site - je krijgt dan geen scrollbalken, maar dat is wellicht op te vangen door een (min-)height/width op de body te zetten.

[ Voor 41% gewijzigd door crisp op 06-08-2005 10:03 ]

[Verwijderd]

Je denkt imho nog veel te veel in blokjes en op de oude tabel-design manier. Het absoluut positioneren is helemaal niet nodig, je gebruikt het alleen om de boel echt in het midden te krijgen, de rest kan je allemaal relatief positioneren.

Zie het voorbeeldje wat ik even snel gemaakt heb op http://zoefff.gotdns.com/got/que_lio.htm

Dat is toch veel overzichtelijker? En het werkt als een tiet. De plaatjes in de header en column_left zou ik dan met een background-image in de CSS doen, evenals de menu-item-plaatjes. Met een a:hover kan je ze vervolgens verwisselen als je er met je muis overheen gaat, zonder extra javascript dus.

Hopenlijk kan, en wil, je hier mee aan de slag

Ha die Zoeff, te gek! Ik ga zsm weer knutselen met jouw opzet als basis. Feit is dat ik even overnieuw moet beginnen maar so be it, dan klopt ie tenminste. Crisp ook bedankt voor de tip.

-Bill

[IschaGast]

De tutorials van John Hicks, misschien heb je er nog wat aan:
http://www.hicksdesign.co...rtical-centering-with-css
http://www.hicksdesign.co...l--horizontal-centering-2

[Verwijderd]

Dat is toch veel overzichtelijker? En het werkt als een tiet. De plaatjes in de header en column_left zou ik dan met een background-image in de CSS doen, evenals de menu-item-plaatjes. Met een a:hover kan je ze vervolgens verwisselen als je er met je muis overheen gaat, zonder extra javascript dus.

Hopenlijk kan, en wil, je hier mee aan de slag

Ha die Zoef,

Ik heb hem helemaal omgebouwd en loopt best lekker tot dusver. Ik krijg op de 1 of andere manier alleen de menubalk niet gecentreerd. Met een "text-align: center;" zet hij alles in het midden, maar dan onder elkaar. Enig idee hoe ik het menu krijg zoals in mijn origineel?

Hoi,
-Bill

[Zoefff]

Dat lukt mij zo snel ook niet met text-align:center;. De snelste manier om het menu in het midden te zetten, is door de linker-padding van de ul even aan te passen.

Kijk even hoe breed al je items zijn, hoe breed de hele site is, en zet je linker-padding op

(breedte_site - breedte_items) / 2

Stel je site is 800px breed en de menu-items bij elkaar 500px, dan krijg je dus

Cascading Stylesheet:

#menu {
    height:25px;
    margin:0px;
    /* padding: top right bottom left; */
    padding:5px 0px 0px 150px;
    background-color:#00FFFF;
} 

Omdat je het menu gewoon wat naar links schuift, lijkt het in het midden te staan

offtopic:
Ik vind het overigens heel beleefd dat je onder vrijwel iedere post afsluit met -Bill, maar we hebben afgesproken om elkaar niet de groeten te doen, aangezien aangezien het vaak onprettig leest in een discussie

[ Voor 16% gewijzigd door Zoefff op 12-08-2005 13:04 ]

[Verwijderd]

Again, bedankt voor de tip, ik probeer het vanavond even uit