Archief - xHTML: in firefox ok, in IE niet

exserco · 31 okt 2006

Hallo,

Ik zal maar beginnen met me te excuseren, want het zal waarschijnlijk mijn onkunde zijn die de fout veroorzaakt. Dit is dus mijn eerste project webdesign en ik heb ongetwijfeld nog veel te leren. :bow:

Kan er mij iemand helpen met het volgende?

Ik probeer in een form een tekstveld te integreren en dit goed te laten verschijnen. Nu doet Firefox de uitlijning van de textarea perfect, maar IE niet, want hij schuift het vak naar rechts waardoor de rechterkant van de textarea buiten de div komt te staan. Dit is helemaal onderaan in de content-div.

Waar gaat het fout? :cry:

Code:

<!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" xml:lang="nl" lang="nl">
<head>
<title>Mamo: luchthaven- en personenvervoer</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<link href="form.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {
	color: orange;
	font-size: x-small;
	text-align: right;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('pics/button_start_rollover.gif','pics/button_voordelen_rollover.gif','pics/button_servicelijst_rollover.gif','pics/button_werknemerslijst_rollover.gif','pics/button_reserveren_rollover.gif','pics/button_contact_rollover.gif','pics/button_links_rollover.gif')">
<div id="container">
  <div id="header">
    <div align="center"><img src="pics/hoofd_bckgrnd.jpg" alt="logo Mamo" /> </div>
  </div>
  <div id="menu"> <br />
      <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('start','','pics/button_start_rollover.gif',1)"><img src="pics/button_start.gif" alt="Start" name="start" width="130" height="35" border="0" id="start" /></a><br />
      <a href="voordelen.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Voordelen','','pics/button_voordelen_rollover.gif',1)"><img src="pics/button_voordelen.gif" alt="Onze Voordelen" name="Voordelen" width="130" height="35" border="0" id="Voordelen" /></a><br />
      <a href="servicelijst.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('servicelijst','','pics/button_servicelijst_rollover.gif',1)"><img src="pics/button_servicelijst.gif" alt="Servicelijst" name="servicelijst" width="130" height="35" border="0" id="servicelijst" /></a><br />
      <a href="werknemerslijst.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Werknemerslijst','','pics/button_werknemerslijst_rollover.gif',1)"><img src="pics/button_werknemerslijst.gif" alt="Werknemerslijst" name="Werknemerslijst" width="130" height="35" border="0" id="Werknemerslijst" /></a><br />
      <a href="reserveren.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Reserveren','','pics/button_reserveren_rollover.gif',1)"><img src="pics/button_reserveren_select.gif" alt="Reserveren" name="Reserveren" width="130" height="35" border="0" id="Reserveren" /></a><br />
      <a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','pics/button_contact_rollover.gif',1)"><img src="pics/button_contact.gif" alt="Contact-info" name="Contact" width="130" height="35" border="0" id="Contact" /></a><br />
      <a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','pics/button_links_rollover.gif',1)"><img src="pics/button_links.gif" alt="Links naar andere sites" name="links" width="130" height="35" border="0" id="links" /></a>
      <p><br />
          <br />
        <br />
        <br />
        <br />
        <br />
      </p>
  </div>
  
<!-- vanaf hier komt de inhoud -->

  <div id="content">
    <div align="left">
	<p><em><strong>Gelieve deze pagina nog niet te gebruiken, we zitten nog in een testfase. De verwerking gebeurt nog niet automatisch! Gelieve een mail te sturen naar <a href="mailto:[email protected]?subject=Reservering luchthavenvervoer">[email protected]</a></strong></em></p>
      <form name="formulier" action="mailto:[email protected]?subject=bestelformulier luchthavenvervoer" method="post" enctype="text/plain">
        <fieldset>
		
<!-- hier fout oplossen mbt versturen gegevens -->
		
          <legend>Algemene info</legend>
          <label for="naam">Naam :</label><input name="naam" type="text" class="invulveld" value="" size="30" /><br>
          <label for="straat">Straat :</label><input name="straat" type="text" class="invulveld" size="30" /><br>
		  <label for="nr">Nr. :</label><input name="huisnr" type="text" class="invulveld" size="4" /><br />
          <label for="postcode">Postcode :</label><input name="postnummer" type="text" class="invulveld" size="4" maxlength="4" /><br>
		  <label for="gemeente">Gemeente :</label><input name="gemeente" type="text" class="invulveld" size="30" /><br />
          <label for="telefoon">Telefoon :</label><input name="telefoon" type="text" class="invulveld" size="15" /><br>
          <label for="gsm">GSM :</label><input name="gsm" type="text" class="invulveld" size="15" /><br>
          <label for="e-mail">E-mail :</label><input name="e-mail" type="text" class="invulveld" size="30" />
        </fieldset>
        <p><br />
        </p>
        <fieldset align>
          <legend>Traject</legend>
          <input type="radio" name="Heen/Terug" value="Heen en Terug" checked />
          Heen en Terug
          <input type="radio" name="Heen/Terug" value="Enkel Heen" />
          Enkel Heen
          <input type="radio" name="Heen/Terug" value="Enkel Terug" />
          Enkel Terug
        </fieldset>
        <p><br />
        </p>
        <fieldset>
          <legend>Gegevens van de heenreis</legend>
          <label for="datumvertrekvlucht">Datum vertrek vlucht :</label><input name="datum vertrek vlucht" type="text" class="invulveld"><br />
          <label for="uurvertrek">Uur vertrek vlucht :</label><input name="uur vertrek vlucht" type="text" class="invulveld"><br />
          <label for="uurophaling">Uur gewenste ophaling :</label><input name="uur gewenste ophaling" type="text" class="invulveld"><br />
          <label for="luchthavenvertrek">Luchthaven van vertrek :</label><input name="luchthaven van vertrek" type="text" class="invulveld" value="Zaventem"><br />
        </fieldset>
        <p><br />
        </p>
        <fieldset>
          <legend>Gegevens van de terugreis</legend>
          <label for="datumaankomstvlucht">Datum AANKOMST vlucht :</label><input name="datum aankomst vlucht" type="text" class="invulveld"><br />
          <label for="uuraankomstvlucht">Uur AANKOMST vlucht :</label><input name="uur aankomst vlucht" type="text" class="invulveld"><br />
		  <label for="luchthavenherkomst">Luchthaven van herkomst :</label><input name="luchthaven van herkomst" type="text" class="invulveld" value="bv. Madrid" /><br />
		  <label for="vluchtnummer">Vluchtnummer :</label><input name="vluchtnummer" type="text" class="invulveld" /><br>
          <label for="luchthavenaankomst">Luchthaven van aankomst :</label><input name="luchthaven aankomst" type="text" class="invulveld" value="Zaventem"><br />
        </fieldset>
        <p><br /></p>
        <fieldset>
          <legend>Extra info of vragen</legend>
          <textarea name="extra" cols="70" rows="5" wrap="virtual"></textarea>
        </fieldset>
        <p><br />
        </p>
        <input name="submit" type="submit" value="Formulier versturen" />
        <input name="reset" type="reset" value="Formulier wissen" />
        <br />
      </form>
    </div>
  </div>
  <div id="footer">
    <div align="right" class="style1">Contacteer de <a href="mailto:[email protected]?subject=mailtje vanaf de Mamo.be-site">webmaster</a> als de pagina fouten bevat.<br />
      Deze site werd ontwikkeld voor een resolutie van minimum 1024*768 voor IE 6 (of hoger) of Firefox 1.5  (of hoger). </div>
  </div>
</div>
<div align="right">
</div>
  
  
  </div>
</div>
</body>
</html>

css-code layout

Code:

body {
	margin: 0 auto;
	padding: 10px;
	font-family: Georgia, Times, Serif;
	color: black;
	width: 800px;
	text-align: center; /*voor IE*/
	background-color: #FCF8AD;
}

div#container {
	width: 780px;
	overflow: hidden;
	border: 1px solid orange;
	height: 100%;
	min-height: 100%;
}

div#header {
	width: auto;
	clear: both;
	text-align: left;
	padding: 5px;
	margin-left: 10px;
}

div#menu {
	width: 150px;
	float: left;
	padding: 5px;
	text-align: center;
	border-right: 1px solid orange;
	border-top: 1px solid orange;
	background-image: url(pics/background_menu.jpg);
	background-position: right top;
	background-repeat: no-repeat;
}

div#content {
	width: auto;
	padding: 5px;
	margin-left: 160px; /* doordat in menu de padding links en rechts telkens 5px is */
	text-align: left;
	border-top: 1px solid orange;
	border-left: 1px solid orange;
}

div#footer {
	width: auto;
	clear: both;
	padding-left: 5px;
	padding-right: 5px;
	border-top: 1px solid orange;
}

css-code form

Code:

body {
  text-align:left;
}

fieldset {
	border: orange solid 1px;
	width: 36em;
}

legend {
  border: orange solid 1px;
  padding: 1px 10px;
}

label {
  width: 13em; /* hier stel je de breedte van de label in*/
  float:left;
  text-align:right;
  margin: 1px 1em 1px 0;
  clear:both
}

.invulveld {
  margin-bottom: 3px;
  margin: 1px 1em 0px 0;
  border: 1px solid orange;
}

.knop {
  margin-left: 6em;
  margin-bottom: 1em;
  color: #000;
  clear:both;
  border: 2px #CCF outset;
}

Ik hoop dat er iemand me op de goede weg kan helpen. :crazy:

maatje · 1 nov 2006

die selectoren moet je gebruiken met spatie dus

div #container { } of je kunt ook die woord "div" niet gebruiken

exserco · 1 nov 2006

maatje zei:
die selectoren moet je gebruiken met spatie dus

div #container { } of je kunt ook die woord "div" niet gebruiken

Heb dat net effe aangepast maar ........:doh:

dan gaat de border van mijn container weg in FF en in IE gaat die border ook weg, maar dan centered hij zelfs de pagina niet meer

Smoerf · 1 nov 2006

spatie moet enkel als de tag binnen de andere valt

vb

body #content{
/* eigenschappen*/
}

zal er voor zorgen dat de div met id content IN de body tag de eigenschappen heeft

div#content{
/* eigenschappen */
}

zorgt ervoor dat enkel een DIV element met die id de eigenschappen heeft, dus <p id="content"> zou niets van die eigenschappen hebben...

Heb je ergens een online versie staan van je probleem?

exserco · 1 nov 2006

Smoerf zei:
Heb je ergens een online versie staan van je probleem?

Jawel,

http://www.mamo.be/reserverenlucht.html

Hier gaat het verkeerd. De andere pagina's zijn goed. Het lijkt me specifiek met die "textarea" te zijn dat het foutgaat.

Xavez · 1 nov 2006

Ik heb wel een workaround gevonden:

HTML:

        <fieldset>
          <legend>Extra info of vragen</legend>
		  <label for="extra">&nbsp;</label>
          <textarea name="extra" cols="70" rows="5"></textarea>
        </fieldset>

Als je het dan semantisch wilt houden kan je best alsnog een omschrijving geven binnen dat label en dan het label verbergen:

HTML:

        <fieldset>
          <legend>Extra info of vragen</legend>
		  <label for="extra" class="hide">Semantische omschrijving</label>
          <textarea name="extra" cols="70" rows="5"></textarea>
        </fieldset>

Code:

.hide {display: none;}

exserco · 1 nov 2006

Xavez:

ik zal je oplossing het komende weekend eens testen. ben nu volledig onverwachts voor het werk in het buitenland tot einde deze week.

alvast bedankt, ik laat je iets weten.

exserco · 4 nov 2006

Xavez zei:
Ik heb wel een workaround gevonden:

HTML:

<fieldset> <legend>Extra info of vragen</legend> <label for="extra"> </label> <textarea name="extra" cols="70" rows="5"></textarea> </fieldset>

Als je het dan semantisch wilt houden kan je best alsnog een omschrijving geven binnen dat label en dan het label verbergen:

HTML:

<fieldset> <legend>Extra info of vragen</legend> <label for="extra" class="hide">Semantische omschrijving</label> <textarea name="extra" cols="70" rows="5"></textarea> </fieldset>

Code:

.hide {display: none;}

Thank you very much !!:applause:

:offtopic:

FLuoKaBouTeR · 4 nov 2006

Dit is maar om je te helpen,
zou je beter geen labels definiëren onder 'traject' voor de tekst van die radiobuttons.
Zo kunnen de mensen ook op die tekst klikken ipv op het bolletje te moeten mikken.
Verhoogt de ergonomiteit weer wat

exserco · 4 nov 2006

FLuoKaBouTeR zei:
Dit is maar om je te helpen,
zou je beter geen labels definiëren onder 'traject' voor de tekst van die radiobuttons.
Zo kunnen de mensen ook op die tekst klikken ipv op het bolletje te moeten mikken.
Verhoogt de ergonomiteit weer wat

Zeer goede tip, dank je wel. :bow:

Archief - xHTML: in firefox ok, in IE niet

exserco

Legacy Member

maatje

Legacy Member

exserco

Legacy Member

Smoerf

Legacy Member

exserco

Legacy Member

Xavez

Legacy Member

exserco

Legacy Member

exserco

Legacy Member

FLuoKaBouTeR

Legacy Member

exserco

Legacy Member