eerder topic   volgend topic
  
Internet Explorer toont Dreamweaver-site niet juist
26 mei 2008 - 12:47   
geplaatst door: StoffelXYZ
Hoi,

Het is weer zover.

Ik ben een site aan het ontwerpen in Dreamweaver.

http://www.lcns.be/7211/ (testsite)

In Firefox wordt de site juist getoond.

In Internet Explorer niet ... de DIV-elementen staan niet juist gepostioneerd en de achtergrond van het logo en de navigatiemenu is er niet transparant ...

Aangezien het in Firefox wel werkt, heb ik geen idee hoe ik beide zaken kan oplossen.

Kent er iemand de oplossing aub?

Dank bij voorbaat.

Groetjes,

Stoffel

Internet Explorer toont Dreamweaver-site niet juist
26 mei 2008 - 13:25    reactie #1
geplaatst door: Godfather
V.w.b. achtergrond niet transparant, IE lust .png bestanden niet. Gebruik dan gif als ze echt transparant moeten zijn. Of deel de site in middels 'slices' waar de achtergrond van de navigatiemenustructuur (woordwaardex3) al verwerkt is in de afbeelding zelf.

Voor de rest even te weinig tijd en kunde momenteel.

Mac Pro '08 - iPad 16GB - iPhone 6 - Next Gen MB Pro
Internet Explorer toont Dreamweaver-site niet juist
26 mei 2008 - 14:01    reactie #2
geplaatst door: mk
mmm. is dit code die zo uit dreamweaver komt rollen? Eigenlijk is het nog een wonder dat FF 't wel 'goed' rendert. 't zit voornamelijk in de widths / margins die je gebruikt. In IE valt je maincontent (800px) helemaal naar beneden omdat 't gewoon niet past tussen de sidebar divs (aangezien je container ook een fixed size heeft (920px). In je header zitten ook tal van paddings die je liever niet op deze manier doet. (al helemaal niet door je img tussen h1 tags te zetten en de h1 dan te stylen..)

Van dreamweaver gebruik ik alleen de codeview.. Voorderest maakt dreamweaver er een potje van zo te zien. Hoe je dat binnen dreamweaver moet oplossen..? Geen idee! Weggooien en zelf code typen levert aanzienlijk betere html op...

Internet Explorer toont Dreamweaver-site niet juist
26 mei 2008 - 15:21    reactie #3
geplaatst door: StoffelXYZ
Hoi,

Bedankt voor de reacties.

1.  Ik kijk hier enigszins verbaasd van op.  Ik wist niet dat Dreamweaver ook zulke slechte code genereerde.  Deze site is gebaseerd op een CSS-ontwerp dat standaard in Dreamweaver zit ... Da's toch een tegenvaller.  :mad:

Ik heb de tijd niet meer om helemaal opnieuw te beginnen.  

Ik ga dan ook proberen om de fouten er via Dreamweaver eruit te halen ... Hopeljk lukt het.   :wacko:  

2.  Ik zal eens een poging met GIF ondernemen.  Ik kan de afbeeldingen niet in de achtergondafbeeldig (2 x woordwaarde) opnemen omdat ik er dan geen imagemap/hotspots aan kan koppelen.

Groetjes,

Stoffel

(Bewerkt door StoffelXYZ om 15:34, 26-05-2008)

Internet Explorer toont Dreamweaver-site niet juist
26 mei 2008 - 15:48    reactie #4
geplaatst door: Fix
maak dan van dat bollenmenu gewoon een jpg'tje, waarin de achtergrond gewoon klopt met de rest van het verloop.
dan krijg je ook niet van die lelijke kartelranden.

bovendien snap ik niet waarvoor je 12 CSS-classes voor nodig hebt? Aan de site te zien heb je er lang niet zoveel nodig.

(Bewerkt door Fix om 15:51, 26-05-2008)

Internet Explorer toont Dreamweaver-site niet juist
26 mei 2008 - 18:39    reactie #5
geplaatst door: StoffelXYZ

Citaat
Fix om 15:48, 26-05-2008
maak dan van dat bollenmenu gewoon een jpg'tje, waarin de achtergrond gewoon klopt met de rest van het verloop.
dan krijg je ook niet van die lelijke kartelranden.

bovendien snap ik niet waarvoor je 12 CSS-classes voor nodig hebt? Aan de site te zien heb je er lang niet zoveel nodig.

(Bewerkt door Fix om 15:51, 26-05-2008)

Goed idee.

En ... al die CSS-classes zitten standaard in de CSS-layout die ik geselecteerd had.  Ik was zinnens om achteraf zoveel mogelijk de overbodige code te verwijderen.

Er is nog veel werk aan de winkel...

Internet Explorer toont Dreamweaver-site niet juist
26 mei 2008 - 19:17    reactie #6
geplaatst door: Plexyglazz
Dreamweaver is helaas niet de heilige graal voor webdesign.  :sad:

Maar de oplossing ...

Wat hierboven al is aangegeven;
- margins/paddings: IE gaat hier gewoon verkeerd mee om (niet W3C compliant)
- PNG met transparantie: IE lust ze niet zomaar. (hier is geloof ik wel een hack voor)

Voor het menu zou je eventueel ook Flash kunnen gebruiken (liever niet natuurlijk ...) of je kunt via FireWorks/ImageReady het menu ontwerpen, inclusief alle links en mouse-overs, en die vervolgens in Dreamweaver verwerken (met imagemaps et-cetera en alle andere problemen die hierbij weer kunnen ontstaan.  . :crazy:

Internet Explorer toont Dreamweaver-site niet juist
26 mei 2008 - 19:25    reactie #7
geplaatst door: StoffelXYZ

Hier nog twee  oplossingen die me aangereikt zijn voor het PNG-probleem, buiten de suggestie van Fix:

1) via javascript: zie http://homepage.ntlworld.com/bobosola/index.htm . Enige vereist is dus Javascript bij de client.

2) oplossing van Microsoft: http://support.microsoft.com/kb/294714

Internet Explorer toont Dreamweaver-site niet juist
26 mei 2008 - 20:53    reactie #8
geplaatst door: mk
Voor het png probleem... Een transparante GIF is niet goed genoeg? (ik kan me voorstellen dat door die 'gradients' in de bollen een gif misschien te weinig kleuren heeft (aangezien je vast zit aan 256 kleuren))

Je kunt de layout wel fixen door de meeste paddings weg te halen (en dat op een andere manier/plaats te doen als je ze echt nodig hebt). In ieder geval in header en header h1. plaatje uit je H1 tags halen.  maincontent een andere width geven (eventueel float: left (zodat tie zeker tegen sidebar1 aan zit). in IE doet dan ook 't menu plaatje in sidebar1 raar (door de vaste hoogte). Dan zou je bv header een height kunnen geven en een position: relative. Dan kan je de img in sidebar1 position: absolute doen + top: 0px (uit m'n hoofd, dus 't kan zijn dat er uiteindelijk weinig van klopt :biggrin:

Hoewel je in IE nog wel een background had in container. geen idee of dan alles nog netjes matched met die achtergrond. Zo ja, dan is het toch verstandig om de layout opnieuw op te bouwen gebaseerd op die achtergrond.
Het handigst is dan elke div een border: 1px solid red (oid) mee te geven, zodat je ziet waar/hoe je divs lopen...
(zie je ook meteen de verschillende renderings issues tussen FF en IE).

Internet Explorer toont Dreamweaver-site niet juist
27 mei 2008 - 01:46    reactie #9
geplaatst door: StoffelXYZ
Ik heb de hierboven gegeven suggesties trachten toe te passen.

Ik heb onder andere de breedte van de div maincontent behoorlijk verkleind.

Na enkele uren prutsen is het nog niet gelukt.   In Internet Explorer wordt het nog steeds niet juist weergegeven als ik het online zet.

http://www.lcns.be/7211

Code van de template

Code: [Selecteer]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>template</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body  {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* het is een goede gewoonte om de instellingen voor margin (marge) en padding (opvulling) van het element body op nul in te stellen en daarmee op de standaardinstellingen van de verschillende browsers */
padding: 0;
text-align: center; /* hiermee centreert u de container (het hoofdobject) in IE 5*-browsers Vervolgens wordt de tekst ingesteld op de standaardinstelling van links uitlijnen in de kiezer #container */
color: #000000;
/*background-image: url();  in commentaar gezet*/
}
.thrColFixHdr #container {
width: 920px;
height: 618px;
margin: 0  auto;  /* de automatische marges (d.m.v. auto), in combinatie met een breedte, centreren de pagina */
text-align: left; /* hiermee wordt de instelling text-align: center voor het element body genegeerd. */
background-image: url(websitemenufullsponsors.jpg);
background-repeat: no-repeat;
background-position: left;
display: block;
border: 1px solid #FF0000;
}
.thrColFixHdr #header {
border: 1px solid #FF0000;
height: 110px;

}
.thrColFixHdr #header h1 {
margin: 0; /* door het gebruik van padding (opvulling) in plaats van een marge (via het element margin) kunt u het element van de randen van het element div vandaan houden */
height: 90px;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
}
.thrColFixHdr #sidebar1 {
float: left; /* aangezien dit een zwevend element betreft, moet er een breedte worden opgegeven */
width: 155px; /* met een waarde voor padding houdt u de inhoud van het element div van de randen vandaan */
height: 475px;
border: 1px solid #FF0000;
position: relative;
top: 0px;
}
.thrColFixHdr #sidebar2 {
float: right; /* aangezien dit een zwevend element betreft, moet er een breedte worden opgegeven */
width: 105px; /* met een waarde voor padding houdt u de inhoud van het element div van de randen vandaan */
height: 475px;
border: 1px solid #FF0000;
position: relative;
top: 0px;
}
.thrColFixHdr #mainContent {
margin: 157 0px;
height: 475px;
width: 540px;

border: 1px solid #FF0000;


}
.thrColFixHdr #footer {
padding: 0;
position: relative;
top: 0px;
border: 1px solid #FF0000;
}
.thrColFixHdr #footer p {
margin: 0; /* door het gebruik van padding (opvulling) voor dit element maakt u ruimte (op dezelfde manier als door middel van een marge), zonder het probleem van wegvallende marges
padding-top: 0
px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0; */
clear:both;
border: 1px solid #FF0000;
}
.fltrt { /* dit exemplaar van class kan worden gebruikt om een element aan de rechterzijde van uw pagina te laten zweven. Het zwevende element moet voorafgaan aan het element dat, op de pagina, naast het zwevende element moet staan. */
float: right;
margin-left: 8px;
}
.fltlft { /* dit exemplaar van class kan worden gebruikt om een element aan de linkerzijde van uw pagina te laten zweven. */
float: left;
margin-right: 8px;
}
.clearfloat { /* dit exemplaar van class moet op een element div of break zijn geplaatst en dient het laatste element te zijn vóór de afsluiting van een container (hoofdobject) die op zijn beurt een zwevend object volledig dient te bevatten */
clear:both;
   height:0;
   font-size: 1px;
   line-height: 0px;
}
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* plaats in deze voorwaardelijke opmerking op het vakmodel gebaseerde css-correcties voor alle versies van IE 5* */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* plaats in deze voorwaardelijke opmerking css-correcties voor alle versies van IE */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* de bovenstaande softwaregebonden eigenschap zoom geeft IE de hasLayout die IE nodig heeft om verschillende bugs te vermijden */
</style>
<![endif]-->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>

<body class="thrColFixHdr">

<div id="container">
 <div id="header">
   <a href="../index.html"><img src="logo_met_R.png"  longdesc="../index.html" /></a>
 <!-- end #header --></div>
 <div id="sidebar1"><img src="menustructuur.png" alt="Navigatiemenu" width="153" height="439" border="0"  usemap="#Map"/>
   <map name="Map" id="Map">
<area shape="circle" coords="76,363,77" href="shop.html" />
<area shape="circle" coords="91,280,63" href="aanbod.html" /><area shape="circle" coords="49,223,40" href="links.html" /><area shape="circle" coords="97,191,48" href="contact.html" /><area shape="circle" coords="54,150,38" href="wedstrijd.html" /><area shape="circle" coords="98,113,30" href="galerij.html" />
<area shape="circle" coords="51,92,49" href="referenties.html" />
<area shape="circle" coords="83,54,30" href="wie_is_wie.html" />
<area shape="circle" coords="54,25,25" href="../index.html" />
<area shape="circle" coords="81,155,2" href="#" target="_self" alt="Home" />
</map>
<!-- end #sidebar1 -->
 </div>
 <div id="sidebar2">
   
 <!-- end #sidebar2 --></div>
 <!-- TemplateBeginEditable name="EditRegion_mainContent" -->
 <div id="mainContent">
   <!-- end #mainContent -->
 </div>
 <!-- TemplateEndEditable -->
 <!-- Dit wiselement dient onmiddellijk te volgen op het element div voor #mainContent om het element div voor #container te dwingen om alle zwevende elementen van een lager niveau te bevatten --><br class="clearfloat" />
 <div id="footer">
   <p>Footer</p>
 <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

:wacko:

Is er iemand die me kan vertellen wat er nog fout is in de code?

Dank bij voorbaat,

Stoffel

Internet Explorer toont Dreamweaver-site niet juist
27 mei 2008 - 08:17    reactie #10
geplaatst door: mk
Is de website zoals hij in FF wordt getoond wel juist? (daar mis ik nl sowieso de background van de container). Wat moet er anders/beter in IE? Als je weet wat een div met bepaalde style attributen doet, en daar tevreden over bent, kan je de borders wel weer weghalen... (kan nl ook wel weer enkele negatieve effecten hebben (in dit geval niet zo te zien)).

De vraag is eigenlijk meer, hoe moet 't er uit komen te zien?

Internet Explorer toont Dreamweaver-site niet juist
27 mei 2008 - 08:53    reactie #11
geplaatst door: StoffelXYZ
Eigenlijk moet het er zo uitzien:

http://www.antwerpsmash.net

De persoon die de achtergrondafbeelding heeft gemaakt, had even snel op basis van de achtergrond met enkel een "bewerkbaar gebied" dit als test online gezet.

Ik dacht ... ik zal "volgens de regels van de kunst" met CSS en DIV's werken ... maar er zitten nogal wat addertjes onder het gras  :wink:

Internet Explorer toont Dreamweaver-site niet juist
27 mei 2008 - 09:20    reactie #12
geplaatst door: Godfather
Je hebt dus een werkend voorbeeld, slice die achtergrondafbeelding in stukken en werk op die manier met divjes. Alle slices in een div knikkeren en je hebt je site.

Die imagemaps kan je zelfs nog steeds gebruiken volgens mij en anders laad je de afbeelding in flash in en voer je daar onzichtbare knoppen in en importeer je de .swf weer in de div waar die hoort.

Mac Pro '08 - iPad 16GB - iPhone 6 - Next Gen MB Pro
Internet Explorer toont Dreamweaver-site niet juist
27 mei 2008 - 09:25    reactie #13
geplaatst door: mk
Dat is inderdaad 't makkelijkst. (handiger dan een layout van dreamweaver gebruiken die misschien net steeds wat anders wil). Die imagemap lijkt me geen probleem overigens. Ik zou niet met Flash gaan beginnen.
Internet Explorer toont Dreamweaver-site niet juist
27 mei 2008 - 10:14    reactie #14
geplaatst door: mk
een klein voorbeeldje (moet je wel nog de image etc juist slicen (maakt nu gebruik van 1 achtergrond image) maar als je de navigatie/logo/etc allemaal lostrekt zou je ze in de daarvoor bestemde divs kunnen plaatsen.... Zoiets dus...

mmm code pasten werkt niet :-(
Kan ik 't mailen?

online gezet dan maar: http://83.81.84.63/StoffelXYZ/

(Bewerkt door mk om 10:19, 27-05-2008)

Internet Explorer toont Dreamweaver-site niet juist
27 mei 2008 - 10:20    reactie #15
geplaatst door: Robert
[news]
Citaat
mk om 10:14, 27-05-2008
mmm code pasten werkt niet :-(

Voor code kan je de code-tags hier op het forum gebruiken.[/news]

Klik hier voor informatie over het onder de aandacht brengen van producten of diensten op MacFreak.
Internet Explorer toont Dreamweaver-site niet juist
27 mei 2008 - 10:24    reactie #16
geplaatst door: mk
Ja, maar dat ging dus niet. Maakte er een rommeltje van...  :cry:
Internet Explorer toont Dreamweaver-site niet juist
27 mei 2008 - 10:42    reactie #17
geplaatst door: StoffelXYZ
Toch nogmaals even vermelden hoe knap ik het vind dat er op dit forum zulke hulpvaardige leden zijn.  

Ik ben de code van mk even aan het trachten te implementeren.  Ik heb net een tutorial gevonden ove r het slicen van een afbeelding in Photoshop.

Internet Explorer toont Dreamweaver-site niet juist
27 mei 2008 - 14:32    reactie #18
geplaatst door: StoffelXYZ
Hoi mk,

http://www.lcns.be/7211

1. Ik heb jouw code als basis gebruikt voor de template.

2.Ik heb de achtergrondafbeelding gesliced en in de div's geplaatst.

3.  Ik heb deze oplossing gebruikt ivm het png-probleem:

http://homepage.ntlworld.com/bobosola/imagemap.htm

4.  Ik heb het logo en de navigatiemenu als png toegevoegd en aan de navigatiemenu een imagemap/hotspots toegevoegd.

Er blijven echter nog enkele kleine doch vervelden probleempjes bestaan:


1.  In FF is er een lelijke rand rond het logo zichbaar van zodra je er een url aan linkt.

Bij "mouseover" over de navigatiemenu wordt de onderliggende bol verkozen waardoor je niet helemaal juist kan navigeren.

2.  In IE wordt de afbeelding van de navigatiemenu naar beneden uitgerokken.

Kan er iemand me vertellen wat ik nog fout gedaan heb aub?  Ik begin stilletjsaan sterretjes te zien  :wacko: .

Code van de template:

Code: [Selecteer]

<!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">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 <meta name="language" content="" />
 <meta name="author" content="" />
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix_map.js"></script>
<![endif]-->

 <!-- TemplateBeginEditable name="doctitle" -->
 <title></title>
 <!-- TemplateEndEditable -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

 <style type="text/css">
 <!--  

* { margin: 0; padding: 0; }

body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #666666; text-align: center;  color: #000000; }
 
#container {
/*border: 1px solid pink;*/
position: relative;
margin: 0 auto;
width: 920px;
height: 618px;
text-align: left;
overflow: hidden
}
#header {
/*border: 1px solid green;*/
width: 920px;
height: 106px;
background-image: url(header.jpg);
}
#sidebar1 {
/*border: 1px solid brown;*/
width: 140px;
height: 485px;
float: left;
background-image: url(linkerkolom.jpg);
}
/*#sidebar1 img {
margin: 20px 0 0 25px;

}*/
#maincontent {
/*border: 1px solid blue;*/
width: 674px;
height: 485px;
/*margin-left: 15px;*/
float: left;
overflow: hidden;
background-image: url(maincontent.jpg);
}
#maincontent-inner { border: 1px solid orange; margin: 15px; }
#sidebar2 {
/*border: 1px solid purple;*/
width: 106px;
height: 485px;
float: right;
background-image: url(rechterkolom.jpg);
}
#footer {
/*border: 1px solid black;*/
height: 22px;
width: 920px;
clear: both;
background-image: url(footer.jpg);
}

 -->
 </style>

 <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>

<body>

<div id="container">

 <div id="header">
   <a href="http://www.7211.be"><img src="logo_met_R.png" alt="" /></a>  </div>
 <!-- end header div -->

 <div id="sidebar1"><img src="menustructuur.png" width="140" height="439" border="0"  usemap="#Map" />
 
 <map name="Map" id="Map">
 
 <area shape="circle" coords="48,60,23" href="../index.html" />
 <area shape="circle" coords="76,85,27" href="wie_is_wie.html" />
 <area shape="circle" coords="47,124,46" href="referenties.html" />
 <area shape="circle" coords="91,140,28" href="galerij.html" />
 <area shape="circle" coords="49,175,35" href="wedstrijd.html" />
 <area shape="circle" coords="91,212,44" href="contact.html" />
 <area shape="circle" coords="44,240,37" href="links.html" />
 <area shape="circle" coords="81,293,59" href="aanbod.html" />
 <area shape="circle" coords="69,368,71" href="shop.html" />
<area shape="circle" coords="80,92,0" href="#" target="_self" alt="Home" />

</map>
 
 </div>
 <!-- end sidebar1 div -->
 <!-- TemplateBeginEditable name="EditRegion1" -->
 <div id="maincontent">
   <div id="maincontent-inner">
     <p>Welkom op de site van 7211.
       
       Zoals u onmiddelllijk zal merken, bevindt deze site zich nog in een pril teststadium.
       
       Binnen enkele weken verschijnt hierop erg interessant nieuws.
     </p>
   </div>
 </div>
 <!-- TemplateEndEditable -->
 <!-- end maincontent div -->

<div id="sidebar2">

 </div>

<!-- end sidebar2 div -->

<div id="footer">
&nbsp;
</div>

</div> <!-- end container div -->

</body>
</html>


Dank bij voorbaat.

Groetjes,

Christophe

Internet Explorer toont Dreamweaver-site niet juist
27 mei 2008 - 14:51    reactie #19
geplaatst door: macvooh
/offtopic
mijn ervaring in webdesign is vooral: schrijf het zelf vanaf 0.. dan kan je geen problemen hebben..
hou je ook zo strict mogelijk aan de standaarden, en leer wat de verschillende box-model interpretaties en hacks/workarounds zijn..
t'is jammer dat het zo is, maar blame Internet Explorer voor het grootste deel van de ellende..
FREAK!
  
eerder topic   volgend topic