Identieke iframes met verschillend formaat in FF - Softwareontwikkeling

zaterdag 11 augustus 2007 17:34

Acties:

bekijk eens wat anders

Topicstarter

M'n website met veel iframes werkt in IE en zelfs op een Apple met Safari, maar niet in het door Tweakers heilig verklaarde Firefox

. Natuurlijk ligt dat aan mij, dat weet ik ook wel

. Omdat het aantal FF gebruikers erg hoog wordt moet ik nu toch echt een oplossing zoeken voor dit probleem. Ik heb reeds een poging gedaan om met Div's (layers) te werken maar dat gaat ook niet helemaal goed...

Ik kan maar het beste gewoon de link geven naar de website, dat is makkelijker dan uitleggen: Kliks

Naast een aantal andere fouten* zie je dat de onderste iframes (Sound en Image) maar 1/3 van de ruimte gebruiken ipv. 100%.

Dit is de pagina "Image":

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>the Michiel de Boer site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stijlen.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
<!--
// If no frames script (works also with i-frames)
if (parent.frames.length==0)
window.location="http://www.mdbsite.com"
//-->
</script>
</head>

<body bgcolor="#8C94C7" text="#000000" link="#000000" vlink="#000000" alink="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td height="50%"> 
      <iframe src="image-boven.htm" frameborder="0" width="100%" height="100%" scrolling="auto" name="image-boven"></iframe></td>
  </tr>
  <tr align="left" valign="middle"> 
    <td width="20%" height="17" align="left" valign="middle" class="image-balk"><a href="image-blank.htm"><img src="spacer.gif" width="100%" height="17" border="0"></a></td>
  </tr>
  <tr> 
    <td height="50%"> 
      <iframe src="image-onder.htm" frameborder="0" width="100%" height="100%" scrolling="auto" name="image-onder"></iframe></td>
  </tr>
</table>
</body>
</html>

Bovenste en onderste iframes zijn identiek dus ik snap en geen snars van... De pagina's in de bovenste en onderste iframes zijn ook identiek wat code betreft.

sterretje:
_{*Zoals je ziet staat het zaakje niet helemaal recht in FF en gaat de tekst van de knoppen omlaag bij rollover (tekst is background via stylesheet). Ook luisterd Firefox (en Safari ook geloof ik) niet naar "width: 100%;" bij "a:link" wat ervoor moet zorgen dat de link de gehele breedte van het frame heeft.}

zondag 12 augustus 2007 10:50

Acties:

Onbekend

...

De tekst op een website is in FireFox niet gemakkelijk full-screen te krijgen.
Height en Width 100% zal dan ook niet altijd werken. Gebruik de margin-left: 0px en margin-right: 0px om een pagina in het midden te zetten.

Ik raad je aan om elke (sub)pagina even door de W3-validator te halen zodat je weet dat het geheel conform de standaard is die FireFox aanhoudt.

Zelf zou ik dit doen met div's i.p.v. tables. Maar zoals je aangeeft werkte dat niet goed.
Had je al geprobeerd om position: absolute en de top, left te gebruiken?

Speel ook Balls Connect en Repeat

zondag 12 augustus 2007 13:42

Acties:

Malloot

bekijk eens wat anders

Topicstarter

Thanks,

Maar ik begrijp niet hoe horizontale marges het probleem kunnen oplossen, omdat het probleem verticaal is. Het moet er dus zo uitzien (met Image en Sound opengeklapt): Schermafdruk

De website helemaal in Divs bouwen zonder tables heb ik nog niet geprobeerd, dit lijkt me erg moeilijk met dit ontwerp.

Die validator begin ik maar helemaal niet aan, want dan eindig ik met een kale pagina met wat tekst...

zondag 12 augustus 2007 14:22

Acties:

Onbekend

...

Margin-left en right zijn inderdaad bedoeld om de pagina horizontaal te positioneren.

Ik raad je echt aan om de validator te gebruiken.
In het begin zal het lastig zijn, maar als je het eenmaal door hebt, is het lang niet zo moeilijk meer.
Je kan ook nog op http://www.w3schools.com/css/default.asp kijken voor wat meer info over css.

Kijk ook eens naar de volgende eigenschappen en wat ze doen. Deze staan ook op die site beschreven:
max-height: 100%;
margin: 0px;
padding: 0px;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;

Speel ook Balls Connect en Repeat