[HTML/CSS] Crossbrowser oplossing voor boxmodel probleem? - Softwareontwikkeling

maandag 26 september 2005 20:21

Acties:

It's Britney, b*tch!

Topicstarter

Ik ben onlangs begonnen met het maken van een nieuwe site op basis van layers. Dit ging in eerste instantie goed totdat ik een padding ging opgeven. In IE maakte de padding deel uit van de breedte en hoogte van de layers dus hier geen problemen. In FF echter wordt de padding bij de opgegeven breedte en hoogte bijgeteld wat bijgevolg m'n hele layout overhoop haalde. Op dat moment gebruikte ik het volgende doctype (die door Dreamweaver MX standaard wordt ingevoegd):

code:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Daarom besloot ik wat onderzoek te verrichten en vond ik volgende code die in de CSS moet worden toegevoegd:

code:

*
{
box-sizing: content-box;
-moz-box-sizing: content-box;
}

Deze loste het probleem idd wel op in FF maar is, als ik me niet vergis, een CSS3 specificatie en dus weinig crossbrowser vriendelijk.
Toen vond ik een andere oplossing in de vorm van volgende doctype:

code:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Door deze aanpassing ging mijn site er in IE dan net zo uitzien als in FF in het begin. Dan restte mij enkel de padding van de breedten en hoogten af te trekken en klaar is kees

.

Nu vroeg ik mij dus af of deze laatste oplossing dan wel effectief crossbrowser vriendelijk is. Ik heb heel wat topics hier gelezen en het web afgeschuimd maar zo kwam ik soms tegenstrijdige beweringen tegen en vervolgens raakte ik het helemaal kwijt

. Als deze oplossing idd niet crossbrowser vriendelijk is, dan had ik van jullie graag betere oplossingen gehoord. Ik hecht in dit geval vrij veel belang aan het crossbrowser niveau dus helemaal volgens de standaarden van W3C hoeft het dus niet te zijn (maar hoe dichter bij de standaarden, hoe beter natuurlijk

). Ik zal ter volledigheid ook nog ff mijn HTML en CSS code meegeven:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Titel</title>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<link rel="stylesheet" type="text/css" href="Stylesheets/style.css">
</head>

<body style="text-align: center">
  <div id="layerContainer"> 
    <div id="layerHeader"> content </div>
    <div id="layerWelcome"> content </div>
    <div id="layerLeft"> content </div>
    <div id="layerRight"> content </div>
  </div>
</body>

Cascading Stylesheet:

body
{
    margin: 0px;
    padding: 0px;
    font-family: Tahoma;
    font-size: 8pt;
    scrollbar-arrow-color : white;
    scrollbar-face-color : #603A3A;
    scrollbar-3dlight-color : white;
    scrollbar-highlight-color : #603A3A;
    scrollbar-shadow-color : #603A3A;
    scrollbar-darkshadow-color : black;
    scrollbar-track-color : #603A3A;
    background-image: url(../Images/Background.jpg);
    background-attachment: fixed;
    background-repeat: repeat;
}

p#titleWelcome
{
    display: inline;
    font-size: medium;
    font-weight: bold;
    color: #47603A;
}

div#layerContainer
{
    text-align: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 780px;
    height: 100%;
}

div#layerHeader
{
    width: 780px;
    height: 529px;
    background-image: url(../Images/Header.jpg);
}

div#layerWelcome
{
    width: 780px;
    background-color: #FFFFFF;
}

div#layerLeft
{
    float: left;
    text-align: left;
    width: 160px;
    height: 360px;
    background-color: #FFFFFF;
    padding: 20px;
}

div#layerRight
{
    float: right;
    text-align: left;
    width: 540px;
    height: 540px;
    background-color: #EEEEEE;
    padding: 20px;
}

maandag 26 september 2005 20:27

Acties:

Borizz

Ik doe het zelf ook op deze manier, voor alle browsers die volgens de W3C standaarden werken is dit zowiezo geen probleem alleen Internet Explorer gaat bij oudere versies de mist in volgens mij. Van Internet Explorer versie > 5, weet ik zeker dat het goed gaat.

edit: Voor zover iets goed kan gaan in Internet Explorer dan he

!

[ Voor 14% gewijzigd door Borizz op 26-09-2005 20:28 ]

If I can't fix it, it ain't broken.

maandag 26 september 2005 20:33

Acties:

fanatic_david

It's Britney, b*tch!

Topicstarter

Borizz schreef op maandag 26 september 2005 @ 20:27:
Ik doe het zelf ook op deze manier, voor alle browsers die volgens de W3C standaarden werken is dit zowiezo geen probleem alleen Internet Explorer gaat bij oudere versies de mist in volgens mij. Van Internet Explorer versie > 5, weet ik zeker dat het goed gaat.

edit: Voor zover iets goed kan gaan in Internet Explorer dan he !

Alles boven versie 5 is al vrij goed. Ik vermoed dat de bezoekers van mijn site ook met oudere versies zullen afkomen maar dit zal ik pas kunnen bevestigen eens mijn site een tijdje heeft gedraaid.

Btw...vergis ik mij of is FF de browser die het beste aanleunt tegen de standaarden? Ik heb mijn laatste oplossing namelijk toegepast omdat ik ervan uit ging dat het in FF wel het meest correct werd weergegeven.

maandag 26 september 2005 20:35

Acties:

Borizz

FF implementeert de standaarden veel beter dan Internet Explorer inderdaad, maar ook andere browsers doen dat goed zoals Opera en Safari!

If I can't fix it, it ain't broken.

maandag 26 september 2005 20:35

Acties:

cyberstalker

Eersteklas beunhaas

Firefox is redelijk strict met de standaarden ja. Hoewel ze wel enige compromissen hebben gemaakt, zoals ondersteuning voor document.all e.d.

Als ik me niet vergis is Opera van de moderne browsers het meest strict met standaarden.

Ik ontken het bestaan van IE.

maandag 26 september 2005 21:16

Acties:

fanatic_david

It's Britney, b*tch!

Topicstarter

Als ik het dus goed begrijp zal met mijn huidige oplossing mijn site goed te bezichtigen zijn in zowat alle browsers behalve IE (de oudere versies van deze althans). Dat is knap lastig

.

Heeft er iemand nog alternatieve oplossingen? Ik had anders ook al gelezen over het gebruik van 2 of meer stylesheets, of het gebruik van een "selectie" binnenin 1 stylesheet. Iemand hierover meer?

dinsdag 27 september 2005 00:35

Acties:

Boelie-Boelie

Een correct doctype erboven zetten is idd in ieder geval al een manier om ervoor te zorgen dat browsers niet teveel van elkaar afwijken.

Er zijn diverse trucjes om ervoor te zorgen dat het ook in IE goed gaat. Je kunt in hetzelfde stylesheet voor de afmetingen van een box een waarde aangeven die alleen voor IE geldt, d.m.v. de Tan-hack.
Een andere manier is om IE een ander stylesheet te voeren, m.b.v. conditional comments.

Rekening houden met browsers ouder dan IE5 of NS6 is eigenlijk niet nodig, die gebruikt niemand meer. Deze browsers krijgen meestal een stylesheetloze site d.m.v. @import.

Cogito ergo dubito

dinsdag 27 september 2005 00:44

Acties:

Verwijderd

Wat je ook kunt doen is gebruik maken van een extra DIV. Zoals:

code:

1	<div style="width:600px"><div style="padding:10px">blabla</div></div>

Dit zorgt ervoor dat de breedte 600px blijft, ongeacht de padding (tenzij je een overflow krijgt). Werkt met zowel IE als Firefox met XHTML 1.1 afaik.

dinsdag 27 september 2005 00:57

Acties:

djluc

Verwijderd schreef op dinsdag 27 september 2005 @ 00:44:
Wat je ook kunt doen is gebruik maken van een extra DIV. Zoals:
code:
1
<div style="width:600px"><div style="padding:10px">blabla</div></div>
Dit zorgt ervoor dat de breedte 600px blijft, ongeacht de padding (tenzij je een overflow krijgt). Werkt met zowel IE als Firefox met XHTML 1.1 afaik.

Alleen voeg je dan elementen toe om de layout goed te krijgen. Dat is semantisch gezien natuurlijk niet aan te raden, je beschrijft de data niet beter hiermee. Zolang het niet nodig is zou ik daarom niet elementen toe gaan voegen aan je document.

dinsdag 27 september 2005 01:04

Acties:

disjfa

be

djluc schreef op dinsdag 27 september 2005 @ 00:57:
[...]
Alleen voeg je dan elementen toe om de layout goed te krijgen. Dat is semantisch gezien natuurlijk niet aan te raden, je beschrijft de data niet beter hiermee. Zolang het niet nodig is zou ik daarom niet elementen toe gaan voegen aan je document.

Sinds wanneer is het semantisch verkeerd een extra element toe te voegen om een manier van werken uniform te houden. De semantiek behoud je aangezien de inhoud van je document nog altijd net en overzichtenlijk is.

Verder voor de ts. Werk of met wat de meneer hierboven vertelt of speel met achtergrond plaatjes. Dat laatste kan je 9 van de 10 keer alles al mee doen wat je wilt.

Verder begrijp ik niet wat het box model met css3 te maken heeft aangezien css3 dit compleet anders intrepeteerd.

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 27 september 2005 02:24

Acties:

fanatic_david

It's Britney, b*tch!

Topicstarter

Boelie-Boelie schreef op dinsdag 27 september 2005 @ 00:35:
Een correct doctype erboven zetten is idd in ieder geval al een manier om ervoor te zorgen dat browsers niet teveel van elkaar afwijken.

Er zijn diverse trucjes om ervoor te zorgen dat het ook in IE goed gaat. Je kunt in hetzelfde stylesheet voor de afmetingen van een box een waarde aangeven die alleen voor IE geldt, d.m.v. de Tan-hack.
Een andere manier is om IE een ander stylesheet te voeren, m.b.v. conditional comments.

Rekening houden met browsers ouder dan IE5 of NS6 is eigenlijk niet nodig, die gebruikt niemand meer. Deze browsers krijgen meestal een stylesheetloze site d.m.v. @import.

Erg bedankt, jouw links hebben me goed geholpen $_/-\o_$ ! De oplossing, die ik had toegepast, bleek dus een stap in de goede richting daar ik IE6 in standards mode doe werken en hij de afmetingen dus net als FF interpreteert. Nu ga ik daar de Tan Hack aan toevoegen zodat het ook in IE5.x naar behoren zou moeten werken.

Verwijderd schreef op dinsdag 27 september 2005 @ 00:44:
Wat je ook kunt doen is gebruik maken van een extra DIV. Zoals:
code:
1
<div style="width:600px"><div style="padding:10px">blabla</div></div>
Dit zorgt ervoor dat de breedte 600px blijft, ongeacht de padding (tenzij je een overflow krijgt). Werkt met zowel IE als Firefox met XHTML 1.1 afaik.

djluc schreef op dinsdag 27 september 2005 @ 00:57:
[...]
Alleen voeg je dan elementen toe om de layout goed te krijgen. Dat is semantisch gezien natuurlijk niet aan te raden, je beschrijft de data niet beter hiermee. Zolang het niet nodig is zou ik daarom niet elementen toe gaan voegen aan je document.

Ik ben ook niet zo te vinden voor het toevoegen van extra elementen om de layout goed te krijgen. Daar moet ik djluc dus gelijk in geven.

disjfa schreef op dinsdag 27 september 2005 @ 01:04:
Verder begrijp ik niet wat het box model met css3 te maken heeft aangezien css3 dit compleet anders intrepeteerd.

Ik zei enkel dat het toevoegen van

code:

*
{
    box-sizing: content-box;
    -moz-box-sizing: content-box;
}

aan de stylesheet het probleem ook kon oplossen maar dit is een CSS3 specificatie en het gebruik ervan wordt net daarom niet aangeraden. Maar zoveel doet dat er eigenlijk ook niet toe want ik had het gebruik van deze code zelf al uitgesloten. Mijn html file deed toen IE6 nog in quirk mode draaien en met deze code ging je dan ook nog eens FF, die de standaarden op vlak van het boxmodel naleeft, "in de fout dwingen".