[css] margin veroorzaakt vervelende spatiering

[Verwijderd]

Dag mensen,

ik ben met de volgende lay-out bezig.
http://www.raketje.com/tweakers/

Omdat ik mijn pagina in principe niet beeld vullend wil gebruik ik een margin-left en margin-right op de main div.
Deze margins veroorzaken in FF uiteraard weer geen probleem maar in IE krijgt de content in het middenkader een soort padding-left van +- 2px. Deze "padding" houdt op ter hoogte van de onderrand van de linker div.

Ik krijg het maar niet opgelost, behalve door de margi-left en margin-right op de maindiv te verwijderen.

Heeft iemand een idee hoe ik dit kan fixen?
thanks

[Totalmind]

http://www.positionisever...explorer/threepxtest.html

Kijk daar maar eens, het is 1 van de bekendere IE problemen

[Verwijderd]

Thanks,

dat schijnt te werken zie:
http://www.raketje.com/tweakers/index2.html

Het is dan echter niet mogelijk om de tekst het middenkader volledig strak tegen de linkerzijde aan te positioneren?

[Verwijderd]

Je kan ook proberen om dit bovenaan in je CSS document te plaatsen.

/*alle margins en paddings weg*/
* {margin: 0; padding: 0; }

Zorgt zoals de comment zegt. Dat alle margin en paddings weg zijn/gelijk zijn. Aangezien IE en FF verschillende interpretaties hebben van standaard margins/paddings.

Zo begin je met een schoon document mbt. margin en padding.

Mijn bron daarvoor is: www.gigadesign.be
Erg informatieve site voor CSS

[Rowanov]

Daar ben ik het totaal niet mee eens; het geeft meer incapabiliteit van jezelf aan, dan dat je daarwerkelijk een probleem oplost. Ik vind het een betere keuze om de padding en marge expliciet in te stellen op punten waar browsers verschillen. Dit is vooral het geval bij lijsten en tekst elementen; de rest van de elementen leveren nauwelijks problemen op.

[Totalmind]

Zover ik weet is dat 3px probleem niet zo op te lossen dat alles helemaal langs de kant gaat staan. Zou het zowiezo niet fijn vinden in een layout om die tekst helemaal tegen de kant te hebben. Na die 3px kun je Firefox en IE wel gelijk krijgen als je wilt, dus normaal vind ik dat niet zo'n probleem.

[Verwijderd]

Rowanov schreef op donderdag 02 november 2006 @ 12:08:
Daar ben ik het totaal niet mee eens; het geeft meer incapabiliteit van jezelf aan, dan dat je daarwerkelijk een probleem oplost. Ik vind het een betere keuze om de padding en marge expliciet in te stellen op punten waar browsers verschillen. Dit is vooral het geval bij lijsten en tekst elementen; de rest van de elementen leveren nauwelijks problemen op.

Als dit een antwoord was op mijn post.

Lees dan dit stukje + de comments: http://www.gigadesign.be/2006/10/ken-uw-browser-verschillen/

Ik had niet begrepen dat het over de 3pixel bug ging. Maar dan kun je ook dit nog lezen:
http://www.gigadesign.be/2006/02/de-ie-3pixel-bug/

En als je nog meer interessante punten wilt kijken:
Hier een overzichtje: http://www.gigadesign.be/2006/08/newbies-en-hun-problemen/

[user109731]

Verwijderd schreef op donderdag 02 november 2006 @ 13:15:
Lees dan dit stukje + de comments: http://www.gigadesign.be/2006/10/ken-uw-browser-verschillen/

Het artikel dat je noemt gaat over lijsten, en daar heeft Rowanov het toch ook over? Bij UL/OL/LI is het idd vaak erg handig om margin/padding zelf in te stellen, maar bij andere elementen niet. Vaak ben je meer tijd kwijt om alles weer goed te zetten bij de elementen waar de standaard margin/padding wel voldoet, wat voor onnodig lange CSS zorgt.

Plus dat input elementen (select, button) in bepaalde browsers 'onnatuurlijk' aan kunnen voelen zonder magin/padding

[Verwijderd]

Ok daar heb je waarschijnlijk ook wel gelijk in.
Heb ook een beetje over de laatste zin van Rowanov gelezen.
Toch heb ik dit sinds kort altijd bovenin mijn css document staan.
En het was ook een tip om het te proberen

Je kan ook proberen om dit bovenaan in je CSS document te plaatsen.

[Rowanov]

Tips zijn nooit weg natuurlijk, alleen was ik het in dit geval niet met je eens omdat de oplossing onnodig veel extra werk met zich meebrengt Dat laatste artikel wat je aanhaalt is overigens prima, als meer mensen die lijst er bij zouden pakken zouden we veel topics per week minder hebben met basisproblemen.

[Verwijderd]

Ok, ik heb het een en ander gelezen en geprobeerd en de 3 pixels heb ik weggekregen.
Die laatste lijst zal ik er dus bij blijven pakken.

Maar ik loop nu, een beetje in het verlengde van de padding/margin opmerkingen, tegen het volgende aan.
http://www.raketje.com/tweakers/index4.html
Gebruik maken van de p-tag in het middenvlak veroorzaakt een verschuiven van de gehele wrapper zodat er een regel tussen header en wrapper verschijnt.
padding:0 en margin:0 op de p-tag helpt wel, maar dit is niet wenselijk.
Deze "error" ontstaat enkel in Firefox

Maak ik in mijn opmaak nu een triviale fout?

[ Voor 8% gewijzigd door Verwijderd op 02-11-2006 16:34 ]

[Verwijderd]

Rowanov schreef op donderdag 02 november 2006 @ 16:30:
Tips zijn nooit weg natuurlijk, alleen was ik het in dit geval niet met je eens omdat de oplossing onnodig veel extra werk met zich meebrengt Dat laatste artikel wat je aanhaalt is overigens prima, als meer mensen die lijst er bij zouden pakken zouden we veel topics per week minder hebben met basisproblemen.

Ik moet eigenlijk zeggen dat ik nooit bij stil heb gestaan dat het extra werk met zich mee brengt. Misschien zou ik dat eens moeten doen, bedankt

Verwijderd schreef op donderdag 02 november 2006 @ 16:33:
Maar ik loop nu, een beetje in het verlengde van de padding/margin opmerkingen, tegen het volgende aan.
http://www.raketje.com/tweakers/index4.html
Gebruik maken van de p-tag in het middenvlak veroorzaakt een verschuiven van de gehele wrapper zodat er een regel tussen header en wrapper verschijnt.
padding:0 en margin:0 op de p-tag helpt wel, maar dit is niet wenselijk.
Deze "error" ontstaat enkel in Firefox

Zelf heb ik nog nooit geprobeerd om een site voor IE5 te ontwerpen. Gewoon omdat ik nog niet lang genoeg meedraai in het webdesign gebeuren. En ik persoonlijk niet nog voor IE5 ga ontwerpen(ligt natuurlijk aan de doelgroep waar je voor ontwerpt)
Waar ik op doel is je stuk code /* Hide from IE5-mac \*/
daar heb je ook een P in gedefinieerd.
Zelf definieer ik de P altijd zelf. Dus misschien kan je dat nu ook doen. Bijvoorbeeld dit gebruik ik in een huidig ontwerp:

p {
font: normal 1.2em/1.5 Tahoma, "Verdana", Arial, Helvetica, sans-serif;
list-style: none;
}
Gewoon een voorbeeld, dit is natuurlijk niet jouw oplossing. (ik zie hem ook niet zo 1,2,3 moet ik even wat langer naar kijken zo direct, of misschien ben je in de tussentijd al wel geholpen.)

[Verwijderd]

zie nu wel dat als je dit:

html { margin:0;
padding:0;
}

Vervangt door dit:

/*alle margins en paddings weg*/
* {margin: 0; padding: 0; }

Hij wel goed staat. Of heb ik het nu verkeerd?(getest met de webdeveloper plugin/extensie voor FF, die ik sinds gister gevonden heb )

[user109731]

Verwijderd schreef op donderdag 02 november 2006 @ 17:22:
Hij wel goed staat. Of heb ik het nu verkeerd?(getest met de webdeveloper plugin/extensie voor FF, die ik sinds gister gevonden heb )

Nee je hebt het goed Zo te zien heeft P een standaard margin die moeilijk doet, daar zou de TS een padding van kunnen maken: p { margin:0; padding:.5em }

Webdeveloper toolbar is idd een must voor elke webdeveloper

[Borizz]

Grote prutser schreef op donderdag 02 november 2006 @ 17:50:
[...]

Nee je hebt het goed Zo te zien heeft P een standaard margin die moeilijk doet, daar zou de TS een padding van kunnen maken: p { margin:0; padding:.5em }

Webdeveloper toolbar is idd een must voor elke webdeveloper

Het is niet zozeer een margin die moeilijk doet, het getoonde gedrag is volledig volgens de specificaties, zie ook Collapsing margins van het W3C Box model.

[ Voor 3% gewijzigd door Borizz op 02-11-2006 17:58 ]

[user109731]

Borizz schreef op donderdag 02 november 2006 @ 17:58:
[...]

Het is niet zozeer een margin die moeilijk doet, het getoonde gedrag is volledig volgens de specificaties, zie ook Collapsing margins van het W3C Box model.

Klopt, ik bedoelde meer 'moeilijk doen' als in: het doet nu niet wat je wilt