[CSS] FF goed, IE fout - Softwareontwikkeling

vrijdag 4 mei 2007 21:43

Acties:

Verwijderd

Topicstarter

Hallo,

Ik maakte al eerder ene gelijkaardig topic waar jsuti het omgekeerde probleem was. Het topci is jammer genoeg gelockt wegens zogezegt "niets zelf odnernomen". Ik wil dit even rechtzetten:

-CSS cursus nageken

-Gevalideerd met w3c CSS en HTMl

-Gevalideerd met een unbugger

-Rond gevraagd aan mensen

-Gezocht op google

-Geplaatst op meerdere fora

-Heel de beol nog is nagelezen en wat aangepast

Dit allemaal aangepast en nog is mjin probleem niet verholpen. Het probleem is dus dat in FF(=>firefox) het goed werkt en in I.E.(=>Internet Explorer) niet goed werkt. Zoals ik al zei was dat in mijn vorig topic net het ogmekeerde. Ikzelf en een paar mensen weten niet wat eraan te doen is. Daarom zou ik jullie willen vragen help me A.U.B. !

Waar vind je het bestand ? Dat vind je hier.

De born plaats ik hier:

Cascading Stylesheet:

   1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2.
   3. <html>
   4. <head>
   5. <title>[BNC] | Belgium Netherlands Clan And Others | bnc-sof2.com</title>
   6.
   7. <style type="text/css">
   8. <!--
   9.
  10. body {
  11. color : #f8f8ff;
  12. font-family : verdana;
  13. font-size : 12px;
  14. background : #3d392d url(http://www.bnc-sof2.com/temp/images/background.GIF);
  15. padding : 0;
  16. margin : 0;
  17. margin-top : 5px;
  18. margin-left : 5px;
  19. padding-left : 5px;
  20. }
  21. a {
  22. color : #f8f8ff;
  23. text-decoration : none;
  24. }
  25. a:visited {
  26. color : #f8f8ff;
  27. }
  28. a:active {
  29. color : #f8f8ff;
  30. }
  31. a:hover {
  32. color : #ff8c00;
  33. font-weight : bold;
  34. }
  35. #header {
  36. background-image : url(http://www.bnc-sof2.com/temp/images/header.gif);
  37. background-repeat : no-repeat;
  38. height : 132px;
  39. }
  40. #onderdeelmenu {
  41. background-image : url(http://www.bnc-sof2.com/temp/images/onderdeelmenu.gif);
  42. height : 25px;
  43. width : 184px;
  44. }
  45. #menu {
  46. background-image : url(http://www.bnc-sof2.com/temp/images/menu.gif);
  47. background-repeat : no-repeat;
  48. width : 184px;
  49. height : 566px;
  50. }
  51. #eindmenu {
  52. background-image : url(http://www.bnc-sof2.com/temp/images/eindmenu.gif);
  53. background-repeat : no-repeat;
  54. width : 184px;
  55. height : 12px;
  56. }
  57. #container {
  58. background-image : url(http://www.bnc-sof2.com/temp/images/container.gif);
  59. width : 618px;
  60. height : 592px;
  61. margin-left : 184px;
  62. margin-top : -605px;
  63. }
  64. #onderstuk {
  65. background-image : url(http://www.bnc-sof2.com/temp/images/onderstuk.gif);
  66. width : 618px;
  67. height : 5px;
  68. margin-left : 184px;
  69. margin-top : 0;
  70. background-repeat : no-repeat;
  71. }
  72. #copyrightbar {
  73. background-image : url(http://www.bnc-sof2.com/temp/images/copyrightbar.gif);
  74. width : 618px;
  75. height : 12px;
  76. margin-left : 184px;
  77. margin-top : -9px;
  78. background-repeat : no-repeat;
  79. }
  80. #eindbar {
  81. background-image : url(http://www.bnc-sof2.com/temp/images/eindbar.gif);
  82. width : 618px;
  83. height : 12px;
  84. margin-left : 184px;
  85. margin-top : -2px;
  86. background-repeat : no-repeat;
  87. }
  88. #onderdeelmenul {
  89. background-image : url(http://www.bnc-sof2.com/temp/images/onderdeelmenul.gif);
  90. width : 184px;
  91. height : 25px;
  92. margin-left : 802px;
  93. margin-top : -608px;
  94. background-repeat : no-repeat;
  95. }
  96. #menul {
  97. background-image : url(http://www.bnc-sof2.com/temp/images/menul.gif);
  98. width : 184px;
  99. height : 569px;
 100. margin-left : 802px;
 101. margin-top : 0;
 102. background-repeat : no-repeat;
 103. }
 104. #eindmenul {
 105. background-image : url(http://www.bnc-sof2.com/temp/images/eindmenul.gif);
 106. width : 184px;
 107. height : 12px;
 108. margin-left : 802px;
 109. background-repeat : no-repeat;
 110. }
 111.
 112.
 113.
 114. -->
 115. </style>
 116.
 117. </head>
 118. <body>
 119.
 120. <div id="header"></div>
 121. <div id="onderdeelmenu"></div>
 122. <div id="menu"></div>
 123. <div id="eindmenu"></div>
 124. <div id="container"></div>
 125. <div id="onderstuk"></div>
 126. <div id="copyrightbar"></div>
 127. <div id="eindbar"></div>
 128. <div id="onderdeelmenul"></div>
 129. <div id="menul"></div>
 130. <div id="eindmenul"></div>
 131.
 132.
 133.
 134. </body>
 135. </html>

Bij voorbaad dank ! Vriendelijke groeten Esli H.

[ Voor 15% gewijzigd door Verwijderd op 04-05-2007 22:14 ]

vrijdag 4 mei 2007 21:52

Acties:

radem205

In IE 7.0 werkt ie correct

.

Wat is concreet jouw probleem dan, want dat heb je niet volledig geformuleerd.

Als ik jouw code bekijk dan heb jij geen één div gepositioneerd. Een div wordt gezien als een block element, welke zonder positie onder elkaar komen te staan.

Dus: Je dient de divs te positioneren. Bijvoorbeeld aan de hand van onderstaande methodes:

Float (left, right):
De div wordt links of rechts uitgelijnd, waardoor je bijvoorbeeld een aantal divs horizontaal naast elkaar kan zetten (in alle divs dient deze gedefinieerd te zijn).

position: absolute;
De divs worden absoluut op het scherm geplaatst. Dus wanneer je deze gebruikt i.c.m. bijvoorbeeld top: 150px; left: 100px; zal de div in alle gevallen op die plek blijven staan.

position: relative;
De div wordt relatief gepositioneerd aan de hand van de omliggende divs

[ Voor 77% gewijzigd door radem205 op 04-05-2007 21:56 ]

vrijdag 4 mei 2007 21:55

Acties:

TerraGuy

The weirdo with the beard

In IE 7.0 werkt hij hier anders niet?

Was inderdaad handig als TS het probleem wat specificeerde.. CSS-validator geeft op line 156 een error.

Iedereen kan gelijk hebben, allemaal tegelijk. Dat heb je met quantum.

vrijdag 4 mei 2007 21:59

Acties:

Verwijderd

Topicstarter

Op google kwam ik eigenlijk niet veel meer te weten. Ik kwam terecht bij faux colums , wat ik persoonlijk niet zo handig vind. Ook faux colums konden trouwnes mijn probleem niet oplossen. Ik kwam voorderest ook vaak dit probleem tegen, maar werd er nit slimmer uit. Op die andere fora's werd ofwel niet gereageerd ofwel reacties die er niet met te maken hadden. De validatie van w3c bracht evenmin iets op. Volgens w3c is er niks mis mee. De debugger gaf mij ongeveer hetzelfde nieuws aan, alleen zag de debugger liever "/>" , meer ook niet. Bij de aanpassingne heb ik me meer gaan concentreren op firefox en hier en daar wat herorert en kleine dingen aangepast. Jammer genoeg ben ik met al dit niet veel verder gekomen ...

vrijdag 4 mei 2007 22:01

Acties:

Verwijderd

Topicstarter

TerraGuy schreef op vrijdag 04 mei 2007 @ 21:55:
In IE 7.0 werkt hij hier anders niet?

Was inderdaad handig als TS het probleem wat specificeerde.. CSS-validator geeft op line 156 een error.

Ik werk met versie 6.0 . Ik zou dus ook graag hebben voor het grotendeels publiek dat nog niet overgestapt is naar de versie 7.0 dat die de site ook netjes kunnen bezoeken zonder problemen.

Die validaie ga ik toch nu eens nakijken dan ...

vrijdag 4 mei 2007 22:01

Acties:

Boelie-Boelie

Verwijderd schreef op vrijdag 04 mei 2007 @ 21:43:
-Heel de beol nog is nagelezen en wat aangepast

[...]en nog is mjin probleem niet verholpen.

Nou is duidelijk dat je niet hebt stilgezeten, maar wat zijn nou de daadwerkelijke aanpassingen die je hebt gedaan aan je pagina? Het gaat er niet om dat je veel hebt gedaan, het gaat erom welke oplossingen wel of niet werkten en waarom wel of niet. Nou weet men nog steeds nix.

Anywayz, Fix Your Site With the Right DOCTYPE!, daarna kun je pas browserweergaveverschillen goed oplossen (aan te raden is een Strict doctype, No more Transitional DOCTYPEs, please).

Daarna het wellicht een idee zijn toch nog eens de faux columns-oplossing te bekijken...

[ Voor 5% gewijzigd door Boelie-Boelie op 04-05-2007 22:07 ]

Cogito ergo dubito

vrijdag 4 mei 2007 22:06

Acties:

Verwijderd

Topicstarter

Inderdaad er zat een klein foutje in. Dit foutje had wel echter niets te maken met het probleem. (Ik zal dadelijk de fout hier wegwerken en het goede erop zetten)

vrijdag 4 mei 2007 22:10

Acties:

Verwijderd

Topicstarter

Boelie-Boelie schreef op vrijdag 04 mei 2007 @ 22:01:
[...]
Nou is duidelijk dat je niet hebt stilgezeten, maar wat zijn nou de daadwerkelijke aanpassingen die je hebt gedaan aan je pagina? Het gaat er niet om dat je veel hebt gedaan, het gaat erom welke oplossingen wel of niet werkten en waarom wel of niet. Nou weet men nog steeds nix.

Anywayz, Fix Your Site With the Right DOCTYPE!, daarna kun je pas browserweergaveverschillen goed oplossen (aan te raden is een Strict doctype, No more Transitional DOCTYPEs, please).

Daarna het wellicht een idee zijn toch nog eens de faux columns-oplossing te bekijken...

Dat is gebeurt. Ik veronderstle dat ik nu nog eens moet valideren.

vrijdag 4 mei 2007 22:15

Acties:

Verwijderd

Topicstarter

(HTML)

This Page Is Valid XHTML 1.0 Strict!

(CSS)

Geen fout of waarschuwing gevonden

...

vrijdag 4 mei 2007 22:50

Acties:

Boelie-Boelie

Nu je een valide doctype erboven hebt, weten alle moderne browsers op welke manier ze met de CSS om moeten gaan. Verschillen in weergave tussen browsers zal nu minder vaak voorkomen, mits je op de juiste manier gebruik maakt van CSS.
Nogmaals, ik zou dus je probleem op de faux columnsmanier oplossen. Dan moet je wel andere slices maken. Als het goed is, heb je er maar drie nodig (header, middengedeelte dat je herhaalt, footer), plus een losse background op de body (voor de streepjesachtergrond).

Cogito ergo dubito

vrijdag 4 mei 2007 22:54

Acties:

Rowanov

Kop eens wat anders...

Je geeft nog steeds niet aan WAT er concreet niet werkt; dat is net zoiets als naar de huisarts gaan en dan verwachten dat hij je klacht raad. Dat het niet goed werkt zegt niet zo bijster veel.

Verder geef je aan dat faux-collumns geen goede oplossing voor het probleem is. Geef eens aan waarom niet, want je geeft in je TS al aan dat je er niet bijster veel van begrijpt. Dat je site valideert is niet meer dan een felicitatie waard vanwege het feit dat je je code volgens de syntax hebt getypt. Een validatie-tool kent echter jouw layout plannen niet en zal die dan ook niet op fouten kunnen keuren.

Om het even samen te vatten: kom met een concrete vraag over de brug en plemp niet 135 regels code neer met de 'zoeken jullie het even uit' instelling.

Er bestaan nog meer elementen naast div.

[ Voor 3% gewijzigd door Rowanov op 04-05-2007 22:57 ]

vrijdag 4 mei 2007 23:18

Acties:

Verwijderd

Topicstarter

Boelie-Boelie schreef op vrijdag 04 mei 2007 @ 22:50:
Nu je een valide doctype erboven hebt, weten alle moderne browsers op welke manier ze met de CSS om moeten gaan. Verschillen in weergave tussen browsers zal nu minder vaak voorkomen, mits je op de juiste manier gebruik maakt van CSS.
Nogmaals, ik zou dus je probleem op de faux columnsmanier oplossen. Dan moet je wel andere slices maken. Als het goed is, heb je er maar drie nodig (header, middengedeelte dat je herhaalt, footer), plus een losse background op de body (voor de streepjesachtergrond).

Ik heb toch ook nog de menutjes ... Trouwens ik heb de tempalte niet zelg gemaakt

. Ik kan zelf er niets aan vranderen... Het enige wat ik kan is het scripten ...

vrijdag 4 mei 2007 23:21

Acties:

Verwijderd

Topicstarter

Rowanov schreef op vrijdag 04 mei 2007 @ 22:54:
Je geeft nog steeds niet aan WAT er concreet niet werkt; dat is net zoiets als naar de huisarts gaan en dan verwachten dat hij je klacht raad. Dat het niet goed werkt zegt niet zo bijster veel.

Verder geef je aan dat faux-collumns geen goede oplossing voor het probleem is. Geef eens aan waarom niet, want je geeft in je TS al aan dat je er niet bijster veel van begrijpt. Dat je site valideert is niet meer dan een felicitatie waard vanwege het feit dat je je code volgens de syntax hebt getypt. Een validatie-tool kent echter jouw layout plannen niet en zal die dan ook niet op fouten kunnen keuren.

Om het even samen te vatten: kom met een concrete vraag over de brug en plemp niet 135 regels code neer met de 'zoeken jullie het even uit' instelling.

Er bestaan nog meer elementen naast div.

Jouw stelling vna de doktor vidn ik fout. Ik ga toch niet naar de doktor en zeg "Hallo doktor ik heb ene keelonsteking". Ik kan het probleem niet beter osmchrivjen met het voorbeeld... Moest ik het probleem weten zou ik het tcoh gewoon zelf oplossen. Want die isntelling dat vind ik dan helemaal gezever. Ik ben een beginner en ik heb gezcoht wat ik kon... Ik zeg trouwens ook niet dat ik faux niet snap maar dat ik het niet zo handig vind...

vrijdag 4 mei 2007 23:27

Acties:

NMe

Quia Ego Sic Dico.

Ik wil me geheel aansluiten bij Rowanov in "CSS Ff goed I.E. Fout". Alles wat ik hier zie is een flinke lap code met de melding "hij werkt niet!", zonder daarbij te zeggen wat er al dan niet verkeerd is en waarom dat verkeerd is in jouw ogen.

Verder kun je voor het maken van sites in deze opbouw (header bovenaan, gevolgd door de content aan beide zijkanten omgeven door menu's) heel veel standaardoplossingen vinden, waar je vervolgens alleen jouw lay-out aan hoeft te koppelen. Met faux columns kom je al een heel eind, en daar hebben je menu's verder niets mee te maken.

Zou je verder even je posts door willen lezen voordat je ze plaatst? Je posts zijn erg slordig en lezen niet prettig, en dat nodigt mensen niet bepaald uit tot het plaatsen van een ontopic reactie. Of als je geen zin hebt om dingen na te lezen, dan kun je een browser met spellingcontrole proberen.

Verwijderd schreef op vrijdag 04 mei 2007 @ 23:21:
Jouw stelling vna de doktor vidn ik fout. Ik ga toch niet naar de doktor en zeg "Hallo doktor ik heb ene keelonsteking".

Je gaat echter ook niet naar de dokter met verder enkel de melding "ik ben ziek, maak me beter", en dat is wat Rowanov bedoelt.

Ik kan het probleem niet beter osmchrivjen met het voorbeeld... Moest ik het probleem weten zou ik het tcoh gewoon zelf oplossen. Want die isntelling dat vind ik dan helemaal gezever. Ik ben een beginner en ik heb gezcoht wat ik kon...

Zoeken en je probleem omschrijven hebben in dit geval niet echt wat met elkaar te maken. Je hoeft niet te zeggen wat de oplossing voor je probleem is, maar je moet wel vertellen wat er dan eigenlijk aan schort. Als we niet weten waar jij last van hebt, dan kunnen we je toch ook niet helpen? Om jouw voorbeeld van keelontsteking aan te houden: vertel ons dat je keelpijn hebt, en niet dat je ziek bent. De dokter kan je dan vertellen dat je keelontsteking hebt, maar als hij je eerst van top tot teen moet gaan onderzoeken ben je dood voor hij bij je nek is aangekomen.

Ik zeg trouwens ook niet dat ik faux niet snap maar dat ik het niet zo handig vind...

Handig of niet, het is wel een oplossing voor je probleem.

[ Voor 42% gewijzigd door NMe op 04-05-2007 23:31 ]

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

zaterdag 5 mei 2007 18:14

Acties:

Verwijderd

Topicstarter

Een goede phper (wbemaster van www.goldenoakdesing.net) heeft me geholpen. Ik legde hem het probleem uit en hij had direct een oplossing. Hij voreg me of ik de stylesheet nog had van I.E. Ik had hem dus ong

Hij zei dan "dan moet je niet herscripten" Toen gaf hij me het volgende stukje code:

PHP:

<?php  
$br = strtolower($_SERVER['HTTP_USER_AGENT']); // Welke browser ze gebruiken.
if(ereg("msie 6.0", $br)) {
    $stylesheets = 'style2.css';
}else{
    $stylesheets = 'style.css';
}
?>

<?php echo '<link rel="stylesheet" type="text/css" href="' . $stylesheets . '" />'; ?>

Toen begon ik te zeggen dat neemt toch veel ruimte in enzo als ik dat in elk bestand zet ? Toen zei hij ik snap je niet maar probeer zelf maar wat. Als het maar werkt. Toen dacht ik direct aan een include. Ik heb dus nu het bestand index.php,style.css,style1.css en browser.php. In inex.php heb ik heb ik he gewoon giencludeerd. Nu moet ik dus gewoon vanaf nu alleen mjin idnex bestand de inhoud van veranderen en ik heb een nieuwe pagina ! Nu ziet mijn index.php er zo uit:

PHP:

<?
include("browser.php");
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>[BNC] | Belgium Netherlands Clan And Others | bnc-sof2.com</title>
</head>
<body>

        <div  id="header"></div>
        <div  id="onderdeelmenu"></div>
        <div  id="menu"></div>
        <div  id="eindmenu"></div>
        <div  id="container"></div>
        <div  id="onderstuk"></div>
        <div  id="copyrightbar"></div>
        <div  id="eindbar"></div>
        <div  id="onderdeelmenul"></div>
        <div  id="menul"></div>
        <div  id="eindmenul"></div>
        


</body>
</html>

Ik hoop dat ik hiet mensen met help ! Dit is een snelle en goede oplossing ! Bijna alle overige bekende browsers werken zoals Firefox alleen de verouderde niet. Voor I.E. gebruik ik dus gewoon een andere stylesheet

.

Vriendelijke groeten Esli H.

(www.bnc-sof2.com/temp/temp)

zaterdag 5 mei 2007 18:45

Acties:

Rowanov

Kop eens wat anders...

Je kan die browser dus heel makkelijk spoofen met een simpele firefox plugin; wat jij zoekt zijn conditional comments, waar je je IE-only styles kan declareren. Los van het feit dat het voor een simpele layout als dit niet nodig hoeft te zijn, maar dat is je eigen zaak.

Edit: ik ben er nog niet over uit of conditional comments op dezelfde manier te spoofen zijn, maar conditional comments zijn wel breder geaccepteerd wat betreft zulk soort problemen met layout.

[ Voor 23% gewijzigd door Rowanov op 05-05-2007 18:49 ]

zaterdag 5 mei 2007 18:57

Acties:

NMe

Quia Ego Sic Dico.

Je moet pas doen aan aparte CSS voor verschillende browsers als je zeker weet dat dat de enige manier is om gemakkelijk tot een oplossing te komen. Het wordt er immers niet onderhoudbaarder op zo. Ik zet dus mijn vraagtekens bij de kennis van die "goede PHP-er".

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

zaterdag 5 mei 2007 19:15

Acties:

crisp

Devver

Pixelated

UA-sniffing is naast onbetrouwbaar sowieso evil

[ Voor 25% gewijzigd door crisp op 05-05-2007 19:15 ]

Intentionally left blank

Pagina: 1

Reageer