[CSS en DIV] Krijg het niet hezelfde in verschilende browser - Softwareontwikkeling

maandag 10 april 2006 19:34

Acties:

Greenthumb1982

Topicstarter

Ik zit met het volgende probleem, ik heb een website gemaakt bestaande uit 9 div's, zodat de achtergrondafbeelding juist wordt weergegeven bij verschillende resoluties.
Echter, als ik alles goed weergegeven krijg in Opera komen er fouten in de weergave in FF en IE, als het goed wordt weergegeven in FF zijn er fouten in IE en Opera enz.

Mijn css bestand ziet er als volgt uit:

Cascading Stylesheet:

.container
{
  height: 100%;
  padding-top: 88px;
  padding-bottom: 0px;
}

.middlecontainer
{
  position: relative;
  padding-bottom: 100px;
  height: 100%;
}

.leftcorner
{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 88px;
  width: 681px;
  background-image: url(images/leftcorner.jpg);
}

.header
{
  position: absolute;
  top:0px;
  left: 681px;
  right: 101px;
  height: 88px;
  width: 100%;
  background-image: url(images/header.jpg);
}

.rightcorner
{
  position: absolute;
  top: 0px;
  right: 0px;
  height: 88px;
  width: 101px;
  background-image: url(images/rightcorner.jpg);
}

.menu
{
  position: absolute;
  left: 0px;
  height: 100%;
  width: 252px;
  background-image: url(images/menu.jpg);
}

.content
{
  position: relative;
  height: 100%;
  margin-left: 252px;
  margin-right: 101px;
  margin-top: 0px;
  overflow: auto;
  background-image: url(images/content.jpg);
}

.right
{
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
  width: 101px;
  background-image: url(images/right.jpg);
}

.bottomleft
{  
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 80px;
  width: 252px;
  background-image: url(images/bottomleft.jpg);
}

.footer
{
  position: absolute;
  bottom: 0px;
  padding-top: 35px;
  left: 200px;
  right: 200px;
  height: 80px;
  width: 100%;
  background-image: url(images/footer.jpg);
  font-family: Arial;
  font-size: 8pt;
  text-align: center;
  font-weight: normal;
}

.bottomright
{
  position: absolute;
  right: 0px;
  bottom: 0px;
  height: 80px;
  width: 102px;
  background-image: url(images/bottomright.jpg);
}

.menuitem
{
  margin-left: 80px;
  margin-top: 100px;
  font-family: Times New Roman;
  font-size: 16px;
  color: black;
}

.h1
{
font-family: Arial;
font-size: 14pt;
color: #0066CC;
text-align: center;
}

.h2
{
font-family: Arial;
font-size: 14pt;
color: #0066CC;
text-align: left;
font-weight: bold;

}

.h3
{
font-family: Arial;
font-size: 9pt;
color: #333333;
text-align: center;
font-weight: bold;
}

.h4
{
font-family: Arial;
font-size: 9pt;
color: #333333;
text-align: left;
font-weight: bold;
}

.p
{
font-family: Arial;
font-size: 9pt;
color: #333333;
text-align: left;
font-weight: normal;
}

.p2
{
font-family: Arial;
font-size: 9pt;
color: #333333;
text-align: center;
font-weight: normal;
}

a:link {color: #0009c5}
a:visited {color: #0009c5}
a:hover {color: #0009c5}
a:active {color: #0009c5}

Ik heb een header en een footer bestand die ik dmv PHP include in mijn pagina.
De header broncode is als volgt:

HTML:

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

<html>
<head>
<title>Welkom bij Eldert PC Hulp</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
body
  {
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
    }
</style>
</head>
<body>
<div class="container">
         <div class="leftcorner"></div>
         <div class="header"></div>
         <div class="rightcorner"></div>
         <div class="middlecontainer">
                    <div class="menu">
                    <ul class="menuitem">
                        <li><a href="index.php" style="color: #000000;">Welkom</a></li>
                        <li><a href="information.php" style="color: #000000;">Wie zijn wij?</a></li>
                        <li><a href="currentprojects.php" style="color: #000000;">Huidige Projecten</a></li>
                        <li><a href="contact.php" style="color: #000000;">Contact</a></li>
                        <li><a href="sitemap.php" style="color: #000000;">Site Map</a></li>
                    </ul>
                    </div>

En de footer als volgt:

HTML:

            <div class="right"></div>
                    <div class="bottomleft"></div>
                    <div class="footer">
                          <p>|<a href="welcome.htm" style="color: #0000cc;">Welkom</a>|
                                 |<a href="information.htm" style="color: #0000cc;">Wie zijn wij?</a>|
                                   |<a href="current_projects.htm" style="color: #0000cc;">Huidige Projecten</a>|
                                   |<a href="contact.htm" style="color: #0000cc;">Contact</a>|
                                   |<a href="site_map.htm" style="color: #0000cc;">Site Map|</a>
                                </p>
                    </div>
                    <div class="bottomright"></div> 
         </div>
</div>
</body>
</html>

Één van de pagina's waar de fout optreedt is de volgende:

HTML:

<? include('header.htm'); ?>
                    <div class="content">
                    <h1 class="h1">Huidige Projecten<br>
                    <font class="h3">Hier zal ik u vertellen over de projecten waar wij op het moment mee bezig zijn.</font></h1>
<p class="h4"><a href="#TheTwilights">The Twilights</a><br>
<a href="#Somtrans">Somtrans NV</a><br>
<a href="#Steur">Steur VW Bus Onderdelen</a><br>
<a href="#Overigen">Overigen</a></p>
<br>
<h2 class="h2">The Twilights<a name="TheTwilights" id=
"TheTwilights"></a></h2>
<p class="p">The Twilights is een majorette- en twirling vereniging uit Rijen.<br>
Na te hebben gesproken met de voorzitter van deze vereniging bleek dat deze een simpele website wilden hebben.<br>
De bedoeling van deze website was om op een makkelijke en mooie manier meer informatie over de vereniging te geven.<br>
Tevens moest er de mogelijkheid aanwezig zijn om contact met de leden te kunnen onderhouden.<br>
Om dit alles te realiseren hebben wij besloten om op de website tevens een fotoalbum te plaatsen om ge&iuml;nteresseerden een beeld te geven van The Twilights.<br>
Ook hebben we er een forum opgezet om het contact met de leden en niet-leden te onderhouden.<br>
Er is hier voor een forum gekozen omdat er op deze manier een onderscheid kan worden gemaakt in welke bezoeker welke informatie kan zien.<br>
Immers niet iedereen mag bijvoorbeeld informatie over de wedstrijden zien.<br>
Ook verzorgen wij voor The Twilights het onderhoud van de website en zorgen wij dat de website op het internet staat en aangemeld is bij de diverse zoekmachines.<br>
Mocht u ook de website van The Twilights willen bezoeken dan kunt u deze vinden op <a href="http://twilights.eldert.org" target="_blank">twilights.eldert.org</a></p>
<br>
<br>
<h2 class="h2">Somtrans NV<a name="Somtrans" id="Somtrans"></a></h2>
<p class="p"><a href="http://www.somtrans.be" target="_blank">Somtrans NV</a> is een rederij en bevrachtingkantoor voor de tankvaart.<br>
Voor dit bedrijf hebben wij een programma gemaakt waarin de diverse documenten kunnen worden bijgehouden.<br>
Zo zitten er onder andere een kasboek in, een overzicht van hoeveel filters er nog aanwezig zijn en wordt er bijgehouden wanneer er weer olie of filters moeten worden gewisseld.<br>
Dankzij dit programma is de kans op fouten bij het onderhoud en opstellen van de documenten verkleind.<br>
Tevens is er nu een standaard aanwezig op de schepen, zodat op welk schip men ook is, men altijd dezelfde documenten gebruikt.<br>
Zoals u wel zult begrijpen is dankzij dit programma de efficiency waarmee op de schepen wordt gewerkt nu verhoogd.<br>
Dit programma wordt per schip op maat gemaakt, zodat altijd de juiste informatie voor dat schip aanwezig is.<br>
Mocht u meer informatie over dit programma willen kunt u uiteraard <a href="mailto:info@eldert.org">contact</a> met ons opnemen.</p>
<br>
<br>
<h2 class="h2">Steur VW Bus Onderdelen<a name="Steur" id="Steur"></a></h2>
<p class="p">Dit is een klein bedrijfje dat is gespecialiseerd in het repareren en onderhouden van onderdelen voor Volkswagen busjes.<br>
Ze kopen diverse tweedehands busjes op om hiervan de onderdelen te restaureren, of om zelfs de hele busjes te restaureren.<br>
Er is besloten om een simpel ontwerp te houden voor de website, het belangrijkste moest zijn om eventuele klanten een beeld te geven van de onderdelen die op voorraad zijn.<br>
Verder moest er makkelijk vanaf de website contact kunnen worden opgenomen met de eigenaren.<br>
Ook voor deze website verzorgen wij het onderhoud, en zorgen dus ook dat er altijd de meest recente aanwezige onderdelen op staan.<br>
Uiteraard is ook deze website aangemeld bij de diverse zoekmachines.<br>
Mocht u de website van Steur VW Bus Onderdelen willen bezoeken dan gaat u naar <a href="http://steur.eldert.org" target="_blank">steur.eldert.org</a></p>
<br>
<br>
<h2 class="h2">Overigen<a name="Overigen" id="Overigen"></a></h2>
<p class="p">Verder verzorgen wij het onderhoud voor diverse mensen aan de computers.<br>
Dit varieert van maandelijks een grondige schoonmaak op de computer uit te voeren tot het herinstalleren van Windows en het op maat bouwen van computers naar de wensen van de klant.<br>
Uiteraard kunt u ook hierover <a href="mailto:info@eldert.org">contact</a> met ons opnemen.</p>
                    </div>
<? include ('footer.php'); ?>

De volledige website in testopstelling is te vinden op test.eldert.org, zodat jullie kunnen zien dat het ook per pagina verschilt.
Ik heb al diverse zaken proberen te veranderen, zoals de onderste 3 DIV's ook weer in een aparte container-div te plaatsen.
Ook heb ik geprobeerd om de css aan te passen, echter ook hier kom ik er niet verder mee.
Ik hoop dat jullie me kunnen helpen.

maandag 10 april 2006 19:40

Acties:

Verwijderd

misschien kan je wat minder lappen html neerplempen, wat duidelijker omschrijven wat er misgaat, misschien wat screenshotjes met pijlen etc aangeven, want het is voor mij erg onduidelijk wat er nu aan de hand is

wat me wel opvalt:

HTML:

<h2 class="h2">
<p class="p">
<p class="h4">
<font class="h3">

wtf wil je hiermee? selectors kunnen meer dan alleen klassen selecteren, juist zo weinig mogelijk klassen gebruiken en zoveel met direct elementen selecteren

en waarom zo enorm veel lege divs?

[ Voor 22% gewijzigd door Verwijderd op 10-04-2006 19:43 ]

maandag 10 april 2006 19:42

Acties:

Verwijderd

Mja, wát is nu de fout dan?

Ik heb persoonlijk niet veel trek om de pagina pixel voor pixel af te speuren in verschillende browsers, als je begrijpt wat ik bedoel.

Een screenshotje zou al een stuk helpen, bijvoorbeeld.

maandag 10 april 2006 19:43

Acties:

JHS

Splitting the thaum.

Ik zou als eerste een (compleet) doctype gebruiken wat alledrie de browsers in standardsmode duwt,

HTML:

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

bijvoorbeeld

.

Daarnaast kan je de resterende verschillen met een via conditional comments geïncluded iefix.css bestand wel oplossen.

DM!

maandag 10 april 2006 19:55

Acties:

Verwijderd

JHS schreef op maandag 10 april 2006 @ 19:43:
Daarnaast kan je de resterende verschillen met een via conditional comments geïncluded iefix.css bestand wel oplossen.

Ik kan me niet voorstellen dat er met deze HTML ook maar een beetje verschil per browser zou kunnen ontstaan.

maandag 10 april 2006 20:01

Acties:

Greenthumb1982

Topicstarter

Oke, sorry als ik me eigen niet duidelijk genoeg gemaakt had, ik heb hier een aantal screenshots gemaakt van wat er zoal fout gaat.

Dit is zoals het zou moeten zijn, in dit geval doet hij het in IE.
Screenshot 1

Dit is wat hij dan geeft in FF:
Screenshot 2

En dit is de uitkomst in Opera:
Screenshot 3

Ook geeft hij bij FF in dit geval geen scrollbalk als de inhoud van het content frame te veel is, wat die wel zou moeten doen, immers ik heb aangegeven

[code = css]
overflow: auto;
[code]

in de content css.
Hopelijk is het zo duidelijker.

En JHS, als ik die DocType gebruik dan krijg ik de volgende output:
Screenshot 4
Zoals je ziet gaat het nu dus helemaal fout.
Ik zal eens kijken met andere DocTypes of ik hiermee verder kom, maar ondertussen is alle hulp welkom.

[ Voor 19% gewijzigd door Greenthumb1982 op 10-04-2006 20:06 . Reden: Links aangepast ]

maandag 10 april 2006 20:16

Acties:

JHS

Splitting the thaum.

Greenthumb schreef op maandag 10 april 2006 @ 20:01:
En JHS, als ik die DocType gebruik dan krijg ik de volgende output: Screenshot 4. Zoals je ziet gaat het nu dus helemaal fout.

En dat geeft lijkt me al aan dat je implementatie afhangt van de quirksmode van verschillende browsers, wat het een stuk moeilijker maakt om het allemaal hetzelfde te laten doen

. Persoonlijk zou ik met een standardsmode afdwingend doctype gaan devven, met Firefox om je implementatie in eerste instantie te controleren.

Maargoed, dat laat niet onverlet dat je problemen mogelijk wel opgelost kunnen worden. Ik zou overigens zeker even kijken naar de opmerking van /me . Daarnaast gebruik je heel veel absolute positionering, wat het in mijn ogen al een stuk moeilijker maakt om alles in orde te krijgen. Ik zou veel meer gebruik maken van de flow van de pagina

.

Ik zal eens kijken met andere DocTypes of ik hiermee verder kom, maar ondertussen is alle hulp welkom.

In principes zijn er zover ik weet maar drie 'typen' doctypes: de een dwingt standardsmode af, de ander quirksmode, en dan zijn er nog sommige browsers waarin 'almost standardsmode' tevoorschijn komt. Almost standardsmode heeft volgens mij echter alleen maar te maken met vertical table sizing, dus dat maakt verder niet zo veel uit. Zie verder deze pagina: http://hsivonen.iki.fi/doctype/ .

DM!

maandag 10 april 2006 20:36

Acties:

Greenthumb1982

Topicstarter

Verwijderd schreef op maandag 10 april 2006 @ 19:40:
wat me wel opvalt:
HTML:
1
2
3
4
<h2 class="h2">



wtf wil je hiermee? selectors kunnen meer dan alleen klassen selecteren, juist zo weinig mogelijk klassen gebruiken en zoveel met direct elementen selecteren

en waarom zo enorm veel lege divs?

De class selectors zijn er om in het css bestand de juiste opmaak te selecteren, deze heb ik namelijk genoemd zoals de tag zou zijn.

De lege divs zijn er om de achtergrond juist weergegeven te krijgen, alle divs bevatten namelijk in ieder geval een achtergrond afbeelding.
Het idee was om de achtergrond zo te laten weergeven, zodat de afbeelding bij verschillende resoluties nog wel zou kloppen.
Als iemand hier een betere manier voor weet zou ik die graag weten, ik ben namelijk nog behoorlijk nieuw met CSS + DIV, ik gebruikte tot nu toe altijd frames.

En JHS, het klopt inderdaad dat er voor HTML slechts 3 doctypes zijn, en geen van drieën lost de problemen op.
En wat bedoel je precies met " Ik zou veel meer gebruik maken van de flow van de pagina ."
Ik ben aan het zoeken naar een duidelijke uitleg van hoe de flow van een webpagina precies loopt, maar hier ben ik nog niet aan uit.
Alle hulp is welkom, zoals ik al zei, dit is nog allemaal behoorlijk nieuw voor me.

maandag 10 april 2006 20:37

Acties:

Verwijderd

Ik zou ook je <ul> nog een padding meegeven, zodat je niet 3 verschillende menu's krijgt.

maandag 10 april 2006 20:47

Acties:

JHS

Splitting the thaum.

Greenthumb schreef op maandag 10 april 2006 @ 20:36:
[...] De class selectors zijn er om in het css bestand de juiste opmaak te selecteren, deze heb ik namelijk genoemd zoals de tag zou zijn.

En waarom gebruik je in vredesnaam niet gewoon de tag zélf als selectie

:

code:

/* HTML */
<p>Blablabla
<p class="warning">Watch it!

/* CSS */
p { background-color: blue; }
p.warning { background-color: red; }

En JHS, het klopt inderdaad dat er voor HTML slechts 3 doctypes zijn, en geen van drieën lost de problemen op.

Het was ook niet te verwachten dat het toepassen van een ander doctype *poef* je problemen op zou lossen. In mijn ogen ben je het snelst klaar als je tegen een standardsmode doctype gaat developpen. Helaas kan dat bij een overstap van doctype betekenen dat je wat tijd verlies, en een paar stappen terug opnieuw moet beginnen.

En wat bedoel je precies met " Ik zou veel meer gebruik maken van de flow van de pagina ." Ik ben aan het zoeken naar een duidelijke uitleg van hoe de flow van een webpagina precies loopt, maar hier ben ik nog niet aan uit.

Ik vind dit redelijk moeilijk om uit te leggen, en ik denk dat je het een stuk beter maar gewoon kan 'ondervinden'. Lees de specs op het gebied van het boxmodel en positioning, sloop je position: absolute;s eruit en kijk wat je ervan kan maken

.

DM!

maandag 10 april 2006 21:11

Acties:

Greenthumb1982

Topicstarter

JHS schreef op maandag 10 april 2006 @ 20:47:
[...]
En waarom gebruik je in vredesnaam niet gewoon de tag zélf als selectie :
code:
1
2
3
4
5
6
7
/* HTML */
Blablabla
Watch it!

/* CSS */
p { background-color: blue; }
p.warning { background-color: red; }
[...]
Het was ook niet te verwachten dat het toepassen van een ander doctype *poef* je problemen op zou lossen. In mijn ogen ben je het snelst klaar als je tegen een standardsmode doctype gaat developpen. Helaas kan dat bij een overstap van doctype betekenen dat je wat tijd verlies, en een paar stappen terug opnieuw moet beginnen.

[...]
Ik vind dit redelijk moeilijk om uit te leggen, en ik denk dat je het een stuk beter maar gewoon kan 'ondervinden'. Lees de specs op het gebied van het boxmodel en positioning, sloop je position: absolute;s eruit en kijk wat je ervan kan maken .

Oke, ik denk dat ik dan morgen maar eens de site ga terugdraaien zodat ik met een standaard typedoc aan de gang kan.
Tevens zal ik eens proberen wat er allemaal gebeurd als ik de positions ga veranderen.
Ook zal ik gelijk de css aanpassen zodat deze zonder de classes kan worden gespecificeerd.
Zijn er nog andere zaken waar ik op moet letten, of die jullie me kunnen adviseren?

maandag 10 april 2006 22:37

Acties:

Verwijderd

al die losse divjes eruit kieperen en gewoon je background niet opsplitsen, je maakt het jezelf erg moeilijk allemaal

zorg eerst dat je je html netjes op orde hebt, ga dan je ontwerp erin zetten, meestal heb je nauwelijks extra elementen of attributen meer nodig als het goed is opgezet

een keer goed de specs doorlezen verheldert heel veel in hoe html en css nu echt werkt en bedoeld is, heb je ook zeker wat aan als je jezelf als websitebouwer wilt verkopen

[ Voor 24% gewijzigd door Verwijderd op 10-04-2006 22:39 ]

dinsdag 11 april 2006 07:22

Acties:

Greenthumb1982

Topicstarter

Verwijderd schreef op maandag 10 april 2006 @ 22:37:
al die losse divjes eruit kieperen en gewoon je background niet opsplitsen, je maakt het jezelf erg moeilijk allemaal

zorg eerst dat je je html netjes op orde hebt, ga dan je ontwerp erin zetten, meestal heb je nauwelijks extra elementen of attributen meer nodig als het goed is opgezet

een keer goed de specs doorlezen verheldert heel veel in hoe html en css nu echt werkt en bedoeld is, heb je ook zeker wat aan als je jezelf als websitebouwer wilt verkopen

Het probleem hierbij is dat mijn achtergrond gemaakt is voor een resolutie van 1600x1200, dus bij kleiner resoluties zou dan een stuk van mijn achtergrond wegvallen.
Ik begrijp ook wel dat als je hier van het begin rekening mee houdt dat je dan dit probleem niet hebt, maar ik wil het nu wel oplossen.
Is er anders een mogelijkheid om je achtergrond grootte aan te laten passen aan de resolutie?
Zoiets als
[code = css]background-size: 100%;[code]

dinsdag 11 april 2006 08:40

Acties:

Rowanov

Kop eens wat anders...

Nee, die mogelijkheid heb je niet. Je kan hem wel centreren en fixeren. Los van het feit dat dit natuurlijk prima terug te vinden is in de altijd overzichtelijke referentie

Misschien is het slim om daar eens doorheen te bladeren om een gevoel te krijgen wat css wel en niet kan. Dan kan je, zoals je zelf al aangeeft, in het vervolg er rekening meehouden met ontwerpen.