[HTML/CSS] Problemen in Firefox - Softwareontwikkeling

woensdag 26 november 2008 19:11

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Hallo,

Ik nogal een eigenaardig probleempje in Firefox 2 en 3. Ben even een site aan het maken, maar wanneer ik deze open, print Firefox er een witregel boven met "ï»¿" terwijl dit nergens in de code staat. In andere browsers (google chrome, internet explorer, etc. Mijn (X)HTML en CSS zijn helemaal valid volgens het W3C.

Hier een plaatje om te verduidelijken wat ik bedoel.

Mijn vraag is: Hoe kan dit en hoe kan ik dat dingetje daar vandaan krijgen?

Ook nog de code:

XML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed)</title>
<link rel='stylesheet' type='text/css' href='reset.css' />
<link rel='stylesheet' type='text/css' href='link.css' />
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#topsection{
background: #EAEAEA;
height: 100px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 0px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
padding: 5px;}

#leftcolumn{
float: left;
width: 230px; /*Width of left column*/
margin-left: -99.9%;
background: #C8FC98;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at enim vel sapien varius porttitor. Donec vel metus. Phasellus felis neque, porttitor vel, scelerisque in, hendrerit eu, sem. Aliquam tortor. Integer a erat. Maecenas non nunc quis justo elementum venenatis. Phasellus semper rhoncus mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut elit eros, tempus eu, fermentum at, ultricies nec, augue. Fusce hendrerit, orci at dapibus pulvinar, diam massa luctus neque, id tincidunt nibh ipsum a erat. Aenean sodales erat at lectus. Sed facilisis dictum justo. Suspendisse turpis. Donec tempus, mi id laoreet bibendum, metus elit pharetra lorem, id ullamcorper massa ligula et ipsum. Sed ut velit ut justo tempor porta. Nam ac metus. Morbi tempor turpis nec sem. Aliquam malesuada odio in nisl. Quisque tincidunt bibendum est. Cras tristique consequat tellus.
<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at enim vel sapien varius porttitor. Donec vel metus. Phasellus felis neque, porttitor vel, scelerisque in, hendrerit eu, sem. Aliquam tortor. Integer a erat. Maecenas non nunc quis justo elementum venenatis. Phasellus semper rhoncus mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut elit eros, tempus eu, fermentum at, ultricies nec, augue. Fusce hendrerit, orci at dapibus pulvinar, diam massa luctus neque, id tincidunt nibh ipsum a erat. Aenean sodales erat at lectus. Sed facilisis dictum justo. Suspendisse turpis. Donec tempus, mi id laoreet bibendum, metus elit pharetra lorem, id ullamcorper massa ligula et ipsum. Sed ut velit ut justo tempor porta. Nam ac metus. Morbi tempor turpis nec sem. Aliquam malesuada odio in nisl. Quisque tincidunt bibendum est. Cras tristique consequat tellus.
</p>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>230px</em></b> <script type="text/javascript">filltext(20)</script></div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at enim vel sapien varius porttitor. Donec vel metus. Phasellus felis neque, porttitor vel, scelerisque in, hendrerit eu, sem. Aliquam tortor. Integer a erat. Maecenas non nunc quis justo elementum venenatis. Phasellus semper rhoncus mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut elit eros, tempus eu, fermentum at, ultricies nec, augue. Fusce hendrerit, orci at dapibus pulvinar, diam massa luctus neque, id tincidunt nibh ipsum a erat. Aenean sodales erat at lectus. Sed facilisis dictum justo. Suspendisse turpis. Donec tempus, mi id laoreet bibendum, metus elit pharetra lorem, id ullamcorper massa ligula et ipsum. Sed ut velit ut justo tempor porta. Nam ac metus. Morbi tempor turpis nec sem. Aliquam malesuada odio in nisl. Quisque tincidunt bibendum est. Cras tristique consequat tellus.

</p>
</div>

<div id="footer"><p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml11"
        alt="Valid XHTML 1.1" height="31" width="88" /></a>
    <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a>
    <a href="http://jigsaw.w3.org/css-validator/">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valide CSS!" />
    </a>
</p>
       </div>

</div>
</body>
</html>

CSS reset style sheet

Cascading Stylesheet:

body,div,dl,dt,dd,ul,ol,li,h2,h3,h4,h5,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h2,h3,h5 {
    font-size:100%;
    font-weight:normal;
}
h4{text-align: right; font-size: 100%; font-weight:normal;}
h1{letter-spacing: -4px;}

q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}
h6{text-align: right}

en nog een style voor de links

Cascading Stylesheet:

A:link{color:#D50000;}
A:hover{color:#D50000;}
A:active{color:#D50000;}
A:visited{color:#D50000;}

Alvast bedankt

woensdag 26 november 2008 19:21

Acties:

0 Henk 'm!

mjax

Dat is de UTF-8 BOM. Save je file eens als Unix of DOS formaat.

woensdag 26 november 2008 19:30

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Oeh dankjewel! Ik heb het nu opgelost, geloof ik

.
Het enige wat er moest gebeuren was de regel

HTML:

1	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

te vervangen door

HTML:

1	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

woensdag 26 november 2008 19:36

Acties:

0 Henk 'm!

Verwijderd

mjax schreef op woensdag 26 november 2008 @ 19:21:
Dat is de UTF-8 BOM.

Inderdaad, in welke tekstverwerker heb je dit opgeslaan? In Notepad++ kan je dit opslaan zonder de UTF-8 BOM.

Edit, je was me voor.

[ Voor 5% gewijzigd door Verwijderd op 26-11-2008 19:37 ]

woensdag 26 november 2008 19:38

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Heb het inderdaad in N++ geschreven...

Hoe kan je dit dan doen?

woensdag 26 november 2008 20:35

Acties:

0 Henk 'm!

Verwijderd

Verwijderd schreef op woensdag 26 november 2008 @ 19:38:
Heb het inderdaad in N++ geschreven...

Hoe kan je dit dan doen?

In Notepad++:
Settings/Preferences/New Document/

Hoogst waarschijnlijk staat daar een instelling verkeerd bij je.

woensdag 26 november 2008 22:10

Acties:

0 Henk 'm!

Sebazzz

3dp

En natuurlijk het codering menu. Unix met "UTF-8 zonder BOM" selecteren.

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

woensdag 26 november 2008 22:53

Acties:

0 Henk 'm!

ShadowrunR

Misschien ook handig, je kan de eerste regel van je CSS vervangen door:

Cascading Stylesheet:

* { 
    margin:0;
    padding:0;
}

woensdag 26 november 2008 22:56

Acties:

0 Henk 'm!

Knaak

It's me, Mario!

ShadowrunR schreef op woensdag 26 november 2008 @ 22:53:
Misschien ook handig, je kan de eerste regel van je CSS vervangen door:
Cascading Stylesheet:
1
2
3
4
* { 
    margin:0;
    padding:0;
}

Dat kán, maar zorgt voor onnodige load op de server. De methode die al word gebruikt is vele malen beter.

Echter is dat een heel ander onderwerp he

woensdag 26 november 2008 23:58

Acties:

0 Henk 'm!

Bosmonster

*zucht*

MOAW schreef op woensdag 26 november 2008 @ 22:56:
[...]

Dat kán, maar zorgt voor onnodige load op de server. De methode die al word gebruikt is vele malen beter.

Echter is dat een heel ander onderwerp he

Huh?

De CSS wordt kleiner, dus de load op je server zal er alleen maar minder van worden (voor zover dat uberhaupt een issue is natuurlijk).

De methode die al wordt gebruikt slaat nergens op, dus vele malen beter is wel soort van een overstatement

Gebruik gewoon de * als je alles wilt targeten.

donderdag 27 november 2008 00:32

Acties:

0 Henk 'm!

curry684

left part of the evil twins

MOAW schreef op woensdag 26 november 2008 @ 22:56:
[...]

Dat kán, maar zorgt voor onnodige load op de server.

Hoe gaat een simpele CSS-wijziging als dat de load op je server verhogen?

Professionele website nodig?

donderdag 27 november 2008 08:31

Acties:

0 Henk 'm!

Verwijderd

MOAW bedoelt waarschijnlijk dat het zorgt voor onnodige belasting van de browser doordat je die eigenschappen expliciet toewijst op élk element. Dit kost geheugen/parsetijd aan de clientzijde. Eigenlijk moet je het gebruik van * in je stylesheet vermijden, ook omdat je stylesheet er door de impact van dergelijke veranderingen zeker niet overzichtelijker wordt.

Deze constructie wordt door n00bs vaak onterecht gebruikt voor CSS-eigenschappen als font-family, die gewoon geïnherit worden door child elementen en waarbij het dus volstaat om deze op de body te gooien (en eventueel toe te wijzen aan specifieke elementen die de gewenste eigenschap niet inheriten maar die je wel dezelfde uitstraling wilt geven).

Sowieso vraag ik me af waarom je van al deze elementen de padding en margin in één keer zou willen verwijderen. Witruimte maakt een website beter leesbaar, niet voor niks hebben bepaalde elementen in HTML standaard paddings en/of margins mee. Ook wordt je stylesheet onoverzichtelijk op het moment dat je op één plek dit soort eigenschappen voor een groot aantal items wijzigt om hier later op voort te borduren.

Ook zou ik in jouw geval de CSS die je in de head van je html hebt staan gewoon even in een extern bestand plaatsen. Over het onnodig het internet oversturen van code gesproken... ;-)

donderdag 27 november 2008 08:36

Acties:

0 Henk 'm!

Sebazzz

3dp

Verwijderd schreef op donderdag 27 november 2008 @ 08:31:
MOAW bedoelt waarschijnlijk dat het zorgt voor onnodige belasting van de browser doordat je die eigenschappen expliciet toewijst op élk element. Dit kost geheugen/parsetijd aan de clientzijde.

Dat betwijfel ik, hij heeft het toch echt over zijn server

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

donderdag 27 november 2008 09:42

Acties:

0 Henk 'm!

Da Weef

Sowieso vraag ik me af waarom je van al deze elementen de padding en margin in één keer zou willen verwijderen. Witruimte maakt een website beter leesbaar, niet voor niks hebben bepaalde elementen in HTML standaard paddings en/of margins mee. Ook wordt je stylesheet onoverzichtelijk op het moment dat je op één plek dit soort eigenschappen voor een groot aantal items wijzigt om hier later op voort te borduren.

Ideaal ja, die standaard padding en marges die voor elke browser weer anders zijn... Gebruik van een asteriks is prima voor niet al te complexe websites. Dat gedoe over de load is trouwens ook wel erg in de marge, zeker in vergelijking met alle bergen javascript die worden ingezet.

Maargoed in principe is het inderdaad beter om een voorgekauwde CSS-reset te gebruiken. Dat is eenvoudiger om te overzien, maar belangrijker is dat het gebruik van een asterisk ook weer bepaalde browser inconsistenties met zich meebrengt. Echter zul je deze niet snel tegenkomen bij eenvoudige sites.

.

donderdag 27 november 2008 10:56

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Ik denk dat het meer parse-tijd kost om een hele lijst elementen te splitten en vervolgens aan bijna alle elementen toe te wijzen, dan in 1 karakter te zeggen dat het aan alle elementen moet komen.

Daarnaast vermijd ik liever *-constructies. Als je marges/paddings wil resetten, doe dat dan daar waar nodig.

donderdag 27 november 2008 11:20

Acties:

0 Henk 'm!

Da Weef

Als je marges/paddings wil resetten, doe dat dan daar waar nodig.

Ik zie wel degelijk toegevoegde waarde in een algemene reset met of zonder asterisk. Tuurlijk is het mogelijk om bij elk element dat wordt geïntroduceerd padding en marges te (re)setten. Echter werkt het in mijn ogen veel eenvoudiger en robuuster als de uitgangswaarde (voor alle browsers) nul is.
Die extra load een CSS-reset met zich meebrengt is daarbij in mijn ogen verwaarloosbaar.

.

donderdag 27 november 2008 11:57

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Het gaat mij ook niet om de 'load', dat is sowieso een non-issue dat voor een of andere reden ter sprake werd gebracht, maar natuurlijk nergens op slaat.

Het gaat mij om de onderhoudbaarheid en overzichtelijkheid. Stel je krijgt content uit een CMS, dan wil je niet alle standaarden weer opnieuw mogen zetten, bijvoorbeeld op de lists. Althans, ik heb daar niet zo'n behoefte aan, dan kost dat leuke resetje me meer tijd dan het oplevert.

Ik probeer daarom met een grote boog om *-definities heen te lopen. Het maakt de code onvoorspelbaar in een dynamische omgeving. Maar ik ben dan in het algemeen al geen fan van reset-stylesheets, om dezelfde reden.

[ Voor 19% gewijzigd door Bosmonster op 27-11-2008 12:00 ]

donderdag 27 november 2008 12:00

Acties:

0 Henk 'm!

curry684

left part of the evil twins

Bosmonster schreef op donderdag 27 november 2008 @ 10:56:
Daarnaast vermijd ik liever *-constructies. Als je marges/paddings wil resetten, doe dat dan daar waar nodig.

Het probleem is dat je niet weer waar het nodig is omdat morgen een nieuwe browser kan komen die weer een andere default stylesheet bedacht heeft, of Google besluit dat Chrome's default CSS bij beta 25 weer net andere margins heeft. Ik prefereer zelf ook de * variant voor margins en paddings, qua load is het bullshitargument voor browsers op een snellere CPU dan een Pentium 90.

[ Voor 7% gewijzigd door curry684 op 27-11-2008 12:01 ]

Professionele website nodig?

donderdag 27 november 2008 13:30

Acties:

0 Henk 'm!

Verwijderd

Als je weet welke eigenschappen verschillen tussen browsers (met een goede doctype is dit hooguit een handjevol) dan kun je deze gewoon vastzetten in je normale CSS-selectors voor deze elementen.

Als je er nu al vanuit gaat dat er een browser zal komen die op een bepaalde CSS-eigenschap afwijkt van de properties die jij al zelf hebt opgegeven, dan ben je maanden met 1 site bezig. Zeker in een situatie waarin browsers steeds meer de standaarden opzoeken is het makkelijker om achteraf zo'n hypothetisch bugje op te lossen, dan nu overal rekening mee te gaan lopen houden. Als elke designer zo denkt worden browserbouwers ook niet gestimuleerd om over webstandaarden na te denken.

Ik begrijp daarnaast echt niet de logica om alles maar op 0 te zetten. Waarom juist 0 pixels? Je zult verderop in je stylesheet immers voor gebruikte elementen alsnog weer een specifieke waarde opgeven omdat margins en paddings op 0 bij o.a. lists en headings niet echt overzichtelijk is. Je loopt dus dubbel werk te doen.

Natuurlijk kunnen moderne pc's dit alles makkelijk aan, maar als je de hoeveelheid CSS-code minimaliseert is dit toch echt wel merkbaar.

donderdag 27 november 2008 13:38

Acties:

0 Henk 'm!

Verwijderd

Alle margins en paddings lijkt een beetje op het wiel opnieuw uitvinden.

Ik heb doorgaans weinig last van afwijkende default stylesheets. Lists in IE en FF gebruiken padding-left of juist margin-left, een paragraph in IE heeft geen margin-bottom, maar verder?

Daar komt nog bij dat je het de gebruiker onmogelijk maakt een eigen default stylesheet te handhaven. Hoe minder je onnodig aanpast, hoe beter de usability.