PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

FF feat IE ellende

Door Bart Tuma op 09-09-2006 14:40
738 views
Momenteel ben ik voor iemand bezig die graag een website wil hebben. Dit gaat tot nu prima, maar er is 1 probleem.....in FF ziet alles er prima uit, veders geen klachten enz. maar ik IE verschijft de hele mik mak. (ik werk hierbij met CSS / div'jes tabel ect) hier even van screenshots:

te beginnen met de ellende in IE:
http://www.leensonline.nl/files/IE_ellende.jpg

FF vreugde:
http://www.leensonline.nl/files/FF_screenshot.jpg


Hoe kan ik dit oplossen ?? Alvast bedankt.
- SanThe -
09-09-2006 14:45
Heb je de site al valid html en css?
Bart Tuma
09-09-2006 14:55
Ja, hij geeft aan dat alles goed is.
ik neem aan dat je deze site bedoelde om het te controlleren. (www.w3c.nl)

[edit]ik ben een N00b wat CSS betreft, maar zou het kunnen liggen aan het menu, want daar heb ik 1 divtje en ik heb een div waar de paginas worden ingeladen.

Daar heb ik de volgende code (van het menu):
.menu_001 {
width: 248px;
background-image: url(images/menu_01.jpg);
background-repeat: no-repeat;
background-color: #FFFFFF;
}
#div_menu {
margin-left: 18px;
margin-right: 36px;
margin-top: 5px;
}



[/edit]
F
Frank -
09-09-2006 20:34
IE heeft problemen met het box-model. Margins worden door IE anders geinterpreteerd dan de bedoeling is. Google maar eens op 'boxmodel internet explorer', dan krijg je genoeg resultaten om een oplossing te vinden.
Jan Koehoorn
09-09-2006 20:41
Tip 1: dwing IE in HTML 4 strict mode met dit doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">;

dat doctype is momenteel het meest consistent tussen browsers.

Tip 2: je kunt de boxmodel hack gebruiken, maar ik raad het volgende aan:

Maak een wrapper-class aan in je CSS die er zo uitziet:

div.wrapper {
    padding: 4px; /* of wat je verder wilt */
}


Stel dat je nu een container div zou maken, dan stop je daar die wrapper div in, op deze manier:

<div id="container">
    <div class="wrapper">
    </div>
</div>

Als de inhoud in je container div nu wat meer padding nodig heeft, verander je de padding van je wrapper div. Het voordeel hiervan, is dat dat breedte van je container div hetzelfde blijft in alle browsers.

Je kunt op die manier in je container div met padding, margin en borders werken zonder dat het de breedte van je buitenste element verandert.
Bart Tuma
10-09-2006 11:03
oke, ik ga eens kijken, en als het lukt dan laat ik het jullie weten, Bedankt.....
Bart Tuma
10-09-2006 11:28
het lukt niet echt, ik begrijp ook niet echt hoe ik dat moet aanpassen.....

dit is mijn menu:


<div id="container">
<div class="wrapper">
	<ul>
      <li><a href="?pagina=wie">Wie zijn wij</a></li>
      <li><a href="?pagina=wat">Wat doen wij</a></li>
      <li><a href="?pagina=aanmelding">Aanmelding</a></li>
      <li><a href="?pagina=dienst">Dienstregeling</a></li>
	  <li><a href="?pagina=fotos">foto's</a></li>
      <li><a href="?pagina=ritprijzen">Ritprijzen</a> </li>
      <li><a href="?pagina=nieuws">Laatste nieuws</a></li>
      <li><a href="?pagina=forum">Vraag &amp; Andwoord</a></li>
      <li><a href="?pagina=gastenboek">gastenboek</a></li>
      <li><a href="?pagina=info">info</a></li>
      <li><a href="?pagina=contact">contact</a></li>
      <li><a href="?pagina=help">help</a></li>
  </ul>
    </div></div>


mijn div.wapper is nu:


div.wrapper {
    margin-left: 18px;
    margin-right: 36px;
    margin-top: 5px;
}


en die container wat moet ik daarvan maken dan ??
Jan Koehoorn
10-09-2006 12:27
Kun je een JPG maken van de situatie zoals jij wilt dat hij er uit komt te zien? Dan kan ik wat gerichter helpen.
Jan Koehoorn
10-09-2006 13:22
Okee, ik zal ff een voorbeeld maken.
[edit]
Ik moet nu op pad, naar een feestje :-) Vanavond ga ik er nog even naar kijken.
[/edit]

Reageren

Inloggen om te reageren