nicht angemeldet
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;
}