[PHP & CSS] Stylesheet wordt niet deftig toegepast

[Verwijderd]

Ik ben een simpele site aan het ontwerpen voor een persoonlijk indexsysteempje, eigenlijk meer als php-bezigheid en mysql-bezigheid dan webdesign. Ik dacht een simpele structuur op te bouwen met CSS (wat al niet direct lukte, maar dat doet er even niet toe).

Ik heb dus een CSS-stylesheet gedefinieerd die aan mijn drie div's (eigenlijk vier, maar bon) een opmaak, positie en layout toekent. So far so good, tot ik mijn html-code in een page.php probeer te verwerken. Die page.php dient om de rest van mijn pagina's simpel te genereren:

PHP:

class Page {

    function Page() {
    }

    function displayUpper($title) { 
?>
// yaddayadda
<div class="body">
    <div class="menu"><?php $this->displayMenu(); ?></div>
    <div class="content">
<?php
    }
    
    function displayLower() {
?>
    </div>
// yadda yadda
<?php
    }

Testpagina en de code ervan:

PHP:

<?php
include('page.php');
$page = new Page();
$page->displayUpper('test');
$page->displayLower();
?>

Helaas gaat het fout bij het aanroepen van displayLower. Vanaf hier wordt de helft van mijn stylesheet gewoon genegeerd door de parser van Mozilla, de laatste div wordt gewoon onder de voorlaatste div geplaatst, in plaats van er netjes naast. De opmaak en layout is wel in orde. In Internet Explorer wordt de pagina juist geparsed, dus ik vermoed dat het probleem bij de combinatie van de parser van Mozilla en mijn code ligt. Ik heb ooit voor een andere site hier een oplossing voor gevonden, maar ik weet het niet meer.

Hoe kan ik dit probleem verhelpen, of omzeilen?

[Verwijderd]

De onderste div past er gewoon niet meer naast, dus wordt hij eronder geplaatst. Dat heeft niks met PHP te maken in elk geval.

[ludo]

Ik weet niet, maar ik zie in FireFox en IE twee vrijwel identieke pagina's? Header met twee columns er onder

[edit]Heb ff geresized naar 1024x768, dan komt in mozilla die laatste div idd onder de andere twee te staan. Dit lijkt me gewoon een gevalletje boxmodel? Zoek daar maar eens op. En dat is trouwens een fout in IE, Mozilla doet het gewoon goed

[ Voor 59% gewijzigd door ludo op 18-02-2005 21:37 ]

[Verwijderd]

Heh, dit is uitermate raar. Daarnet op breedte 400 werkte de gewone index.html wél en de test.php niet. Daarna geresized naar breedte 600, bleef hetzelfde. Ik kom thuis, zet laptop op en surf er nog eens naartoe en het werkte in beiden niet meer. Geresized naar breedte 100 en het werkte in beiden.

Rechtermarge in mijn body-div (die die twee kolomdiv's bevat) verwijderd en het werkt met om het even welke breedte. Stom dat ik daar niet aan gedacht heb natuurlijk

Anyhoo, dat boxmodel: ik veronderstel dat dat iets met die positionering van die div's te maken heeft? Serieus tijdje mee geprutst eer ik mijn layout ietwat deftig kreeg en het is dan nog niet eens optimaal. Wie dat ooit die code gespecifieerd heeft, amai ... Die float-eigenschap gaf verschillende resultaten met linkermarges in beide browsers, zoals het nu is krijg ik mijn bovenste div en het totaal van die twee onderste maar niet even breed in beide browsers, ondanks het feit dat de opgetelde breedte hetzelfde is ... Man man

Oh ja, klein CSS-vraagje: hoe krijg ik tekst mooi verticaal in het midden van die bovenste div? In IE ziet het er goed uit, in Mozilla niet. Ik vind die eigenschap maar niet terug op handleidinghtml.nl en w3schools.org.

[ludo]

Verwijderd schreef op vrijdag 18 februari 2005 @ 21:58:Die float-eigenschap gaf verschillende resultaten met linkermarges in beide browsers, zoals het nu is krijg ik mijn bovenste div en het totaal van die twee onderste maar niet even breed in beide browsers, ondanks het feit dat de opgetelde breedte hetzelfde is ... Man man

Dat komt dus door de verschillen in het boxmodel van IE en FireFox IE houdt zich hier niet aan de standaard. Volgens de standaarden moeten marges bij de breedte en hoogte van een element worden opgeteld, en níet van de hoogte en breedte afgetrokken worden. Maar Microsoft doet dit in IE helaas wel zolang IE niet in standards-compliance mode staat. De makkelijkste manier om er voor te zorgen dat IE dat wel doet is door het plaatsen van een DOCTYPE bovenaan je html document. Zie verder voor dat boxmodel verhaal: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Oh ja, klein CSS-vraagje: hoe krijg ik tekst mooi verticaal in het midden van die bovenste div? In IE ziet het er goed uit, in Mozilla niet. Ik vind die eigenschap maar niet terug op handleidinghtml.nl en w3schools.org.

text-align

[ Voor 4% gewijzigd door ludo op 18-02-2005 22:12 ]

[Verwijderd]

ludo schreef op vrijdag 18 februari 2005 @ 22:08:
[...]
Dat komt dus door de verschillen in het boxmodel van IE en FireFox IE houdt zich hier niet aan de standaard. Volgens de standaarden moeten marges bij de breedte en hoogte van een element worden opgeteld, en níet van de hoogte en breedte afgetrokken worden. Maar Microsoft doet dit in IE helaas wel zolang IE niet in standards-compliance mode staat. De makkelijkste manier om er voor te zorgen dat IE dat wel doet is door het plaatsen van een DOCTYPE bovenaan je html document. Zie verder voor dat boxmodel verhaal: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Yeah, dat het aan de parser ligt, had ik zelf al besloten. Uitermate interessant, morgen eens lezen. Merci

[...]
text-align

Da's horizontaal

[crisp]

clienside HTML/CSS probleem, dus --> Webdesign & Graphics

[krvabo]

vertical align ?