PDA

Vollständige Version anzeigen : Web-Design (Browser?-)Problem bei Tabellenlayout + Iframe

socke
21.07.05, 16:59
Hi!
Bin jetzt auch endlich unter die Webdesigner gegangen und bastel momentan an meiner ersten Homepage.
Klappt soweit auch schon ganz gut, dank IR und Dreamweaver, nur bin ich jetzt bei nem Problem angelangt, bei dem ich als Anfänger und HTML-Lusche nimmer weiter komm.

Hab folgende 2 Seiten:

1. Die Indexseite:
http://home.arcor.de/filbiber/mayflybiography/mayflybiography2.html

2. Der Frame-Inhalt:
http://home.arcor.de/filbiber/mayflybiography/content.html


Im Internet Explorer funktioniert alles einwandfrei, im Firefox aber, ist der Framebereich komischerweise deutlich kleiner!
Kann sich mal jemand die Codes anschauen und mir sagen wie ich das beheben kann?

Danke schon mal! =)
Socke

Frameseite:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mayfly Biography Content-Frame</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#EBE2B1">
<table align="left" border="0" width="100%" height="100%" cellspacing="25" cellpadding="0" bgcolor="#EBE2B1">
<tr>


<td align="center" valign="middle" width="100%" height="100%">
<p>
<font size="1" face="Verdana, Arial, Helvetica, sans-serif">
Wenn dieser Text angezeigt wird, funzt zumindest schon mal der Iframe! =)
<br>
<br>content.html
<br>
<br>
<br>
<br>
<br>*scroll*
</font>
</p>
</td>
</tr>
</table>
</body>
</html>




Indexseite:
<html>
<head>
<title>~ Mayfly Biography ~</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (mayfly biography 2.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
blog_over = newImage("images/blog_over.jpg");
musik_over = newImage("images/musik_over.jpg");
steckbrief_over = newImage("images/steckbrief_over.jpg");
gallerie_over = newImage("images/gallerie_over.jpg");
gurke_over = newImage("images/gurke_over.jpg");
preloadFlag = true;
}
}

// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#1D1807" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<table id="ausrichtung" width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="100%" width="100%" valign="middle" align="center">

<!-- ImageReady Slices (mayfly biography 2.psd) -->
<table id="layout" width="700" height="550" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/header.jpg" width="700" height="175" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="175" alt=""></td>
</tr>
<tr>
<td>
<a href="#"
onmouseover="changeImages('blog', 'images/blog_over.jpg'); return true;"
onmouseout="changeImages('blog', 'images/blog.jpg'); return true;"
onmousedown="changeImages('blog', 'images/blog_over.jpg'); return true;"
onmouseup="changeImages('blog', 'images/blog_over.jpg'); return true;">
<img name="blog" src="images/blog.jpg" width="100" height="70" border="0" alt=""></a></td>
<td rowspan="8">
<table id="textfenster" border="0" cellpadding="0" cellspacing="0" height="350" width="500">
<tbody>
<tr>
<td height="350" width="500" align="center valign="middle">
<div align="center">
<iframe src="content.html" height="100%" width="100%"><font color="#C1B693" size="1" face="Verdana, Arial, Helvetica, sans-serif">Die
Seite "content.html" konnte nicht geladen werden!</font></iframe></div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td rowspan="3">
<a href="#"
onmouseover="changeImages('musik', 'images/musik_over.jpg'); return true;"
onmouseout="changeImages('musik', 'images/musik.jpg'); return true;"
onmousedown="changeImages('musik', 'images/musik_over.jpg'); return true;"
onmouseup="changeImages('musik', 'images/musik_over.jpg'); return true;">
<img name="musik" src="images/musik.jpg" width="100" height="114" border="0" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="70" alt=""></td>
</tr>
<tr>
<td>
<img src="images/menu_left.jpg" width="100" height="10" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<a href="#"
onmouseover="changeImages('steckbrief', 'images/steckbrief_over.jpg'); return true;"
onmouseout="changeImages('steckbrief', 'images/steckbrief.jpg'); return true;"
onmousedown="changeImages('steckbrief', 'images/steckbrief_over.jpg'); return true;"
onmouseup="changeImages('steckbrief', 'images/steckbrief_over.jpg'); return true;">
<img name="steckbrief" src="images/steckbrief.jpg" width="100" height="74" border="0" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="34" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/menu_right.jpg" width="100" height="236" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
<td>
<img src="images/menu_left-11.jpg" width="100" height="11" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td>
<a href="#"
onmouseover="changeImages('gallerie', 'images/gallerie_over.jpg'); return true;"
onmouseout="changeImages('gallerie', 'images/gallerie.jpg'); return true;"
onmousedown="changeImages('gallerie', 'images/gallerie_over.jpg'); return true;"
onmouseup="changeImages('gallerie', 'images/gallerie_over.jpg'); return true;">
<img name="gallerie" src="images/gallerie.jpg" width="100" height="99" border="0" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="99" alt=""></td>
</tr>
<tr>
<td>
<img src="images/menu_left-14.jpg" width="100" height="11" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td>
<a href="#"
onmouseover="changeImages('gurke', 'images/gurke_over.jpg'); return true;"
onmouseout="changeImages('gurke', 'images/gurke.jpg'); return true;"
onmousedown="changeImages('gurke', 'images/gurke_over.jpg'); return true;"
onmouseup="changeImages('gurke', 'images/gurke_over.jpg'); return true;">
<img name="gurke" src="images/gurke.jpg" width="100" height="75" border="0" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="75" alt=""></td>
</tr>
<tr>
<td colspan="3" background="images/bottom.jpg" align="center" valign="middle">
<font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">&copy; 2005 Fil</font></td>
<td>
<img src="images/spacer.gif" width="1" height="25" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->

</td>
</tr>
</table>

</body>
</html>
Fobby
21.07.05, 17:25
Hi socke,

jap, sieht nach einem Browserproblem aus. Versuch doch mal, das <div> zu vergrößern, welches den iframe umschließt z.b.

<div style="width:100%; height:100%">

Könnte funktionieren, probier's aus :nixweiss:
socke
21.07.05, 20:27
danke für die idee, hat aber leider nicht geklappt. :(
muss mich wohl oder übel an CSS heranwagen, damit solls gehen.
phoenix
21.07.05, 21:17
nimm den div mal ganz raus

um genauer testen zu können, fehlen zuviele dateien.
müsstest du mir den gesamten ordner mal übermitteln

es hat noch einige fehler im quellcode, z.b. einen </div> zuviel
leoman
21.07.05, 21:37
ähm nimm doch die größen angaben der zelle

height="350" width="500" dann passt es auf jeden fall
socke
21.07.05, 22:35
ähm nimm doch die größen angaben der zelle

height="350" width="500" dann passt es auf jeden fall

hatte mittlerweile in allen erdenklichen tags die 500*350 verwendet, nur den div-tag selbst hab ich vergessen. :)
danke, zumindest hat der frame jetzt die richtige größe!

den wirren code hier nochmal zu posten erspar ich euch, solang es in dem forum hier keine anständige [code]-formatierung gibt.. *argh*

jedenfalls gabs in der zwischenzeit jetzt schon wieder ein neues problem (wiederum nur im firefox). hatte plötzlich 1-2px breite lücken zwischen den zellen der navigations-pics.
hab abgezählt und bin horizontal und vertikal auf insgesamt je 4px an lücken gekommen, woraus ich schließe, dass firefox frames standardmäßig mit einem 4px-breiteren rand als beim IE versieht. diese 4 pixel sind offenbar transparent.
hab dann einfach von der framebreite/-höhe jeweils 4 abgezogen und es hat in beiden browsern genau gepasst. :)
btw: kann man die hässliche graue kante vom frame nicht irgendwie ganz wegmachen?? die verhunzt den style. :(
achja und kann man dem scrollbalken/der scrollleiste ne andere farbe geben?

fragen über fragen...aber ich komm mit html besser zurecht als erwartet. :)

danke für die (folgenden *g*) antworten und viele grüße,
socke

hier nochmal der aktuelle stand (http://home.arcor.de/filbiber/mayflybiography/mayflybiography2.html)
leoman
21.07.05, 22:43
frameborder="0" damit ist der rahmen nicht mehr zusehn :ja
socke
21.07.05, 23:00
sorry, ich konnte meine letzten frage selbst beantworten:

<iframe src="content.html" height="350" width="500" scrolling="yes" framespacing="0" frameborder="0">

und die scrollleiste lässt sich nur mittels css formatieren.
nunja, des eilt jetzt net so..

erst mal noch design fertig machen. :)
hat sonst noch wer ideen, was ich z.b. specialmäßiges reinpacken könnte?