nicht angemeldet
CSS: Positionierung iframe nur im IE sichtbar
hallo,
es geht um ein darstellungsproblem mit einem css-layout.
ich habe ein layout mit 7 bereichen (5 tabellen und 2 iframes), welche ich alle absolut positioniere. eines der beiden iframes, die in der mitte des bildschirms nebeneinander sitzen sollen, wird allerdings nur im ie angezeigt. firefox, safari und opera zeigen das frame nicht an. mittels javascript zeige ich beim überfahren des jeweiligen elements einen rahmen an, um zu sehen, wo die bereiche angezeigt werden. da firefox & co eigentlich die korrektere css-implementierung haben, muss es wohl an meinem feglerhaften css liegen, welches im ie zufällig so angezeigt wird, wie gewünscht?!...
hat jemand einen tipp, ich finde den fehler nicht.
vielen dank!
hier der html-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">
<head>
<title>TEST</title>
<!-- Used Stylesheet -->
<link rel="STYLESHEET" type="text/css" href="test.css" />
</head>
<body>
<!-- CONTROL PANEL -->
<table id="tableControls" onmouseover="this.style.border='1px ridge blue'" onmouseout="this.style.border='none'" >
</table>
<!-- LIST BUTTONS -->
<table id="tableListButtons" onmouseover="this.style.border='1px ridge blue'" onmouseout="this.style.border='none'" >
</table>
<!-- TOP MENU -->
<table id="tableMenu" onmouseover="this.style.border='1px ridge blue'" onmouseout="this.style.border='none'" >
</table>
<!-- LEFT HEADER -->
<table id="tableHeaderLeft" onmouseover="this.style.border='1px ridge blue'" onmouseout="this.style.border='none'" >
</table>
<!-- RIGHT HEADER -->
<table id="tableHeaderRight" onmouseover="this.style.border='1px ridge blue'" onmouseout="this.style.border='none'" >
</table>
<!-- LIST FRAME -->
<!-- ADD UPDATEPANEL5: LIST --><iframe id="iFrameListArea" name="iFrameListArea" src="list.htm" scrolling="auto" onmouseover="this.style.border='1px ridge blue'" onmouseout="this.style.border='none'" />
<!-- MAIN FRAME -->
<!-- ADD UPDATEPANEL6: MAIN FRAME --><iframe id="iFrameMainArea" name="iFrameMainArea" src="main.htm" scrolling="no" onmouseover="this.style.border='1px ridge blue'" onmouseout="this.style.border='none'" />
</body>
</html>
hier der css-code:
html, body {
width:953px;
height:719px;
background-color:rgb(45,45,45); /*background-color:#333333;*/
/*Standard font: verdana bold 11px RGB 190/190/190 left*/
font-family:Verdana;
font-size:11px;
font-weight:bold;
font-style:normal;
color:rgb(190,190,190);
text-decoration:none;
text-align:left;
}
body {
background-image:url(background.png);
background-repeat:no-repeat;
background-position:1px 1px;
padding:0;
text-align:center;
margin:0 auto;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:auto;
}
/* Top Menu */
/************/
#tableMenu {
position:absolute;
top:0px;
left:0px;
height:18px;
width:953px;
margin:0;
padding:0;
text-align:left;
vertical-align:middle;
}
/* Left Header */
/***************/
#tableHeaderLeft {
position:absolute;
top:30px;
left:5px;
height:45px;
width:719px;
margin:0;
padding:0;
}
/* Right Header */
/***************/
#tableHeaderRight {
position:absolute;
top:30px;
left:734px;
height:45px;
width:219px;
margin:0;
padding:0;
border:0;
}
/* Iframe with image content */
/*****************************/
#iFrameMainArea {
position:absolute;
padding:3px;
top:79px;
left:8px;
height:536px;
width:712px;
margin:0;
padding:0;
text-align:center;
}
/* List Area */
/*************/
#iFrameListArea {
position:absolute;
top:75px;
left:734px;
height:611px;
width:219px;
margin:0;
padding:0;
text-align:center;
border:0;
}
/* Control Area */
/****************/
#tableControls {
background-color:rgb(45,45,45);
position:absolute;
top:618px;
left:5px;
height:96px;
width:719px;
margin:0;
padding:0;
text-align:left;
}
/* List Buttons */
/****************/
#tableListButtons {
position:absolute;
top:689px;
left:734px;
height:25px;
width:219px;
margin:0;
padding:0;
text-align:left;
}
-
es liegt nicht am CSS sondern an der kurzschreibweise von <iframe>
wenn du das mit öffnendem und schließendem tag schreibst geht es: <iframe atrib=""></iframe>-
wow, vielen dank!
mit abschliessendem tag funktioniert es tatsächlich!
darauf soll mal einer kommen... hätte nie ged8 dass es daran liegen könnte.aber warum ist das so? ist es denn generell besser, auf die kurzschreibweise zu verzichten?
-
Kommt auf das Format bzw. DOCTYPE an. Wenn Du XHTML verwendest, solltest Du alle Elemente, die Du aufmachst, auch wieder zumachen. Bei HTML4.0 ist das hingegen nicht so elementar wichtig.
Gruß, LX
-
danke, das ist schon klar. eben das ist ja der unterschied zwischen html und xhtml.
aber dass es unterschiedliche effekte gibt, je nach dem, ob man das komplette schliessende tag notiert oder die kurzschreibweise verwendet, verwundert mich. ;)
<iframe id="" ... ></iframe>
bzw.
<iframe id="" ... />-
aber dass es unterschiedliche effekte gibt, je nach dem, ob man das komplette schliessende tag notiert oder die kurzschreibweise verwendet, verwundert mich. ;)
in sgml/html gibts viele verschiedene kurzschreibweisen - dazu zählen zb omittag und shorttag (bzw empty element) und ist nicht das selbe
omittag:
<li>blah
entspricht
<li>blah</li>shorttag
<li>blah</>
<li/blah/
usw. entspricht
<li>blah</li>empty element:
<li />blah
entspricht hingegen eher
<li>NULL</li>blahdas ist etwas völlig anders und natürlich sieht das ergebnis im html dann auch anders aus - von der seite sollte man diese kurzschreibweise garnicht verwenden (in html), in xhtml ist sowieso nur noch empty element erlaubt
-
-
-
-
-
Hi,
ich habe ein layout mit 7 bereichen (5 tabellen und 2 iframes),
Das klingt bereits nach ziemlich grossem Murks -
welche ich alle absolut positioniere.
- der nur hiervon noch getoppt wird.
MfG ChrisB
--
"The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."