[CSS] witte rand boven body (noob probleempje)

[zakkenjongen]

Hallo allemaal,
Ik hoop dat ik in het juiste deel van het forum post. Het is zo, dat we een site moeten maken in PHP voor school. Ik ben degene die verantwoordelijk is voor de layout. Met behulp van wat tutorials etc. dan maar begonnen, en ik weet dat het verre van goed is, maar het werkt. Nu is het wel zo dat ik een irritant probleem heb, namelijk een witte rand boven mijn site: http://img716.imageshack.us/img716/8599/55742752.jpg
Met Firebug zie ik dat dit te maken heeft met mijn body, maar eerlijk gezegd heb ik geen flauw idee wat ik aan moet passen. Ook overall tips wat betreft positionering en afmetingen zou ik fijn vinden, want alles vast met pixels instellen is volgens mij niet het beste idee.

Hierbij de css code, indien nodig kan ik de html index ook geven.

Cascading Stylesheet:

@charset "utf-8";

body { 
    font-family: Helvetica Narrow, sans-serif;
    font-size: 14px;
    background: #FFFFFF; 
    margin: 0;
    color: #000;
}
fieldset {
    border: 0px;

}
    
.container {
    background: #7BA0AD;
    margin-left: 10%;
    margin-right: 10%;
    height: 100%;
    margin-top: 0%;
    padding: 0;

}

.footer {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    height: 50px;
    background: #4793AD;
    padding:5px 5px 5px 5px; 
}

.header {
    background: #4793AD;
    height: 100px; 
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    padding:10px 10px 10px 10px; 
}

.menu {
    background: #4793AD;
    margin-left: 10px;
    margin-right: 10px;
    height: 50px;
    margin-top: 10px;
    padding:7px 7px 7px 7px; 
}
.menu ul{
    text-align:center;
    padding-top: 15px;
    padding-bottom:15px;
    margin: 0;
    white-space: no-wrap;
}

.menu ul li{
    display: inline;
}

.menu ul li a{
    border-left: dotted;
    border-left-color: #fff;
    border-right: dotted;
    border-right-color: #fff;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #fff;
    padding: 15px 20px 15px 20px;
}
.menu ul li a:hover{
    border-left: dotted;
    border-left-color: #bbb;
    border-right: dotted;
    border-right-color: #bbb;
    color: #bbb;
}


.content {
    background: #AFDDFA;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    height: 600px;
}

.text {
    background: #AFDDFA;
    margin-top: 1%;
    margin-left: 1%;
    width: 689px;
    float: left;
    width: (100%-250px);
    /*height: 600px; werkt beter als je het weglaat? rik*/
    color: black;
}
    

.login {
    background: #7BA0AD;
    float: right;
    clear: right;
    margin-right: 1%;
    margin-top: 1%;
    height: 250px;
    width: 250px;
    padding:10px 10px 10px 10px; 
    text-align: right;
}

.extra {
    background: #7BA0AD;
    float: right;
    clear: right;
    margin-right: 1%;
    margin-top: 1%;
    height: 285px;
    width: 250px;
    padding:10px 10px 10px 10px; 
}

table.pizza {
  margin: 1em 1em 1em 0;
  background: whitesmoke;
  border-collapse: collapse;
}
table.pizza tr:hover {
   background: lightsteelblue !important;
}
table.pizza th, table.pizza td {
  border: 1px silver solid;
  padding: 0.2em;
}
table.pizza th {
  background: gainsboro;
  text-align: left;
}
table.pizza caption {
  margin-left: inherit;
  margin-right: inherit;
}
img.profielplaatje{
float: right;
}

PS.
Ik zou het ook fijn vinden als iemand me uit zou kunnen leggen hoe ik de tekst in het log-in vakje een beetje fatsoenlijk kan rangschikken..

[Verwijderd]

Dergelijke ruimte wordt veroorzaakt door margin, padding, border, of een combinatie ervan. In firebug heb je een aantal mooie opties, zoals "Style" waarin je de gedefinieerde CSS regels kunt zien, "Computed" waarin je alleen de regels ziet die op dat element van toepassing zijn, en "Layout" waarin je kunt zien hoeveel margin, padding of border een element heeft. Ik stel voor dat je daar eens naar gaat kijken.

[TERW_DAN]

Even de padding van je body op 0px zetten zou 't op moeten lossen.

[zakkenjongen]

Het probleem is dat ik in Layout juist niks zie. Border, padding en margin zijn allemaal 0 en zorgen alle 3 niet voor de witte rand (dat zie ik als ik eroverheen ga met de muis).

PS.
padding: 0; toegevoegd, geen verandering.

[ Voor 12% gewijzigd door zakkenjongen op 17-11-2010 22:17 ]

[croontje]

en

html{
padding: 0;
margin: 0;
}

? Of was dit een IE truukje? Dat weet ik ff niet meer

[teh_twisted]

croontje schreef op woensdag 17 november 2010 @ 22:19:
en

html{
padding: 0;
margin: 0;
}

? Of was dit een IE truukje? Dat weet ik ff niet meer

nee dat is em, je kan ook gewoon *,html {} doen, heb je gelijk nergens meer een padding, wel zo handig

[Verwijderd]

teh_twisted schreef op woensdag 17 november 2010 @ 22:20:

nee dat is em, je kan ook gewoon *,html {} doen, heb je gelijk nergens meer een padding, wel zo handig

Dat is alleen voor mensen die helemaal geen bal van CSS begrijpen.

Je moet alleen properties aanpassen waarvan het strict noodzakelijk is, je moet zoveel mogelijk nog aan de browser stylesheet en user stylesheet overlaten.

[croontje]

Ik moet zeggen dat ik toch ook soms

*{
padding: 0;
margin: 0;
}

bovenaan zet hoor. Ik wil men margins/paddings zelf bepalen en van die onvindbare vreemde problemen voorkomen als ik met een layout bezig ben. Om nu meteen te zeggen dat dit is voor mensen die niks van CSS kennen

[zakkenjongen]

Ik heb geprobeerd:

html{
padding: 0;
margin: 0;
}

en

*,html {}

En tatatata.. Uitkomst: hetzelfde. Wat een hardnekkige rotrand toch ook, haha. Het ligt heel zeker aan body, want ik heb net de achtergrond helemaal zwart gemaakt en de rand zelf werd ook zwart. Nog een screenshot:
http://img837.imageshack.us/img837/87/51711120.jpg

[NMe]

Verwijderd schreef op woensdag 17 november 2010 @ 22:22:
[...]

Dat is alleen voor mensen die helemaal geen bal van CSS begrijpen.

Je moet alleen properties aanpassen waarvan het strict noodzakelijk is, je moet zoveel mogelijk nog aan de browser stylesheet en user stylesheet overlaten.

Op sommige vlakken discutabel aangezien dat potentieel je lay-out kan breken, maar verder wel mee eens natuurlijk.

kaiy: klik eens met rechts op die witte rand en dan op Inspect Element. Welk element ben je dan aan het inspecten?

Op je laatste screenshot zie je dat het niet de body is die iets fouts doet, want dan zou ook je witte rand blauw zijn.

[ Voor 20% gewijzigd door NMe op 17-11-2010 22:29 ]

[zakkenjongen]

croontje schreef op woensdag 17 november 2010 @ 22:26:
*{
padding: 0;
margin: 0;
}

Oh, dit lijkt trouwens vrij handig, het lost mijn probleem op in het inlog-vakje waar nu alles mooi onder elkaar staan op een rijtje

[NMe]

kaiy schreef op woensdag 17 november 2010 @ 22:28:
[...]

Oh, dit lijkt trouwens vrij handig, het lost mijn probleem op in het inlog-vakje waar nu alles mooi onder elkaar staan op een rijtje

Dan had je die invoervelden een margin of padding moeten geven. Dit gebruiken als all-round fix is een zwaktebod en levert je waarschijnlijk alleen maar meer problemen op.

[zakkenjongen]

NMe schreef op woensdag 17 november 2010 @ 22:27:
kaiy: klik eens met rechts op die witte rand en dan op Inspect Element. Welk element ben je dan aan het inspecten?

Dit was een goed idee. Het blijkt dat ik inspecteer.. Het html element? Ik snap het niet zo goed. Dit is wat hij weergeeft in ieder geval na 'inspect element':
http://img15.imageshack.us/img15/5958/asdwr.jpg

[croontje]

Geef anders de html ook eens.

@de * tegenhangers
Hoe kan het afzetten van een padding of margin méér probelemen geven?

[zakkenjongen]

Bij deze de index pagina

HTML:

<?php
//sessie moet gestart worden voor het inloggen 
session_start();
require("instellingen.php");
//Er is hier gekozen voor require() om de databaseinstellingen op te slaan, i.p.v. 
//include(). Dit hebben we gedaan om er voor te zorgen dat dit bestand zeker aanwezig is.
//Dit is namelijk een cruciaal bestand.
$pagina ="";
//kijken of er een pagina is meegegeven via GET
if(!empty($_GET))
{
    $pagina = $_GET["pagina"];
}


?>
<?xml version = "1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="stijl.css" rel="stylesheet" type="text/css" media="all" />
<title><?php if($title ==""){echo"Electronic Learning Universe, share the knowledge in just a few mouseclicks!";}else{echo $titel;}?></title>
</head>

<body>

    <div class="container">
        
        <div class="header">
        <img src="plaatjes/head.png" alt="Header van ELU"/> 
        </div>
        <div class="menu">
            <?php
            $leerling_id=$_SESSION["leerling_id"];
            if(isset($leerling_id)){
                echo //Het menu als iemand is aangemeld
                "<ul>
                    <li><a href='?pagina=home'>Home</a></li>
                    <li><a href='?pagina=profiel'>Bekijk eigen Profiel</a></li>
                    <li><a href='?pagina=profiel_bekijk'>Bekijk profiel</a></li>
                    <li><a href='?pagina=loguit'>Loguit</a></li>
                    <li><a href='?pagina=cijfers'>Cijfers</a></li>
                    <li><a href='?pagina=berichten'>Postvak</a></li>
                    <li><a href='?pagina=bestandenlijst'>Bestandenlijst</a></li>
                </ul>";
            }else{
                echo //Het menu als je bent uitgelogd / niet bent aangemeld
                "<ul>
                    <li><a href='?pagina=home'>Home</a></li>
                    <li><a href='?pagina=profiel_bekijk'>Bekijk profiel</a></li>
                    <li><a href='?pagina=login'>Login</a></li>
                    <li><a href='?pagina=bestandenlijst'>Bestandenlijst</a></li>
                    <li><a href='?pagina=registreer'>Maak je eigen ELU-account!</a></li>
                </ul>";
            }
            ?>
        </div>
        
        
        <div class="content">
            <div class="text">
                <?php 
                //Als er een pagina is meegegeven, wordt deze geinclude.
                //Anders laat de site de homepage (home.php) zien.
                //Als de pagina niet bestaat zal de gebruiker een 404-error pagina te zien krijgen. (default pagina)
                if($pagina != "")
                {
                    switch ($pagina){
                        case "home": //standaard nieuwspagina
                            include("home.php");
                            break;
                        case "profiel": //bekijk eigen profiel
                            include("profiel.php");
                            break;
                        case "profiel_bekijk": //bekijk iemands profiel
                            include("profiel_bekijk.php");
                            break;
                        case "registreer": //link naar registratiepagina
                            include("registreer.php");
                            break;
                        case "login":
                            include("login.php");
                            break;
                        case "loguit":
                            include("loguit.php");
                            break;
                        case "cijfer_bewerken":
                            include("cijfer_bewerken.php");
                            break;
                        case "cijfers":
                            include("cijfers.php");
                            break;
                        case "cijfer_toevoegen":
                            include("cijfer_toevoegen.php");
                            break;
                        case "bestandenlijst":
                            include("bestandenlijst.php");
                            break;
                        case "berichten":
                            include("berichten.php");
                            break;
                        case "bericht_verzenden":
                            include("bericht_verzenden.php");
                            break;
                        case "waardering":
                            include("waardering.php");
                            break;
                        default:
                            include("404.php");
                    }
                }
                else
                {
                    include( "home.php");
                }
                ?>
            </div>
            <div class="login">
                <?php include("gebruiker_panel.php");?>
            </div>
            <div class="extra">
            <img src="plaatjes/ad.png" alt="AD"/>
            </div>
        </div>
        
        
        <div class="footer">
            Copyright ELU Nederland 2010
        </div>
    
    </div>

</body>
</html>

[cellcote]

Op regel 37 van je css bestand heb je bij je header een margin-top van 10 pixels. Dit veroorzaakt waarschijnlijk je witte rand.

[zakkenjongen]

cellcote schreef op woensdag 17 november 2010 @ 22:48:
Op regel 37 van je css bestand heb je bij je header een margin-top van 10 pixels. Dit veroorzaakt waarschijnlijk je witte rand.

Ahh, dankje! Wat een fail-fout, het is in ieder geval opgelost nu

[croontje]

Die header, margin-top: 10px;

Bekijk dat eens

-----
dit zuigt

[ Voor 21% gewijzigd door croontje op 17-11-2010 22:51 . Reden: te laat :p ]

[jbdeiman]

croontje schreef op woensdag 17 november 2010 @ 22:37:
Geef anders de html ook eens.

@de * tegenhangers
Hoe kan het afzetten van een padding of margin méér probelemen geven?

Sterker nog, ik mag wel zeggen dat dit juist minder problemen geeft. De standaard styles van browsers (zelfs versies van browsers, bekendste voorbeeld is IE) verschillen nog wel eens. Al is het in theorie niet veel, in praktijk kan dit de boel maken of breken.
Ik ben zelf wel voor het weghalen van de marges en dit weer toe te voegen waar ik dat nodig acht. Ik kan er dan veel eenvoudiger voor zorgen dat een lay-out crossbrowser hetzelfde is. Bijvoorbeeld met padding, als ik de browser dit laat bepalen en het in FF (FireFox) test, kan het precies passen. Doe ik dezelfde test in IE (Internet Explorer) kan het best zijn dat sommige elementen net niet naast elkaar passen en dan onder elkaar vallen.

Vandaar dat ik eigenlijk niet vind dat het meer problemen kan geven, maar juist veel kan voorkomen. Wel moet dit het eerste zijn wat je doet, en vervolgens keurig de elementen verder stijlen.
Overigens gebruik ik zelf meestal een reset.css bestandje waarin ik zelf een basispakket heb, waardoor het al cross browser goed is.


@croontje
Het kan meer problemen geven wanneer je vergeet bij bepaalde items de marge e.d. weer (zelf) aan te zetten.

[Ronnyrr]

Denk dat de margin-top:10px; die je mee hebt gegeven aan de header het probleem veroorzaakt.
Het kan ook nog zijn dat je overbodige code gebruikt die het veroorzaakt. Zoals bij de container de margon-top:0% en de padding:0;

De padding resetten op het begin van de css is het handigst en verder overbodige dingen weglaten. Het is heel raar maar soms geeft die met 0 iets anders als dat er niks staat, heb ik ook wel eens gehad heel vreemd is dat.

[mcDavid]

croontje schreef op woensdag 17 november 2010 @ 22:37:
Geef anders de html ook eens.

@de * tegenhangers
Hoe kan het afzetten van een padding of margin méér probelemen geven?

Probeer nog maar eens een list te maken bijvoorbeeld.

Het is gewoon irritant, want de elementen waarop je zelf een margin of padding in wilt stellen, doe je het dus dubbelop en had je de "reset" net zo goed niet kunnen doen. En voor de elementen waarvan je dat niet gedaan hebt, is de browser-default in 99,9% van de gevallen gewoon de beste oplossing, in ieder geval aanzienlijk beter dan zomaar blind alle margins en paddings wegslopen.

[ Voor 3% gewijzigd door mcDavid op 17-11-2010 22:57 ]

[zakkenjongen]

Thanks allemaal, het is nu opgelost!

Nu ik toch al een topic heb, misschien dat iemand dit even snel kan zeggen - hoe zorg ik ervoor dat mijn pagina (container div) wordt uitgestrekt over de hoogte van de browser, onafhakelijk van de monitor resolutie?

[Verwijderd]

Ik ben zelf wel voor het weghalen van de marges en dit weer toe te voegen waar ik dat nodig acht. Ik kan er dan veel eenvoudiger voor zorgen dat een lay-out crossbrowser hetzelfde is.

Zondermeer mee eens. Je moet een browser gewoon geen enkele ruimte voor interpretatie geven. Letterlijk alles voorkauwen, letterlijk alles specificeren.

Geef inderdaad de minste ruimte voor problemen - omdat je alles in eigen hand hebt. En dus doorgaans maar naar één ding hoeft te kijken voor het oplossen van problemen - naar je eigen werk.

[mcDavid]

http://www.w3schools.com/CSS/pr_dim_min-height.asp

Die was wel heel easy hoor.

[croontje]

mcDavid schreef op woensdag 17 november 2010 @ 22:56:
[...]


Probeer nog maar eens een list te maken bijvoorbeeld.

Het is gewoon irritant, want de elementen waarop je zelf een margin of padding in wilt stellen, doe je het dus dubbelop en had je de "reset" net zo goed niet kunnen doen. En voor de elementen waarvan je dat niet gedaan hebt, is de browser-default in 99,9% van de gevallen gewoon de beste oplossing, in ieder geval aanzienlijk beter dan zomaar blind alle margins en paddings wegslopen.

Normaal gezien gebruik ik geen elementen die ik niet zelf definieer

[Verwijderd]

Het probleem is weer eens dat mensen * handig vinden omdat ze niet weten welke elementen in welke browser welke marges hebben. Dus gaan ze maar * gebruiken om hun gebrek aan kennis te compenseren, want het is lekker makkelijk.

Nee, zo is CSS toch echt niet bedoeld.

Verwijderd schreef op woensdag 17 november 2010 @ 22:57:

Zondermeer mee eens. Je moet een browser gewoon geen enkele ruimte voor interpretatie geven. Letterlijk alles voorkauwen, letterlijk alles specificeren.

NEE. Je moet specificeren wat nodig is en de rest aan de browser overlaten.

Geef inderdaad de minste ruimte voor problemen - omdat je alles in eigen hand hebt. En dus doorgaans maar naar één ding hoeft te kijken voor het oplossen van problemen - naar je eigen werk.

Nee, je moet gewoon zorgen dat je de kennis hebt om te zien wat je precies moet veranderen en waarom.

Je laat het toch ook aan de user agent over om een em of strong element op een bepaalde manier te laten renderen? Je gaat toch ook niet overal display: block; of display: inline; definieren als dat standaard is voor een element?

Niet gaan prutsen, zorg dat je gewoon de kennis opdoet.

[mcDavid]

Verwijderd schreef op woensdag 17 november 2010 @ 22:57:
[...]
Zondermeer mee eens. Je moet een browser gewoon geen enkele ruimte voor interpretatie geven. Letterlijk alles voorkauwen, letterlijk alles specificeren.

Geef inderdaad de minste ruimte voor problemen - omdat je alles in eigen hand hebt. En dus doorgaans maar naar één ding hoeft te kijken voor het oplossen van problemen - naar je eigen werk.

Het is offtopic, maar alle margins maar resetten omdat je niet snapt hoe een browser werkt vind ik nogal lomp. Een beetje van het zelfde niveau als mensen die hun hele computer opnieuw installeren omdat ze het geluid niet van mute af krijgen ofzo.

De default styles van een browser zijn heel erg nuttig. Als je die vernietigd ben je alleen maar meer tijd kwijt omdat je ze voor 99% zelf weer opnieuw in moet stellen. De elementen die je voor je float gebruikt (zoals span en div) hebben toch al geen margins of paddings. En zo wel, dan wil je die 9 van de 10 keer toch per object exact defineren (zoals een list voor een menu, die stijl is ALLEEN voor het menu en absoluut niet voor welke andere list dan ook). Terwijl juist in je content de browserstyles ideaal zijn en 9 van de 10 keer met een kleine aanpassing (zoals een ander font of een andere kleur) direct klaar zijn voor gebruik. Zonder dat je van ieder element (H1 t/m H7, p, ul, ol, a, blockquote, tr, th, td, table, hr, br, of weet jij veel watvoor element je gebruikers gaan toevoegen) zelf weer de hele stijl opnieuw moet gaan uitvinden.

[croontje]

Als ik zo even rondgoogle zie ik toch "CSS specialisten" die ook *{} gebruiken om margins op 0 te zetten of zelfs volledige reset style sheets.
Het zal waarschijnlijk eerder een kwestie van voor en tegenstanders zijn ipv CSS kennen of niet

[Herko_ter_Horst]

Als je cross-browser controle wilt over hoe je pagina eruit ziet, zul je toch zelf wat moeten regelen, aangezien er geen standaard is die beschrijft hoe een element er uit zou moeten zien. Als morgen een willekeurige browser beslist om links niet meer in blauw en onderstreept weer te geven, maar in pimpelpaars met een groen randje, zie jouw pagina er niet meer uit.

Als alle browsers nou gegarandeerd dezelfde default stylesheet zouden hebben (afgedwongen door een bepaalde standaard), dan had je gelijk. In de praktijk is dat echter niet zo. Uit je hoofd leren welke elementen welke styles hebben is daarom ook onzin, aangezien dit per browser kan verschillen en er geen standaard is die beschrijft wat de style zou moeten zijn(*).

Het is dus prima verdedigbaar om zelf een default stylesheet mee te leveren als basis voor je eigen design. Hoe ver je daarin gaat, kun je over discussieren. Voor optimale veiligheid zou je inderdaad een style voor alle elementen kunnen specificeren.

(*) er is een sample stylesheet van het W3C voor HTML 4. Die is echter geen onderdeel van de standaard, maar meer het resultaat van onderzoek hoe "de meeste" browsers het in de praktijk doen.

[ Voor 6% gewijzigd door Herko_ter_Horst op 17-11-2010 23:24 ]

[Verwijderd]

Niet gaan prutsen, zorg dat je gewoon de kennis opdoet.

Do not assume, it will make an ass out of u and me.

Voor mij is gewoon gebleken dat alles voorkauwen minder problemen geeft dan meer bronnen open laten waar een uitzondering uit kan voortkomen.

Het is offtopic, maar alle margins maar resetten omdat je niet snapt hoe een browser werkt vind ik nogal lomp. Een beetje van het zelfde niveau als mensen die hun hele computer opnieuw installeren omdat ze het geluid niet van mute af krijgen ofzo.

Do not assume, it will make an ass out of u and me.

Ja, ik herhaal hem. Omdat mensen er zondermeer zomaar vanuit gaan dat ik niet weet waar ik het over heb omdat ik een andere stijl van werken heb. Is een wat arrogante houding om aan te nemen, als ik zo vrij mag zijn.

Dat iemand een andere mening is toegedaan maakt die mening niet slechter, minder geïnformeerd of inferieur. Het maakt hem anders. Tot je het volledige plaatje hebt over mijn ervaring (of gebrek eraan) kun je er geen aannames over doen.

En ja, ik reageer er wat fel op. Ik ben er gewoon niet zo van gediend dat mensen uit onwetendheid maar dingen gaan lopen impliceren. Je kan ook eerst vragen naar de reden van mijn eerdere statement. Was that so much to ask? Echt hoor.

[NMe]

croontje schreef op woensdag 17 november 2010 @ 23:21:
Als ik zo even rondgoogle zie ik toch "CSS specialisten" die ook *{} gebruiken om margins op 0 te zetten of zelfs volledige reset style sheets.

Echte CSS-specialisten of van die self-proclaimed CSS-specialisten?

[jmxd]

NMe schreef op donderdag 18 november 2010 @ 00:19:
[...]

Echte CSS-specialisten of van die self-proclaimed CSS-specialisten?

Is een redelijk well-known "hack" om alle margins op 0 te zetten.. waar o.a. ook specialisten gebruik van maken, ik noem bijvoorbeeld een Dan Cederholm

[X-Lars]

@TS, die

code:

width: (100%-250px);

is volgens mij iets voor CSS3 (en je gebruikt een incorrecte syntax). Check eventueel dit: http://www.w3.org/TR/css3-values/#calc. Weet niet welke browsers dit ondersteunen.

En om het hier nog wat gezelliger te maken: Dan Cederholm is ook maar een mens, net als Eric Meyer, of degene die 'm geknutseld heeft bij YUI (nofi).

Vroeger was het een trend om werkelijk alles pixel-perfect te willen krijgen, maar daar zijn we nu toch ook wel een beetje vanaf mag ik hopen? Voor je globale grids en boxes is dat makkelijk genoeg, maar browsers hebben nou eenmaal verschillen wat betreft o.a. form controls (bijv. selects of buttons).

Er zitten twee nadelen aan die * rule, omvangrijke css resets en css frameworks: je bent bezig om de boel eerst te resetten om het vervolgens weer helemaal op te gaan bouwen, en daarnaast is het ook nog eens nadelig voor de performance (en ja, dat telt nog steeds). Niets van genoemde wint mij tijd bij het ontwikkelen van welke website dan ook.

Sorry, moest ik ook even kwijt.

/me X-Lars houdt nog steeds van pure, hand-crafted client-side code. Less is more.

offtopic:
Valt me overigens wel vaak op dat juist de off-topic discussies hier tenminste ergens over gaan (i.t.t. de TS's zelf).

[NMe]

offtopic:
Dit is meer offtopic dan we sowieso al gegaan zijn in dit topic maar ik zeg het toch: goede discussies krijg je zelden tot nooit omdat iemand bij zichzelf denkt dat het tijd is voor een leuke discussie en hem vervolgens opstart. Goeie discussies evolueren uit gesprekken en andere discussies, wat ook de reden is dat ik weinig bezwaar heb tegen offtopic gaan. Indien nodig splitsen we wel een en ander af naar een nieuw topic.

Inhoudelijk, wat betreft de offtopic discussie: het eerste punt van Cheatah is vrij belangrijk: waar jouw layout niet stuk gaat op ietwat afwijkende marges, paddings en andere maten kun je beter uitgaan van user- en browserdefaults. Anders krijg je bijvoorbeeld weer van die slecht toegankelijke sites voor (visueel) gehandicapten of gewoon slecht schalende sites in het algemeen, nog los van het feit dat ik zelf stylesheets wil kunnen instellen in mijn browser. Zo min mogelijk definieren zonder de layout te breken is IMO the way to go. Less is more.

[mcDavid]

Herko_ter_Horst schreef op woensdag 17 november 2010 @ 23:22:
Als je cross-browser controle wilt over hoe je pagina eruit ziet, zul je toch zelf wat moeten regelen, aangezien er geen standaard is die beschrijft hoe een element er uit zou moeten zien. Als morgen een willekeurige browser beslist om links niet meer in blauw en onderstreept weer te geven, maar in pimpelpaars met een groen randje, zie jouw pagina er niet meer uit.

Het punt is alleen, dat je dat allang doet, ook zonder reset. Als ik een website maak, maak ik ieder element in de template op. Een reset is daarvoor dus onnodig, aangezien die toch volledig overschreven wordt. Waar ik echter GEEN controle over heb, en ook niet WIL hebben, is de content. Die hoeft absoluut niet pixelperfect te zijn, en kán dat ook niet zijn. Als je dat wel wilt moet je je website uploaden als één grote PNG afbeelding, en dat dat niet de bedoeling is zijn we het denk ik allemaal over eens.
Voor de content zou je na een reset zelf weer een complete default stylesheet moeten maken. Die weer de nodige kans op incompatibiliteit met toekomstige browsers heeft. En dat alles terwijl de browsers default stylesheet (evt. met een paar kleine toevoegingen zoals font-style, line-height, color enz.) prima voldoet. Als je website dusdanig in elkaar zit dat door kleine verschillen in de opmaak van de content je hele layout over de zeik gaat, is er in mijn ogen sowieso iets fundamenteel mis met je structuur.

Ik heb vroeger weleens zo'n reset geprobeerd, maar kwam er al snel achter dat mijn stylesheets 2x zo lang werden, alleen maar door het ongedaan maken van de eerdere reset. Gewoon extra werk voor noppes dus.

Overigens, om misverstand te voorkomen, ik ben ook "maar" een hobbyist.

-edit-
En om even terug te komen op de originele discussie, en om de reden dat ik dit zei:

Het is offtopic, maar alle margins maar resetten omdat je niet snapt hoe een browser werkt vind ik nogal lomp. Een beetje van het zelfde niveau als mensen die hun hele computer opnieuw installeren omdat ze het geluid niet van mute af krijgen ofzo.

In het begin werd het resetten aangedragen als mogelijke (niet eens werkende) oplossing voor een klein probleempje. En dat illustreert in mijn ogen hoe er vaak met een reset omgegaan wordt. Mensen snappen iets niet en besluiten dan maar een reset toe te passen zonder ook daar weer de gevolgen van in te zien. In het geval van TS bijvoorbeeld, had hij een prima website gehad door bij het juiste element de margin weg te halen. Door het toepassen van een reset zou hij praktisch overnieuw moeten beginnen, en allemaal elementen waar hij nog nieteens over nagedacht had tot in detail moeten specificeren. Terwijl het voor de bezoeker geen enkel verschil zou maken.

[ Voor 21% gewijzigd door mcDavid op 18-11-2010 09:28 ]

[X-Lars]

Kom net dit tegen (zonder bijsluiter): http://sixrevisions.com/css/the-history-of-css-resets/

[Bosmonster]

Het nadeel van CSS-resets is dat het je iets simpels uit handen neemt, maar heel veel werk teruggeeft.

Als je bijvoorbeeld een CMS gebruikt waarin gebruikers een wysiwyg-editor kunnen gebruiken, betekent dit dat je voor die elementen alles weer opnieuw in moet stellen, zoals lists. Dit terwijl de browser je voor dit soort content meestal prima de standaard browser-afhandeling had kunnen gebruiken.

Mijn voorkeur gaat dan ook uit naar properties aanpassen waar nodig, ipv domweg maar alles resetten.

Ik heb dan ook het idee dat CSS-resets voornamelijk worden gebruikt door developers die weinig kennis hebben van hoe de basis opzet is van CSS en doctypes/rendermodes. Of misschien door developers die voornamelijk voor zichzelf ontwikkelen en weinig met real life commerciele projecten te maken hebben.

[ Voor 36% gewijzigd door Bosmonster op 02-12-2010 13:54 ]