Website laadt niet in Internetexplorer wel in chrome en firefox?

djfaberdux · 24 sep 2012

Mijn website laadt niet in internet explorer, maar wel in firefox en google chrome hoe kan dit?

*website is gemaakt in iweb van apple.

website is:
www.dj-huren-eindhoven.nl

html bestand:

HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- gemaakt door www.metatags.nl -->
<meta name="description" content="Een ervaren dj huren in de regio Eindhoven met eigen apparatuur voor een spotprijs?">
<meta name="keywords" content="dj, regio, eindhoven, spotprijs, goedkoop, eigen apparatuur, house, avondvullend programma, drive-in show, drive in show, DJ Faber Dux, dj faberdux, Stefan Tielemans, Waalre, Veldhoven, 100 euro">
<meta name="author" content="metatags generator">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="5 days">
<title>dj huren in Eindhoven?</title>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="google-site-verification" content="9hMVOHU-rbtfDFqnV5gubz3Juy1QCY5Kxt7FvLgiGhc" />
    <meta name="Generator" content="iWeb 3.0.4" />
    <meta name="iWeb-Build" content="local-build-20120916" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta name="viewport" content="width=1000" />
    <title>DJ Faber Dux</title>
    <link rel="stylesheet" type="text/css" media="screen,print" href="DJ_Faber_Dux_files/DJ_Faber_Dux.css" />
    <!--[if lt IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='DJ_Faber_Dux_files/DJ_Faber_DuxIE.css'/><![endif]-->
    <!--[if gte IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Media/IE8.css'/><![endif]-->
    <style type="text/css">
/*<![CDATA[*/
	@import "Scripts/Widgets/HTMLRegion/Paste.css";
/*]]>*/
</style>
    <script type="text/javascript" src="Scripts/iWebSite.js"></script>
    <script type="text/javascript" src="Scripts/iWebImage.js"></script>
    <script type="text/javascript" src="Scripts/iWebMediaGrid.js"></script>
    <script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script>
    <script type="text/javascript" src="Scripts/Widgets/HTMLRegion/Paste.js"></script>
    <script type="text/javascript" src="DJ_Faber_Dux_files/DJ_Faber_Dux.js"></script>
  </head>
  <body style="background: rgb(0, 0, 0); margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
    <div style="text-align: center; ">
      <div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word;  background: rgb(0, 0, 0); text-align: left; width: 1000px; " id="body_content">
        <div style="float: left; margin-left: 0px; position: relative; width: 1000px; z-index: 0; " id="nav_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper">Â*</div>
          <div style="clear: both; height: 0px; line-height: 0px; " class="spacer">Â*</div>
        </div>
        <div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 1000px; z-index: 10; " id="header_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper">Â*</div>
        </div>
        <div style="margin-left: 0px; position: relative; width: 1000px; z-index: 5; " id="body_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper">Â*</div>
          <div style="height: 333px; width: 1000px;  height: 333px; left: 0px; position: absolute; top: -2px; width: 1000px; z-index: 1; " class="tinyText style_SkipStroke stroke_0">
            <img src="DJ_Faber_Dux_files/droppedImage.jpg" alt="" style="border: none; height: 333px; width: 1000px; " />
          </div>
          


          <div style="height: 600px; width: 1000px;  height: 600px; left: 0px; position: absolute; top: 331px; width: 1000px; z-index: 1; " class="tinyText style_SkipStroke stroke_0">
            <img src="DJ_Faber_Dux_files/droppedImage.png" alt="" style="border: none; height: 600px; width: 1000px; " />
          </div>
          <div class="com-apple-iweb-widget-HTMLRegion" id="widget0" style="height: 166px; left: 510px; opacity: 1.00; position: absolute; top: 620px; width: 450px; z-index: 1; ">
            <script type="text/javascript"><!--//--><![CDATA[//><!--
    var widget0_htmlMarkupURL = ".//DJ_Faber_Dux_files/widget0_markup.html";
//--><!]]></script>
            <div id="widget0-htmlRegion" class="html_region_widget"></div>
          </div>
          <script type="text/javascript"><!--//--><![CDATA[//><!--
new Paste('widget0', 'Scripts/Widgets/HTMLRegion', 'Scripts/Widgets/SharedResources', '.', {"emptyLook": false});
//--><!]]></script>
          <div style="height: 35px; width: 36px;  height: 35px; left: 914px; position: absolute; top: 291px; width: 36px; z-index: 1; " class="tinyText stroke_0">
            <div style="position: relative; width: 36px; ">
              <a href="http://soundcloud.com/djfaberdux" title="http://soundcloud.com/djfaberdux" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;"><img src="DJ_Faber_Dux_files/shapeimage_1.png" alt="" style="height: 32px; left: 0px; margin-left: 3px; margin-top: 2px; position: absolute; top: 0px; width: 32px; " /></a>
            </div>
          </div>
          


          <div style="height: 35px; width: 35px;  height: 35px; left: 874px; position: absolute; top: 291px; width: 35px; z-index: 1; " class="tinyText stroke_0">
            <div style="position: relative; width: 35px; ">
              <a href="http://www.facebook.com/DJFaberDux" title="http://www.facebook.com/DJFaberDux" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;"><img src="DJ_Faber_Dux_files/shapeimage_2.png" alt="" style="height: 32px; left: 0px; margin-left: 2px; margin-top: 2px; position: absolute; top: 0px; width: 32px; " /></a>
            </div>
          </div>
          <div class="com-apple-iweb-widget-HTMLRegion" id="widget1" style="height: 167px; left: 40px; opacity: 1.00; position: absolute; top: 620px; width: 450px; z-index: 1; ">
            <script type="text/javascript"><!--//--><![CDATA[//><!--
    var widget1_htmlMarkupURL = ".//DJ_Faber_Dux_files/widget1_markup.html";
//--><!]]></script>
            <div id="widget1-htmlRegion" class="html_region_widget"></div>
          </div>
          <script type="text/javascript"><!--//--><![CDATA[//><!--
new Paste('widget1', 'Scripts/Widgets/HTMLRegion', 'Scripts/Widgets/SharedResources', '.', {"emptyLook": false});
//--><!]]></script>
          <div style="height: 233px; width: 2px;  height: 233px; left: 303px; position: absolute; top: 359px; width: 0px; z-index: 1; " class="tinyText">
            <div style="position: relative; width: 0px; ">
              <img src="DJ_Faber_Dux_files/shapeimage_3.jpg" alt="" style="height: 233px; left: 0px; margin-left: -1px; position: absolute; top: 0px; width: 2px; " />
            </div>
          </div>
          <div class="com-apple-iweb-widget-HTMLRegion" id="widget2" style="height: 266px; left: 327px; opacity: 1.00; position: absolute; top: 367px; width: 650px; z-index: 1; ">
            <script type="text/javascript"><!--//--><![CDATA[//><!--
    var widget2_htmlMarkupURL = ".//DJ_Faber_Dux_files/widget2_markup.html";
//--><!]]></script>
            <div id="widget2-htmlRegion" class="html_region_widget"></div>
          </div>
          <script type="text/javascript"><!--//--><![CDATA[//><!--
new Paste('widget2', 'Scripts/Widgets/HTMLRegion', 'Scripts/Widgets/SharedResources', '.', {"emptyLook": false});
//--><!]]></script>
          <div class="com-apple-iweb-widget-HTMLRegion" id="widget3" style="height: 181px; left: 39px; opacity: 1.00; position: absolute; top: 385px; width: 200px; z-index: 1; ">
            <script type="text/javascript"><!--//--><![CDATA[//><!--
    var widget3_htmlMarkupURL = ".//DJ_Faber_Dux_files/widget3_markup.html";
//--><!]]></script>
            <div id="widget3-htmlRegion" class="html_region_widget"></div>
          </div>
          <script type="text/javascript"><!--//--><![CDATA[//><!--
new Paste('widget3', 'Scripts/Widgets/HTMLRegion', 'Scripts/Widgets/SharedResources', '.', {"emptyLook": false});
//--><!]]></script>
          <div style="height: 34px; width: 34px;  height: 34px; left: 956px; position: absolute; top: 291px; width: 34px; z-index: 1; " class="tinyText stroke_0">
            <div style="position: relative; width: 34px; ">
              <a href="http://www.youtube.com/djfaberdux" title="http://www.youtube.com/djfaberdux" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;"><img src="DJ_Faber_Dux_files/shapeimage_4.png" alt="" style="height: 32px; left: 0px; margin-left: 2px; margin-top: 2px; position: absolute; top: 0px; width: 32px; " /></a>
            </div>
          </div>
          


          <div style="height: 31px; width: 34px;  height: 31px; left: 832px; position: absolute; top: 293px; width: 34px; z-index: 1; " class="tinyText stroke_0">
            <div style="position: relative; width: 34px; ">
              <a href="http://twitter.com/faberdux1" title="http://twitter.com/faberdux1" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;"><img src="DJ_Faber_Dux_files/shapeimage_5.png" alt="" style="height: 31px; left: 0px; margin-left: 1px; position: absolute; top: 0px; width: 33px; " /></a>
            </div>
          </div>
          <div style="height: 787px; line-height: 787px; " class="spacer">Â*</div>
        </div>
        <div style="height: 150px; margin-left: 0px; position: relative; width: 1000px; z-index: 15; " id="footer_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper">Â*</div>
          <div style="height: 200px; width: 1000px;  height: 200px; left: 0px; position: absolute; top: 21px; width: 1000px; z-index: 1; " class="tinyText style_SkipStroke stroke_0">
            <img src="DJ_Faber_Dux_files/droppedImage_1.jpg" alt="" style="border: none; height: 200px; width: 1001px; " />
          </div>
          


          <div id="id1" style="height: 68px; left: 287px; position: absolute; top: 44px; width: 170px; z-index: 1; " class="style_SkipStroke_1 shape-with-text">
            <div class="text-content graphic_textbox_layout_style_default_External_170_68" style="padding: 0px; ">
              <div class="graphic_textbox_layout_style_default">
                <p style="padding-top: 0pt; " class="paragraph_style">Stefan Tielemans<br /></p>
                <p class="paragraph_style">Hertog Jan 1 Laan 8<br /></p>
                <p style="padding-bottom: 0pt; " class="paragraph_style">5616 CB, Eindhoven</p>
              </div>
            </div>
          </div>
          


          <div id="id2" style="height: 88px; left: 530px; position: absolute; top: 44px; width: 221px; z-index: 1; " class="style_SkipStroke_1 shape-with-text">
            <div class="text-content graphic_textbox_layout_style_default_External_221_88" style="padding: 0px; ">
              <div class="graphic_textbox_layout_style_default">
                <p style="padding-top: 0pt; " class="paragraph_style">T: +31624905686<br /></p>
                <p class="paragraph_style">@: <a class="class1" title="mailto:djfaberdux@gmail.com" href="mailto:djfaberdux@gmail.com">stefandefox@hotmail.com</a><br /></p>
                <p style="padding-bottom: 0pt; " class="paragraph_style">W: <a title="http://www.dj-huren-eindhoven.nl" href="http://www.dj-huren-eindhoven.nl">www.dj-huren-eindhoven.nl</a></p>
              </div>
            </div>
          </div>
          


          <div id="id3" style="height: 68px; left: 828px; position: absolute; top: 44px; width: 135px; z-index: 1; " class="style_SkipStroke_1 shape-with-text">
            <div class="text-content graphic_textbox_layout_style_default_External_135_68" style="padding: 0px; ">
              <div class="graphic_textbox_layout_style_default">
                <p style="padding-top: 0pt; " class="paragraph_style"><a onclick="window.open(this.href); return false;" title="http://soundcloud.com/djfaberdux" href="http://soundcloud.com/djfaberdux" onkeypress="window.open(this.href); return false;">SoundCloud</a><br /></p>
                <p class="paragraph_style"><a onclick="window.open(this.href); return false;" title="http://www.facebook.com/DjFaberDux" href="http://www.facebook.com/DjFaberDux" onkeypress="window.open(this.href); return false;">Facebook</a><br /></p>
                <p style="padding-bottom: 0pt; " class="paragraph_style"><a onclick="window.open(this.href); return false;" title="http://www.twitter.com/faberdux1" href="http://www.twitter.com/faberdux1" onkeypress="window.open(this.href); return false;">Twitter</a></p>
              </div>
            </div>
          </div>
          


          <div style="height: 41px; width: 200px;  height: 41px; left: 0px; position: absolute; top: 57px; width: 200px; z-index: 1; " class="tinyText style_SkipStroke stroke_0">
            <a href="http://www.pepijngieles.nl/GielesDesign" title="http://www.pepijngieles.nl/GielesDesign" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;"><img src="DJ_Faber_Dux_files/droppedImage_1.png" alt="" style="border: none; height: 41px; width: 201px; " /></a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

MitchellBouwman · 24 sep 2012

De website is hélémaal verkeerd gecodeerd. Zo gebruik je ontzettend veel ''style='' terwijl dat mooier is en vooral sneller om in een apparte .css bestand te doen.

HTML
<div id="header"><img src="../plaatjes/header.jpg''></div>

CSS:
#header{
width: 100px;
height: 50px;
margin: [boven]px, [rechts]px, [onder]px, [links]px;
}

csshunter · 24 sep 2012

Hoi djfaberdux,
Mmm, het valt wel mee met de "he-le-maal verkeerde codering".
En de kritieke punten zijn niet de styles, maar de html-code:

Het rijtje metatags van metatags.nl lijkt per abuis over het Doctype heen geplakt te zijn ipv. binnen de <head> te staan.
Daardoor is het Doctype bovenaan weggevallen. Als eerste regel hoort er te staan:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   ... enz.

Datzelfde rijtje metatags hoort steeds afgesloten te worden met /> in plaats van met een > alleen.
De <title>...</title> regel is per ongeluk tussen de </html> en de <body> komen te staan, maar hoort binnen de <head>...</head>.
De <h1>...</h1> regel staat daar ook, maar hoort binnen de <body>...</body>.

Doe je dat, dan is het helemaal valid xhtml-1.0 strict.

Test: faberd.htm met Congratulations van de html-validator.

Verder mag het dan mooier zijn de styles apart te zetten (in de <head>), maar dat zal het iweb-bouwapparaat er zo in hebben gezet, en het werkt wel zoals het hoort. - Omdat het een één-pagina site is, heeft het ook geen voordelen om een extern css-stylesheet aan te roepen (vertraagt alleen maar).

En ... in mijn Internet Explorer 7 heb ik geen enkel probleem met de pagina (ook al niet met de foute coderingen er in).

De vraag dus: in welke versie van IE komt de site niet tevoorschijn, en op welk Operating System?
En doet de bovenstaande test-pagina het wel?

Met vriendelijke groet,
CSShunter
____________
PS: Moet Gieles Design het probleem eigenlijk niet oplossen?

djfaberdux · 27 sep 2012

Ja het probleem is al opgelost, het bleek zo te zijn dat mijn google verificatie code er nog in stond. En de pagina werd door verwezen naar /djfaberdux.html na dit aan te hebben gepast en de gehele bestandenlijst opnieuw te hebben upgeload is alles opgelost

het verkeerd plaatsen van de header en h1 is expres gedaan, deze komt zo achter de achtergrond te staan, hierdoor ziet google hem wel als title en discription voor google, de site ins namelijk opgebouwd uit de rubrieken <div>, hier heeft google geen inzicht in en kan deze niet uitlezen. Daarom heb ik deze aparte title en discription achter de pagina gezet. Echter moet gieles design dit nog wel even aanpassen en in het rubriek welkom als begintext neerzetten om fraude via google te voorkomen

Bedankt voor de tips en ik zal hier zeker nog even naar kijken

djfaberdux · 27 sep 2012

alleen moet ik de h1 nog even weghalen, en deze in de metatag discription plaatsen

dan is hij voorlopig in orde

csshunter · 29 sep 2012

Hoi djfaberdux,
Tja, als het om Google-geschiktheid gaat, kan je Apple's iWeb en de webontwerper wel eens diep in de ogen kijken.

Jammer: de site levert door z'n één-pagina / ajax-constructie bitter weinig aanknopingspunten voor de Google-bot. Die kan niet met javascript uit de voeten en kan daarom geen enkele inhoudelijke tekst zien, noch van de homepage-tekst, noch van de inschuivende vervolgpagina's. Behalve de adresgegevens onderop kan alleen de <title> en de <description> en een <h1> nog wat opleveren.
Wat dat betreft ziet Google hetzelfde als wat een voorleesbrowser voorleest:

(Uit een plaatjes-link met alleen als beschrijving "schuine streep shapeimage onderstreepje één png" valt niet veel te halen.)
(NB: niet te verwarren met de link "schuine streep shapeimage onderstreepje twee png"

)
(De link "droppedImage onderstreepje één png" laat ook vrij veel aan de fantasie van de luisteraar over)

Of wat een pure text-browser uit de pagina haalt:

Lynx-resultaat live

Dat is niet veel voor een trefwoorden-beluste en pagina-verslindende Google-bot ...
En ook op scherm gebeurt er niet veel als javascript bij een bezoeker uit mocht staan.

scriptloos

Daarbij komt dat alle javascript-geweld de site behoorlijk traag maakt. Er moet alleen al zo'n kleine 600kB (ruim meer dan 1/2 MB!) aan scripts gedownload worden (plus wat die met zich meebrengen aan extra images en css-bestanden van elders):

site-scripts
iWebSite.js ......: 142kB
iWebImage.js ......: 39kB
iWebMediaGrid.js ..: 63kB
WidgetCommon.js ...: 35kB
Paste.js ...........: 2kB
DJ_Faber_Dux.js ....: 1kB
jquery.min.js .....: 19kB
jquery.js .........: 93kB
wowslider.js ......: 11kB
script.js ..........: 1kB
========================= 406kB

import-scripts van elders
ga.js .............: 14kB
SoundCloudWidget ..: 51kB
hubclient.js .......: 3kB
googlePlusOne .....: 29kB
plusone.js .........: 7kB
all.js ............: 58kB
widgets.js ........: 24kB
========================= 186kB
......................... =====
tot. 17 script-bestanden: 592kB

All-in moeten er 69 bestanden voor de pagina gedownload worden: 69 trage http-requests en dan nog downloaden (ruim 6 sec. voordat alles binnen is, zegt Chrome's ontwikkel-hulpprogramma).
Afijn, ik zou de site nooit op zo'n manier gebouwd hebben (zonder ajax en allerlei widgets kan het ook, en ook op 1 pagina, en ook 3x zo snel, zonder aan Google enz. afbreuk te doen). Maar wie ben ik?

Met vriendelijke groet,
CSShunter
_______
PS: De droppedImage.png met de sterretjes (van 160kB en 1.000px × 600px, met 16 miljoen kleuren en alpha-kanaal) kan bezwaarloos teruggebracht worden tot deze 16-kleurige droppedImage-nw.png zonder alpha-kanaal: 280px × 600px en 11kB; te plaatsen als herhalend background-image.
Scheelt alvast 150kB en een iets snellere site.

Website laadt niet in Internetexplorer wel in chrome en firefox?

djfaberdux

Nieuwe gebruiker

MitchellBouwman

Gebruiker

csshunter

Meubilair

djfaberdux

Nieuwe gebruiker

djfaberdux

Nieuwe gebruiker

csshunter

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy