• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

Fouten CSS-weergave FireFox

Status
Niet open voor verdere reacties.

wjbruins

Bekend gezicht
Lid geworden
2 nov 2008
Berichten
151
Waarderingsscore
0
Hallo, ik ben bezig met het maken van een verenigingssite. Deze maak ik volledig in kladblok, in HTML en CSS. Ik heb steeds de site in Internet Explorer bekeken. Nu checkte ik 'm in FireFox en de hele opmaak was een puinhoop! Nou heb ik gelukkig het meeste weten te repareren en gelijk weten te trekken met de IE-weergave. Er zijn echter nog twee fouten, die ik er met geen mogelijkheid uit weet te krijgen. Ik heb daarom bij dit bericht de relevante broncodes toegevoegd, plus twee screenshots: n van de IE- en n van de FF-weergave.

De twee fouten zijn:
1. De menuknoppen beginnen in Firefox niet helemaal links zoals in IE. Zelf heb ik nergens de oplossing kunnen vinden in de margin- of padding-instellingen. Deze fout doet zich voor bij alles wat binnen de UL-tag staat.
2. De border-top van de footer (1px solid lichtblauw kleurtje) verschijnt in FF direct onder de header! Ik heb na deze constatering een test uitgevoerd door border-top in border te veranderen (dus een kader). Hierbij kwam het kadertje direct onder de header te staan in FF met de afmetingen van de footer, terwijl de tekst van de footer wel op de juiste plaats stond.

Wie o wie kan mij helpen de beide fouten op te sporen? In IE klopt alles wel. Voor de duidelijkheid: het moet dus worden zoals in de IE-weergave (zie screenshot).

Bijlagen: screenshots IE-weergave en FF-weergave, broncode index.php (index.txt), content/home.php (home.txt) en content/pagina.css (pagina.txt)
 

Bijlagen

  • index.txt
    index.txt
    4,3 KB · Weergaven: 54
  • pagina.txt
    pagina.txt
    753 bytes · Weergaven: 38
  • home.txt
    home.txt
    2,4 KB · Weergaven: 37
  • Site FF.jpg
    Site FF.jpg
    95,4 KB · Weergaven: 64
  • Site IE.jpg
    Site IE.jpg
    96 KB · Weergaven: 62
Heeft er niemand een mogelijke oplossing??
 
Je kan het beste voor IE de div''s die anders zijn een eigen css mee geven.

De css die je nu gebruikt is de juiste en wordt zo als het hoort goed beoordeelt in Firefox en IE leest het dus eigenlijk fout.
Dus de regels die anders moeten zijn zet je een een uitzonderinds css die voor IE is.

Voor je firefox kan je de ul ook margin left mee geven die in de - is
voor je footer kan je beter een clear:left dan zou het wel goed moeten zijn.
 
Dank je wel, het clear:left in de footer werkt!
Nu nog de buttons. Ik weet namelijk nog niet hoe je aparte css-eigenschappen maakt voor IE en Firefox. Als ik in mijn huidige code de UL een negatieve margin-left geef, zodat het in Firefox goed staat, staat het in IE weer te ver naar links, zelfs buiten de container-div!
Dus hoe kan ik aparte CSS-eigenschappen maken die alleen door IE worden gelezen en CSS-eigenschappen die door IE worden genegeerd?
 
Hmm... vreemd, bij mij wordt alles binnen de code dan genegeerd... Ik heb gewoon IE7. Ik zal wel iets verkeerd doen? Ik gebruik de code voor n regel.
Ik heb inmiddels ergens op een ander forum een andere oplossing gevonden, geschikt voor losse regels: Een asterisk ervoor zetten. Ik heb dus nu:

Code:
margin-left:-35px;
* margin-left:5px;

Dit werkt perfect. Mijn problemen zijn voor nu in elk geval opgelost. Bedankt voor alle hulp!

EDIT: Dat had ik dus te vroeg gezegd... Ik loop nu tegen een nieuw probleem aan. Onder de Home-pagina verschijnt in Firefox nu een horizontale scroll-balk. Daarmee kan de Home-pagina in de pagina-div zo ongeveer 40% naar links worden weggescrollt! Terwijl er rechts van wat er normaal al op het scherm te zien is, helemaal niks staat. Dit gebeurt alleen in Firefox. En daarbij gebeurt het ook enkel en alleen als de Home-pagina (?id=home | ofwel content/home.php) in de pagina-div wordt weergegeven. Bij andere pagina's gaat het wel gewoon goed. Heeft het iets te maken met die twee kleine kadertjes? Zelf kan ik in de code van content/home.php of content/pagina.css niks verkeerds vinden. Verwijder ik echter n van de twee kleine kadertjes (ook div's), dan verdwijnt de scrollbalk. Wat is hier aan de hand?
 
Laatst bewerkt door een moderator:
Heeft er toevallig nog iemand een oplossing voor het probleem in de 'edit' van de laatste post?
 
Die heb ik voor je.

Wat je hier ziet is dus dat er in Firefox een horizontale schuifbalk verschijnt onderin de "pagina"-div, waarmee ik de inhoud bijna 50% kan wegschuiven. Maar waarm die schuifbalk verschijnt, weet ik niet, want er is daar rechts helemaal niets. In IE gebeurt dat dan ook niet. Bijgevoegd ook nog de huidige code van content/home.php.
De bestanden content/newitems.php en content/volgend.php, waarnaar verwezen wordt, heb ik niet bijgevoegd, maar deze bestaan beide enkel uit een <ul> met daarin een aantal 3 <li>'s met in elk daarvan 3 regels 'platte tekst' gescheiden met <br>.

Nou ja, de bedoeling is duidelijk denk ik: die scrollbalk, hoe die er ook komt, die hoort daar niet!

En dan heb ik nog een vraagje:
Is er een manier om ook PDF-bestanden te includen in een div m.b.v. php? Normaal wordt een PDF automatisch geopend met de Adobe-plugin in IE, maar met include wordt het bestand in plain-text weergegeven, wat bij een PDF dus op Chinees/Arabisch lijkt. Toch denk ik hiervoor alleen include te kunnen gebruiken, aangezien het om een div gaat waarvan de inhoud wordt bepaald door een variabele. Zie hiervoor ook de bijlage index.php uit de eerste post, waarvan ik de php-code heb uitgebreid zodat er ook PDF-bestanden worden getoond wanneer de URL "index.php?pdf=blabla" luidt (met "pdf" ipv "id"). De code werkt, alleen wordt de PDF nu niet in de Adobe-plugin getoond, dat is dus eigenlijk het probleem in het kort.
 

Bijlagen

  • Screen Internet Exp.jpg
    Screen Internet Exp.jpg
    116,2 KB · Weergaven: 47
  • Screen Firefox (1).jpg
    Screen Firefox (1).jpg
    117 KB · Weergaven: 41
  • Screen Firefox (2).jpg
    Screen Firefox (2).jpg
    111 KB · Weergaven: 37
  • home.php.txt
    home.php.txt
    2,8 KB · Weergaven: 33
Als je een div er om heen zet die de breedte heeft van 2 pixels kleiner dan de div waarin deze geladen wordt dan ben je van dit probleem af.
Aangezien de pagina die je nu er in laad geen breedte mee krijgt krijg je een scrollbar aan de onderkant.
 
Ik heb het geprobeerd (dat wil zeggen, ik heb aan de huidige div "page" in home.php (zie stylesheet pagina.css uit eerste post) een width-regel toegevoegd in pagina.css.

Naar jouw tip toegevoegd aan pagina.css:
Code:
#page{
width:692px;}

De breedte van #pagina in index.php is 694px.

Deze div (#page) staat er namelijk omheen. Ik heb gexperimenteerd met verschillende breedtes, maar het helpt niet. Ja, als ik hem echt een stuk smaller maak, dan komen de twee kadertjes onder elkaar te staan en dan is de schuifbalk weg. Maar dat is natuurlijk niet de bedoeling. Overigens wordt de tekst niet smaller als ik de width van #page in pagina.css verklein. De schuifbalk is er ook alleen als die twee kadertjes (#nieuws en #volgend in home.php) er zijn. Daarom is in andere pagina's die m.b.v. van include in de pagina-div van index.php worden geladen - en ook gebruik maken van pagina.css - geen schuifbalk aanwezig.

Heb ik je tip verkeerd begrepen of is er iets anders mis?
 
De pagina die in de div word geladen (ik weet niet welke pagina dat is) deze pagina moet je een div om heen zetten die kleiner is dan de div waar het in geladen wordt.
Dus op de homepage moet je zelf niets aanpassen.
alleen de pagina die er in geladen wordt.
 
De div staat in index.php en de pagina die erin wordt geladen (in dit geval) is home.php. Ik heb in home.php een allesomvattende div gemaakt tussen <body> en </body> en hier de width:692px aan toegekend (div "pagina" in index.php heeft een width:694px), maar dit hielp niks. Hem nog smaller maken dan 692px evenmin. Kan het nog iets anders zijn?
 
Ja, ook dat hielp niks. Nou, ik heb het inmiddels met een soort van paardenmiddel opgelost, dat wil zeggen, niet de oorzaak verholpen, maar de uitwerking ervan onderdrukt:
Code:
overflow-x:hidden;
Nu is die irritante balk ook weg. Dus daar laat ik het denk ik maar bij.

Ik had nog n ander vraagje, in dezelfde post als de zojuist opgeloste vraag: Hoe kan ik ervoor zorgen dat een PDF in een div met de acrobat-viewer geopend wordt? Ik gebruik voor de inhoud van de div altijd het php-commando 'include'. Maar als ik dat met een PDF doe, wordt het bestand weergegeven alsof je het in kladblok opent, met al die 'Arabische kriebeltjes' zeg maar... Hoe verhelp ik dit? Als dit ook lukt, kan ik voorlopig weer even verder.
 
OK, jammer. In elk geval, mijn dank is enorm voor alle hulp! :biggrin: Als je ooit nog een oplossing voor het laatste hebt, dan lees ik het wel, ik ga zelf nog even verder op zoek.

EDIT: Ik heb al iets gevonden... Het is een tikkeltje omslachtig, maar het werkt alsvolgt: Je neemt een leeg bestandje en daarin plaats je:
Code:
<html>
<object data="content/pdf/document.pdf" type="application/pdf" width="689" height="414">
alt:<a href="content/pdf/document.pdf">content/pdf/document.pdf</a>
</object>
</html>
Die pagina kun je includen en dan werkt het. En als je dan geen reader hebt, dan verschijnt de alt-link als het goed is. Maar het nadeel is natuurlijk wel dat je voor elke pdf-file een php-bestandje moet maken. Maar dat valt ook wel weer mee. Ik ga het er gewoon mee doen.
 
Laatst bewerkt door een moderator:
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan