[CSS] problemen met float

[Verwijderd]

hallo,

Wanneer ik volgende pagina in FF open gaat alles ok, maar wanneer ik hem in IE open staat de navbar helemaal onderaan de pagina aan de linkerkant

http://www.chiroharo.be/test/index.php?link=route.php


CSS

code:

/***********************************************/
/* Layout Divs                                 */
/***********************************************/

#masthead{
    margin: 0;
    padding: 10px 0px;
    border-bottom: 1px solid #cccccc;
    width: 100%;
}

#navBar{
    margin: 0 79% 0 0;
    padding: 0px;
    background-color: #eeeeee;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

#content{
 float:right;
    width: 70%;
    margin: 0;
    padding: 0 3% 0 0;
}

[mithras]

IE heeft een renderbug waardoor margins en paddings anders worden geinterpreteerd. Je navBar zakt naar beneden omdat je content te breed is, waardoor binnen je masterhead de navBar er niet meer naast past. Smaller maken van een van beide is de oplossing

[Verwijderd]

heb geprobeerd om de width van de conetnt smaller te maken, maar dat help niet

code:

#masthead{
    margin: 0;
    padding: 10px 0px;
    border-bottom: 1px solid #cccccc;
    width: 100%;
}

#navBar{
    margin: 0 10px 0 0;
    padding: 0px;
    background-color: #eeeeee;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
width: 50px;
}

#content{
 float:right;
    width: 75%;
    margin: 0;
    padding: 0 3% 0 0;

}

Ik heb eens de voledige codes online gezet zodat je ze even kunt bekijken.
CSS
http://www.pastebin.be/2158/
index.php
http://www.pastebin.be/2159/
Route.php
http://www.pastebin.be/2160/

[mithras]

Probeer eerst eens goed uit te leggen wat er fout gaat. Ik heb je linkje nog eens bekeken en bij mij komt er dit uit:

Ook heb je ik enorme lap code te weten ontdaan van alle meuk die je uit had gecomment of niet gebruikte in je testcase, en kom dat tot dit beeld:

Ik zie dus het probleem niet echt, daarnaast heb je volgens mij redelijk veel css gebruikt voor zo'n relatief makkelijke weergave.
Dus: wat is je probleem en wat gaat er niet goed?

[Netraam]

Ik denk dat hier het probleem wel duidelijk is links is in Firefox en rechts in Internet Explorer:

[ Voor 14% gewijzigd door Netraam op 21-08-2006 02:01 ]

[danslo]

Ik zou zoiezo maar HEEL gauw die php inclusion hole er uit halen... Ik persoonlijk zal hier niks mee gaan doen, maar een kwaadwillige gebruiker kan nu bij al je bestanden, en eventuele sql database. Lijkt me niet de bedoeling. Zet anders even je DM aan...

[ Voor 66% gewijzigd door danslo op 21-08-2006 02:07 ]

[Verwijderd]

wat is DM?

Zoals al eerder gezegd in FF werkt het, maar in IE niet.

[Verwijderd]

Verwijderd schreef op maandag 21 augustus 2006 @ 08:03:
wat is DM?

Direct Messages, kun je hier aanzetten als je bent ingelogd.

[Verwijderd]

is ge-activeerd!

[danslo]

Met het CSS probleem kan ik je niet helpen maar ik heb je een DM gestuurd met de oplossing voor het include probleem.

[mithras]

Vannacht heb ik er niet goed naar gekeken, maar ik zie dat er, na het opschonen, heel veel html fouten inzaten. <div> blokken die niet werden afgesloten, er was wel een <br> na die float, maar daar werd niets in gecleared...
Kijk daar eerst eens goed naar, want in 99% van de gevallen waarin er fouten worden gemaakt met floats, is er geen clearing element toegepast

[Verwijderd]

php files van de server verwijderd totdat ik iets meer weet over die inclusion holes, maar ik zal eerst eens kijken naar de code.
De problemen duiken altijd op wanneer ik een include doe, mocht ik gewoon de html tekst erin plakken gaat alles vanzelf. Maar dat is nu net wat ik wil doen hé, dat includen.

[ Voor 89% gewijzigd door Verwijderd op 21-08-2006 22:01 ]

[Verwijderd]

Mithras86 heeft het bij het juiste eind. Heb de html code nog eens bekeken en er was geen </div> tag na het beeindigen van de masthead (bovenste balk). Wanneer moet ik in dit voorbeeld clearen?

Hebben jullie kant en klare code voor het vermijden van die inclusion holes?. Liefst met een beetje commentaar want ik ben nog een beetje een leek!

[danslo]

Register globals uit.
Voor je includes het liefst "./" zetten zodat er niet naar een externe host gerefereerd kan worden.. Zoals ik al zei in de DM dus:

PHP:

$link = $_GET['link'];
include("./".$link.".php");

Wat net zo makkelijk zou zijn is een switch

PHP:

switch ($_GET['link']) {
   case "home":
      include("home.php");
      break;
   case "blaat":
      include("blaat.php");
      break;
   default:
      include("home.php");
}

[mithras]

Wat betreft dat clearen, dat moet na een element wat een float krijgt en voor het volgende element zonder float, voorbeeld:

HTML:

<div id="container">
  <div id ="menu" style="float:left;">menu</div>
  <div id="content" style="float:right;">heel veel content</div>
  <br style="clear:both;">
</div>

En wat betreft die inclusion: je kan dus gevaarlijke dingen krijgen als je dit doet:

index.php?link=[insert leuke code]

Zorg daarvoor dat je eigenlijk altijd een switch gebruikt voor deze dingen. Je kan met isset() en empty() kijken of de variabele bestaat, maar je kan met een switch altijd veilig zijn tegen misbruik van variabelen. Je include dan die specifieke pagina's bij een meeggeven $link. Bevindt de meegegeven $link zich niet in de cases van de switch, wordt de default action uitgevoerd (vaak homepage). Veel veiliger

[Boelie-Boelie]

Mithras86 schreef op maandag 21 augustus 2006 @ 23:04:

HTML:

<br style="clear:both;">

Je kunt deze extra markup vermijden door overflow:hidden te gebruiken voor het clearen van floats. Mocht er alsnog een element volgen zoals een footer, dan kun je het voorgaande element idd clearen met clear:both op het volgende element.

[Verwijderd]

heb de clear nog niet gebruikt maar zal hem wel eens testen (waarschijnlijk zal ik geen visueel verschil zien in mijn voorbeeld)

Het enige probleem dat ik nog heb is dat wanneer ik klik op een van de latest articles er niets gebeurt. het heeft mss iets te maken met de php include.

www.chiroharo.be/test4/index.php

[Boelie-Boelie]

Bekijk eens de source van de pagina die je gaf. Niet als include bekijken, maar de pagina zoals het online staat. Dan zie je dubbele doctypes, dubbele head, dubbele body. Bekijk de fouten eens. De include zou slechts de markup moeten bevatten die de pagina aanvult waarin je het include, in dit geval zou de include gok ik slechts het stuk van #pagename t/m <!-- end content --> moeten bevatten. (Dat lost je probleem met die links overigens niet op, maar is wel een aandachtspunt.)