J
Jeff
Hey
I'm testing this on IE, 6.0 (but I want my code to work on all modern
browsers: Opera, FireFox, IE, Netscape Navigator)
I've tested my html at http://validator.w3.org/ and it's validated
successful, But the page isn't displayed correctly in Internet Explorer, It
works great on Opera. The problem is that the IFRAME gets wider than div
it's placed with in (much wider than the border of the div). The width of
this IFRAME is from its left position of the div and takes up the rest of
width of the browser window. I thought that based on the CSS data this
IFRAME should stop 190px from the right end of the browser window
As you can see from my CSS data, the CSS data for the IFRAME contains this
attribute & value: "width:100%;" I set it this way because I thought that it
then will fill the div (position:relative
it's placed within...
What must I fix to make this works on Microsoft Internet Explorer (version
6.0)?
Please give some advice on this problem
Below are my index.php and styles.css files...
Index.php
<!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>
<link rel="StyleSheet" type="text/css" href="styles.css"
media="screen" />
<title>Hello world</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
</head>
<body>
<div id="container">
<div id="calendar">
<p>2006</p>
</div>
<div id="submenu">
<p>SUbMenu</p>
</div>
<div id="content">
<iframe id="content2">
</iframe>
</div>
</div>
</body>
</html>
styles.css:
#container {
height:400px;
background-color:#FFD000;
position:relative;
}
#calendar {
background-color:#DDF;
border:2px solid #00C;
position:absolute;
right:0px;
top:100px;
width:175px;
}
#submenu {
background-color:#DDF;
position:absolute;
left:0px;
top:0px;
width:175px;
text-align:left;
}
#content2 {
width:100%;
background-color:#FDD;
}
#content {
margin:0 190px;
background-color:#C0C0C0;
position:relative;
}
I'm testing this on IE, 6.0 (but I want my code to work on all modern
browsers: Opera, FireFox, IE, Netscape Navigator)
I've tested my html at http://validator.w3.org/ and it's validated
successful, But the page isn't displayed correctly in Internet Explorer, It
works great on Opera. The problem is that the IFRAME gets wider than div
it's placed with in (much wider than the border of the div). The width of
this IFRAME is from its left position of the div and takes up the rest of
width of the browser window. I thought that based on the CSS data this
IFRAME should stop 190px from the right end of the browser window
As you can see from my CSS data, the CSS data for the IFRAME contains this
attribute & value: "width:100%;" I set it this way because I thought that it
then will fill the div (position:relative
it's placed within...What must I fix to make this works on Microsoft Internet Explorer (version
6.0)?
Please give some advice on this problem
Below are my index.php and styles.css files...
Index.php
<!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>
<link rel="StyleSheet" type="text/css" href="styles.css"
media="screen" />
<title>Hello world</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
</head>
<body>
<div id="container">
<div id="calendar">
<p>2006</p>
</div>
<div id="submenu">
<p>SUbMenu</p>
</div>
<div id="content">
<iframe id="content2">
</iframe>
</div>
</div>
</body>
</html>
styles.css:
#container {
height:400px;
background-color:#FFD000;
position:relative;
}
#calendar {
background-color:#DDF;
border:2px solid #00C;
position:absolute;
right:0px;
top:100px;
width:175px;
}
#submenu {
background-color:#DDF;
position:absolute;
left:0px;
top:0px;
width:175px;
text-align:left;
}
#content2 {
width:100%;
background-color:#FDD;
}
#content {
margin:0 190px;
background-color:#C0C0C0;
position:relative;
}