Layout verschil in Firefox en Internet Explorer

Status
Niet open voor verdere reacties.

Sadjied

Gebruiker
Lid geworden
13 okt 2009
Berichten
5
Beste forum-leden,

Ik ben kort geleden begonnen met het bouwen van een website. Deze website heb ik voornamelijk gebouw mbv NVU & Microsoft Web Expression. Buitenom deze programma's heb ik zelf php- & javascripts erin geplant.

Ik heb de site steeds met Firefox bekeken. En het ziet eruit zoals het moet horen. Maar zodra ik de site bekijk in internet explorer, dan ziet de menu er heel raar uit. (Vooral de menu! De tekst van de site zelf is ook niet echt op de juiste plaats. Maar ik erger me het meest aan de menu.)

site is te zien op http://www.creativegarden.nl/webroot/

Ik hoop dat iemand mij kan helpen hiermee.

Met vriendelijke groet,
Sadjied
 
IE doet altijd moeilijk, daarom gebruiken de meeste developers ook gewoon Firefox of een andere 'goede' browser.
Daarnaast zie ik dat je pagina-layout gebruikt maakt van tabellen, en dat is zo 2004! Maargoed, dat is je vraag niet.

Ik denk dat het verschil komt omdat IE de tabel extra cell-margin meegeeft. Zet dit eens in je html?

HTML:
<!--[if IE]>
   <style type='text/css'>
      table, tr, td
      {
         padding: 0px;
         margin: 0px;
      }
<![endif]-->
zet het maar ergens NA de <body> tag. Deze code zorgt ervoor dat ALLEEN in Internet Explorer de tabellen-margin/padding op 0 wordt gezet. En dan kijken wat het doet :)


:thumb:
 
Ik zie alleen de achtergrond

Als ik die exacte code invoer, wat jij zonet heb doorgegeven. Dan zie ik alleen de achtergrond en verder nietsss.

Als ik de code verander naar:
HTML:
<![endif]-->
<style type='text/css'>
      table, tr, td
      {
         padding: 0px;
         margin: 0px;
      }
      </style>
<![endif]-->

Dan zie ik in firefox nogsteeds hetzelfde, en in IE ook hetzelfde met als extra "<![endif]-->" bovenaan de pagina.
 
Oh, ik was inderdaad de </style> vergeten :)

Ik zie zo snel ook niet de oplossing... het enige wat ik je nog kan aanraden is om voortaan met style-layout te werken in plaats van tabellen-layout.


:thumb:
 
Hij heeft niet alleen de /style-tag toegevoegd, maar ook [if IE] in [endif] verandert.

Dus, Sadjied, werkt het ook niet als je wel de style-tag toevoegt, maar [if IE] laat staan?
 
Mijn foutje, had het perongeluk niet bij geschreven

Mijn excuses.

De if IE staat er ook bij. Alleen heb ik die er blijkbaar niet bij vermeld.

Het staat er nu als
HTML:
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><!--[if IE]>
<![endif]-->
<style type='text/css'>
      table, tr, td
      {
         padding: 0px;
         margin: 0px;
      }
      </style>
<![endif]>

En hoe bedoel je de style-tag ?? Waar en hoe kan ik hier meer info over vinden?
 
Okay, voordat we allemaal in de war raken: haal de code van mij die je erin hebt gezet weg

nu, voeg dit toe, op de plek waar de oude code stond:
HTML:
<!--[if IE]>
   <style type='text/css'>
      table, tr, td
      {
         padding: 0px;
         margin: 0px;
      }
   </style>
<![endif]-->
precies dat.


:thumb:
 
Geen resultaat nog

Ik heb die code precies zo erin gezet. Maar ik zie nu geen verschil (tussen oude situatie en nieuwe situatie).
 
Oeps!
Op regel 192 van de html begint in de <div id="contentblock"> een nieuwe pagina! :rolleyes:
Die loopt t/m regel 245, daar eindigt de </html>, om weer vrolijk verder te gaan in de </div> in de tabelcel waar ie was gebleven.
Maar je kunt niet zomaar een html-pagina met eigen <head> (waarin style-gegevens, enz) en eigen <body> in een andere html-pagina plaatsen.

Het blok style-declaratie in de tweede head moet je verhuizen naar bovenin de eerste head, evenals de link naar het stylesheet. Anders worden deze dingen genegeerd door de browser.
Daarna kan je het stuk van:
HTML:
<!DOCTYPE html PUBLIC ..... enz.
.....
t/m
.....
</style>
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body>
(regel 192 t/m regel 217) er uit wissen.
De regels 243 (</body>) en 245 (</html>) moeten er ook nog uit.

Dan zullen de meeste van de foutberichten van de html-validator verschrompeld zijn, en kan je kijken of/waar er nog afwijkingen van IE in zitten, en die zo nodig repareren.

Wat ook een voorwaarde voor unanieme weergave door verschillende browsers is, is het opgeven van een goed DOCtype in het begin. Ik zou eens proberen:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>.: Creative Garden :.</title>
enz.
en kijken wat de html-validator daarvan vindt. - Andere keuzes staan hier.

Misschien blijkt er dan wel niets speciaals voor IE geregeld te hoeven worden!

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan