[CSS] Vaag positionerings probleem met IE/Moz

[Woudloper]

Momenteel ben ik bezig met het beter onder de knie krijgen van CSS (Cascading Style Sheets voor de n00bs )

Ik heb het één en ander nu hier staan. Zien hieronder de screenshots:


Voor een grotere versie kan je gewoon op de afbeelding klikken

Klik hier voor als je een directe link wilt hebben naar het CSS.

Probleem
Zoals jullie kunnen zien ziet alles er onder IE6 gewoon goed uit en zijn er helemaal geen problemen, maar als ik de site met Mozilla 1.2 bekijk lijkt het wel alsof deze geen rekening houdt met:

• de width welke gezet is in de CSS;
• de margin-top welke is gezet in de CSS.

Vraag
Weet iemand van jullie wat ik hieraan kan doen? Het is namelijk zo dat ik niet met absolute positionering wil gaan werken en daarbij lijkt het onder IE gewoon te werken..

[ Voor 6% gewijzigd door Woudloper op 18-09-2005 23:10 ]

[Bosmonster]

Je bedoelt de width:100%? Mozilla houdt zich daar ook prima aan. Verschil is dat Mozilla 100% van het document neemt, en IE 100% van de beschikbare ruimte. Wat goed is volgens de standaard weet ik niet precies, dat zou je op W3C moeten bekijken

[Verwijderd]

Workaround: positioneer die div met tekst absoluut, width: 100%; padding-left: de breedte van het menu links + marge

[Woudloper]

Bosmonster:
Je bedoelt de width:100%? Mozilla houdt zich daar ook prima aan. Verschil is dat Mozilla 100% van het document neemt, en IE 100% van de beschikbare ruimte. Wat goed is volgens de standaard weet ik niet precies, dat zou je op W3C moeten bekijken

Ja maar, ik heb toch gezegd dat de div floating is en dat de div voor de content gewoon de volledige breedte moet nemen van de pagina met berekening:
(100% - (left+width van menu)).

FoOL:
Workaround: positioneer die div met tekst absoluut, width: 100%; padding-left: de breedte van het menu links + marge

Je moet wel lezen he Ik wil namelijk niet gebruik maken van absolute postionering omdat ik graag wil dat de content div de volledige breedte heeft van de pagina (minus left+width van menu).

Overigens, wat je zegt is dat niet hetgene waar float gewoon voor moet zorgen???

/Edit:
Overigens heb ik bij het maken van dit gebruik gemaakt van dit voorbeeld:

http://tweakers.net/~crew/Cheatah/layout/block.html

[ Voor 14% gewijzigd door Woudloper op 10-12-2002 16:35 ]

[Woudloper]

(Mogelijke) Oplossing:

Ik ben nog steeds ff aan het stoeien en ik zie dat wanneer ik het volgende doe:

HTML:

div#content {
    width       : 100%;
    padding-top : 80px;
    margin-left : 190px;
}

in plaats van:

HTML:

div#content {
    width       : 100%;
    margin-top  : 80px;
    margin-left : 190px;
}

Dan werkt het wel goed.... In principe ben ik hier erg blij mee , maar kan iemand van jullie mij wellicht vertellen waarom dit zo is???

[Verwijderd]

Woudloper schreef op 10 december 2002 @ 16:25:
[...]

Ja maar, ik heb toch gezegd dat de div floating is en dat de div voor de content gewoon de volledige breedte moet nemen van de pagina met berekening:
(100% - (left+width van menu)).


[...]

Je moet wel lezen he Ik wil namelijk niet gebruik maken van absolute postionering omdat ik graag wil dat de content div de volledige breedte heeft van de pagina (minus left+width van menu).

[...]

Je moet wel lezen he Wat ik je vertel is dat je de content div volledige breedte kunt maken, maar deze heel sneaky een padding-left ter grootte van je navigatiebalk meegeeft, zodat het lijkt alsof deze er gewoon altijd naast zweeft. Vervolgens geef je rechts ook nog een padding mee van een x aantal pixels om de rechtermarge te verzorgen

PHP:

div#content {
  width: 100%;
  padding-left: 180px;
  padding-right: 10px;
  position: absolute;
  top: 80px;
  left: 0px;
}

[ Voor 8% gewijzigd door Verwijderd op 10-12-2002 17:03 . Reden: alcoholpercentage: ]

[Woudloper]

FoOL:::: ik snap het... Niet goed gelezen Maar dit is wel een workarround en * Woudloper houdt niet zo van workarrounds.... Doe het liever op de juiste manier....

Overigens kan jij wellicht hetgeen verklaren wat ik hierboven zeg??

[ Voor 3% gewijzigd door Woudloper op 11-12-2002 08:45 . Reden: nickchange :) ]

[Verwijderd]

Woudloper schreef op 10 December 2002 @ 17:04:
FoOl:::: ik snap het... Niet goed gelezen Maar dit is wel een workarround en * Woudloper houdt niet zo van workarrounds.... Doe het liever op de juiste manier....

Overigens kan jij wellicht hetgeen verklaren wat ik hierboven zeg??

op zich is het wel een nette workaround, je hoeft namelijk alleen je css ietwat aan te passen, ik gebruik hem wel vaker

En nee, ik kan niet verklaren wat jij net liet zien, ik zal er nog eens eventjes naar kijken

edit:

en spel m'n nick goed

[ Voor 4% gewijzigd door Verwijderd op 10-12-2002 17:16 . Reden: alcoholpercentage: ]

[Hangloozz]

heeft dat niet wat te maken met dat boxmodel verschil van IE en Moz?
Meer daarover is trouwens ook op GoT te vinden.
Ik geloof dat het shadow3333 was die daar een topic over startte.

[Rickets]

Hangloozz schreef op 10 december 2002 @ 17:19:
heeft dat niet wat te maken met dat boxmodel verschil van IE en Moz?
Meer daarover is trouwens ook op GoT te vinden.
Ik geloof dat het shadow3333 was die daar een topic over startte.

Klopt
Het gaat dan om deze topics:
[rml][ CSS] Box Model tweaking[/rml]
[rml][ css] boxmodel verschillen Moz/IE[/rml]

[Woudloper]

* Woudloper is er nog even ingedoken, maar mijn inziens heeft het niets te maken met het boxmodel verschil. Overigens heeft het mij wel weer meer inzicht gegeven in het gehele box-model, het blijft niet eenvoudig om dat zo één, twee, drie te snappen

FoOL: nog bedankt voor dat voorbeeld wat je gaf ('k was gisteren aan het reageren toen jij het berricht ge-edit had), maar dat is niet de oplossing, aangezien je een horizontale scrollbar blijft hebben. Daarbij blijf ik het vreemd vinden, dat de margin-top niet wordt overgenomen, ofwél wordt genegeerd door Mozilla.

HTML:

div#content {
    width       : 100%;
    margin-top  : 80px;
    margin-left : 190px;
}

Waar ik wel mee kan inkomen is dat de berekening van de breedte van de div nu als volgt wordt gedaan. Stel je breedte (width) van je scherm is 400 pixels, dan wordt hierbij dit dan ook als breedte meegegeven aan de div#content wat erin resulteerd dat er een horizontale scrollbar komt aangezien 190px + 400px = 590px. 190px breder is dan je scherm.

Maar, dan blijf ik nog steeds bij de volgende twee vragen:

1. Waarom wordt de margin-top voor de div#content genegeerd door Mozilla.
2. Hoe kan ik er dan voor zorgen dat de breedte voor de div#content (referend aan bovengenoemde berekening) gewoon 210 px is en wanneer het scherm 600 pixels groot is, deze dan 410 px is??

[BtM909]

hmmmm

Ben ondertussen ff aan het checken op http://www.richinstyle.com/bugs/mozillademo.html, maar kan die bug ook daar niet zo snel vinden.

Ben ff aan het testen!

[Verwijderd]

*Kick*

Ik vermoed dat Moz die margin uitrekent t.o.v. het bovenliggende element en niet de rand van het scherm. Dat kan je zien gebeuren als je de float weghaalt bij <div id="menu">. Door diezelfde float komt de content-div alsnog tegen de bovenkant aan.

Zo lijkt het wel te werken in IE en Moz:

code:

div#content {
position: relative; 
top  : 80px;
margin-left : 190px;
}

Maar ik ben niet zo thuis in de float-property, 't is meestal trial & error
_{Toch maar eens de specs bestuderen}

[Woudloper]

* Woudloper is tot de conclusie gekomen dat er niet valt te werken met float als je cross-browser wil gaan coden....

Ik heb de site getest met Mozilla, Internet Explorer en met Opera. En het grappige is dat ze er alle drie anders mee omgaan. Dus totdat er een eenduidige werking is m.b.t. float blijf ik maar werken met absolute positionering

Het probleem dat ik had heb ik nu dan ook als volgt opgelost, daarbij gebruik maken van de hack die Glish gevonden en uitgewerkt had. Deze oplossing werkt dus over alle drie te geteste browsers hetzelfde en dat is dus mooi

[ Voor 4% gewijzigd door Woudloper op 18-09-2005 23:10 ]

[BtM909]

Woudloper schreef op 16 december 2002 @ 09:33:
blaat ...daarbij gebruik maken van de hack die Glish gevonden en uitgewerkt had. Deze oplossing werkt dus over alle drie te geteste browsers hetzelfde en dat is dus mooi

Waar kan ik meer info vinden over die hack... Heb net ff Glish bekeken, maar kan hem niet vinden...... dusse: heb je een direct link?

[Verwijderd]

Allerlei hacks op een rijtje

En voor het gemak, een voorbeeld:

Je mag in CSS meerdere keren een element 'stylen'

code:

body{
background-color: #ffffff;
}

body{
background-color: #000000;
}

De laatstgenoemde gaat dan voor (#000000).

Gebruik je nu bijvoorbeeld dit:

code:

body{
background-color: #ffffff;
}

html>body{ /* Child selector */
background-color: #000000;
}

Dan zal (Win) Internet explorer html>body negeren omdat ie dat niet kent, maar Mozilla en Opera wel, daar zal je dus een zwarte achtergrond zien.

Zo werken die meeste hacks ongeveer.

[r0bert]

Totdat IE ook CSS 2? gaat ondersteunen zal hij het negeren .. dan moet je een andere oplossing zoeken lijkt me ..

[Verwijderd]

Ik gebruik vaak // tags omdat Internet Explorer de teskt erachter wel ziet, maar Mozilla en Opera niet. Maar ja, ik zie het niemand anders gebruiken, dus het zal ook nog wel wat nadelen hebben, ben ik bang...

[Woudloper]

BtM909 schreef op 16 December 2002 @ 15:24:
Waar kan ik meer info vinden over die hack... Heb net ff Glish bekeken, maar kan hem niet vinden...... dusse: heb je een direct link?

Hier: http://www.glish.com/css/

Daar staan wat trukjes hoe je websites kan maken zonder gebruik te maken van tables