Sitecheck: windows en Firefox

Pro web-ontwikkeling
#1

Ik ben bezig met een web-pagina, en met wat hulp heb ik 'm al een heel eind af kunnen maken.

Nu werkt hij prima in Safari, en zelfs op IE/mac. Maar IE/win en Firefox
willen niet echt geloof ik. Is er iemand die me hiermee een handje zou
kunnen helpen (tip, aanwijzing o.i.d.?). Ik kom er niet uit namelijk :expressionless:

De link:
http://home.wanadoo.nl/joramoudenaarde

Probleem in IE/win en Firefox:
De groene balk onderin de content schuift niet mee. In mijn CSS is dit 't
[b:266bc2758e]“contentbottom”[/b:266bc2758e] deel.

Alvast bedankt!

Joram

#2

Firefox op Mac heeft er ook wat problemen mee. Ik zie bijvoorbeeld dat blokje met 'proeftekst' dwars door je groene balkje heen zeg maar. Als ik je omschrijving zo lees is dit hetzelfde als met Firefox onder windows. Lijkt dus wel een firefox probleempje...

#3

verwijder de div en zet de afbeelding als achtergrond van #contentfill

#contentfill {
background : url(_beeld/content_bottom.jpg) no-repeat bottom left;
}

#4

Oh, ik schreef 't niet helemaal goed op :) Bij firefox is 't inderdaad systeem-onafhankelijk, en doet ie niet wat ik zeg, hehe.

Maar het is dus dat groene balkje wat niet meeloopt, terwijl ie
dat wel onder IE/mac en Safari doet. :frowning:

#5

Bedankt tennapel :) Dat had ik eerst ook gedaan, maar dan staat ie aan de onderkant van het venster genageld. En dat was nou nét niet de bedoeling. Hij moet als 't ware onderaan de tekst bengelen.

Ik had deze tutorial als voorbeeld aangehouden.
Naderhand is er met wat hulp hier en daar wat veranders om het
menu en de bruine blokken rechts te krijgen zoals ik wil.

#6

Niet als #contentfill even lang is als de tekst, dan 'bungelt' ' ie onder aan de tekst.

[code:1:4abc459185]
<div id="contentfill">
<div id="inhoud">
… heleboel tekst …
</div>
</div>
[/code:1:4abc459185]

Zo’n soort constructie moet het zijn. Ik heb de CSS niet in detail bekeken, maar als je veel van position gebruik maakt kan het soms rare effecten opleveren; comentarieer alle position statements uit en bouw dan de boel stukje bij beetje op. Image als background onderaan de div zal dan echt onderaan de div zijn en niet onderaan de body.

#7

Hmm, nu zie ik 'm helemaal niet meer. Ik heb de #contentfill gedaan zoals je aangaf, maar je 2e berichtje met die div's snap ik niet.

Mijn div’s staan nu ongeveer zo:

[code:1:cd5a3ca30b]<div id=content>
<div id=contenttop></div>
<div id=contentfill>
<div id=left>
<div id=right>
<div id=righttop></div>
<div id=rightfill>
<div id=rightself></div></div>
<div id=rightbottom></div>
<div id=rightfill>
<div id=rightself></div></div>
<div id=rightbottom></div></div></div>

<div class=space></div>
<div id=contentbottom></div></div>[/code:1:cd5a3ca30b]
Van wat ik kan zien staat die contentfill nu ónder het plaatje van #content. Ik heb met
de z-index geprobeerd het plaatje omhoog te krijgen, maar dat kreeg ik helaas
niet voor elkaar.

#8

o dear .. dat is wel erg veel div-jes voor een dergelijke layout.

Als je geduld hebt kan ik wel kijken of ik er tabak van kan maken.

ps: zet je doctype op xhtml 1 transitional. xhtml 1.1 is vragen om moeilijkheden, niet doen.

#9

Hehehe, inderdaad veel divjes :D Maar dat komt o.a. door de ronde hoeken in de bruine vlakken, en door de verloopjes in de achtergrond.

Ik heb zo’n beetje elk vlak een omsluitende div gegeven (behalve de
hoofdtekst), met daarin een top, midden en bottom-deel, en een extra
“self”-div, zodat ik met margins de tekst/inhoud een stukje van de kant
kon zetten :slight_smile:

Dus ongeveer:

  1. omvattende div
  2. top (groene balk)
  3. fill (verloop) [i:29f5b09308]-met daarin de div “self”, i.v.m. 't loshalen van de tekst aan de zijkanten-[/i:29f5b09308]
  4. bottom (groene balk)

#10

dat kan bergen efficienter :-) Ik kijk ernaar wanneer ik er tijd voor heb ergens deze week (hoop ik).

#11

Geweldig! :o

Ik ga ondertussen eens verder puzzelen, hehe.

…uhm :sealed:
Ik moest alleen #contentbottom veranderen.
Die had nu de positionering op “absolute” staan, welke “relative” moest zijn.
Zoiets kleins, en dan zo’n verschil, hehehe.

Maar kan iemand toevallig de site op IE/win testen nog?
Op Firefox/mac ziet hij er nu een heel stuk beter uit.
Alleen de bullets van de Tweakers-tracker krijg ik nog niet goed, maar
dat komt nog wel dan.

#12

[quote:3e504104dd="joram"]

Maar kan iemand toevallig de site op IE/win testen nog?
Op Firefox/mac ziet hij er nu een heel stuk beter uit.
Alleen de bullets van de Tweakers-tracker krijg ik nog niet goed, maar
dat komt nog wel dan.[/quote:3e504104dd]

klik!

#13

Wow... dat meen je niet :o Is dat IE6?? Ik had de vorige keer een screenshot van iemand gekregen van IE6 welke er goed uitzag, behalve dan die groene balk onderin het rechterdeel... maar nu ziet 't er wéér anders uit.

IE/win :moe:

#14

jup IE 6.0

#15

Dan heb ik nu al 2 verschillende screenshots gezien met exact dezelfde browser... :cry:

#16

[quote:f33d3ca373="joram"]Dan heb ik nu al 2 verschillende screenshots gezien met exact dezelfde browser... :cry:[/quote:f33d3ca373]

Zoiets had ik ook… lag bij mij aan het schalen van het venster… dan gingen die divjes raar doen.

#17

Wanneer had je dat? Ik heb vanochtend een nieuwe versie geupload namelijk :) Maar erg vreemd is 't wel... ik heb dat met Firefox, Safari en IE/mac namelijk niet.