Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

looks fine in Firefox, problem in IE with content div

Status
Not open for further replies.
taval

taval

Programmer
Jul 19, 2000
192
GB
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns=" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Frames without frames - Interlocking - Can regular frames do this?</title>
<link rel="home" href="/alex/css" title="CSS Stuff index" />
<link rel="index" href="/alex/css/frames/" title="Introduction" />
<link rel="author" href="mailto:css-stuff@alex.cloudband.com" title="Email the author" />
<link rel="copyright" href=" title="Released under the Creative Commons Public Domain Licence" />
<link rel="next" href="/alex/css/frames/iframe" title="What about iframes?" />
<link rel="previous" href="/alex/css/frames/fixed" title="Using fixed rather than absolute" />
<style type="text/css">
body
{
margin: 0; /* margin and padding only necessary to cater for Mac IE5 */
padding: 0;
/*\*/ overflow: hidden; /* because Mac IE5 don't understand */
}
div
{
margin: 0;
padding: 0;
}
#content
{
position: absolute;
top: 125px;
right: 305px;
bottom: 0px;
left: 155px;
margin: 125px 305px 5px 20px;
margin: 0;
overflow: auto;
}
#sidebar-left
{
position: absolute;
top: 125px;
bottom: 0px;
left: 0px;
width: 150px;

}
#sidebar-right
{
position: absolute;
top: 125px;
right: 125px;
bottom: 0px;
width: 170px;
}
#header
{
position: absolute;
top: 0;
/*\*/right: 0;
left: 0px; /* Exclude right and left props for Mac IE5 */
margin: 0 0 0 155px;
/*\*/ margin: 0; /* */
height: 120px;
}
#footer
{
/*\*/ position: absolute; /* Exclude for Mac IE5 */
right: 305px;
bottom: 0;
left: 0;
height: 100px;
margin: 0 305px 0 0; /* Cater for Mac IE5 */
/*\*/ margin: 0; /* Put back for all the rest */
}
#footer h4
{
position: absolute;
bottom: 0;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
/* let the IE expressions commence */
#sidebar-left
{
height: expression(document.body.clientHeight- (100 + 5) + "px");
}
#sidebar-right
{
height: expression(document.body.clientHeight- (120 + 5) + "px");
}
#content
{
height: expression(document.body.clientHeight - (100 + 120 + (2 * 5)) + "px");
width: expression(document.body.clientWidth - (150 + 300 + (2 * 5)) + "px");
}
/* mysterious -5px required to compensate for the scrollbar's presence - or something. other values may be necessary in different situations */
#header
{
width: expression(document.body.clientWidth - (150 + (2 * 5) - 5) + "px");
}
#footer
{
width: expression(document.body.clientWidth - (300 + (2 * 5) - 5) + "px");
}
</style>
<![endif]-->
<style type="text/css">
/* settings for appearance alone */
body { background: #666666; }
#content { background: #cccccc; }
#sidebar-left { background: #cc9999; }
#sidebar-right { background: #ffcc99; }
#header { background: #9999cc; }
#footer { background: #99cc99; }
#footer h4 { background: #ccffcc; }
/* convenience div for padding inside positioned divs */
div.paddingwrap
{
margin: 0;
padding: 1em;
}
p, h1, h2, h4, li
{
margin: 0;
padding: 0;
}
h3
{
margin: 1em 0 0 0;
}
ol
{
margin: 0 0 2em 1em;
padding: 0;
}
code
{
display: block;
background-color: #dddddd;
}
</style>
</head>
<body>
<div id="content">
<div class="paddingwrap">
<p>No, they can't.</p>
<h3>Interlocking framework</h3>
<p>Works as described in the <a href="/alex/css/frames">introduction</a> - the expressions for IE are listed below:</p>
<p><code>#sidebar-left<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;height: expression(document.body.clientHeight- (100 + 5) + "px");<br />
&nbsp;&nbsp;&nbsp;&nbsp;}<br />
#sidebar-right<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;height: expression(document.body.clientHeight- (120 + 5) + "px");<br />
&nbsp;&nbsp;&nbsp;&nbsp;}<br />
#content<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;height: expression(document.body.clientHeight - (100 + 120 + (2 * 5)) + "px");<br />
&nbsp;&nbsp;&nbsp;&nbsp;width: expression(document.body.clientWidth - (150 + 300 + (2 * 5)) + "px");<br />
&nbsp;&nbsp;&nbsp;&nbsp;}<br />
/* mysterious -5px required to compensate for the scrollbar's presence - or something. other values may be necessary in different situations */<br />
#header<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;width: expression(document.body.clientWidth - (150 + (2 * 5) - 5) + "px");<br />
&nbsp;&nbsp;&nbsp;&nbsp;}<br />
#footer<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;width: expression(document.body.clientWidth - (300 + (2 * 5) - 5) + "px");<br />
&nbsp;&nbsp;&nbsp;&nbsp;}</code></p>
<p>A mysterious 5 pixels must be added to the horizontal widths in IE - mysterious because it's not in any way obviously related to the scrollbar width (and why should it be?)</p>
<h3>Interlocking Compatibility</h3>
<p>Works in IE6, IE5.5, IE5.01, Firefox 0.8, Mozilla 1.6, Safari 1.1, Opera 7.5, Opera 7.23</p>
<p>Degrades acceptably in Mac IE5</p>
<h3>Content is king</h3>
<p>Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king.</p>
<p>Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king.</p>
<p>Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king.</p>
<p>Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king.</p>
<p>Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king.</p>
<h2>END CONTENT</h2>
</div><!-- close div.paddingwrap -->
</div><!-- close div#content -->
<div id="sidebar-left">
<div class="paddingwrap">
<ol>
<li><a href="/alex/css/frames/">Introduction</a></li>
<li><a href="/alex/css/frames/pixels">Basic layout</a></li>
<li><a href="/alex/css/frames/ems">Using ems</a></li>
<li><a href="/alex/css/frames/percent">Using percentages</a></li>
<li><a href="/alex/css/frames/fixed">Using fixed rather than absolute</a></li>
<li><strong>Interlocking - Can regular frames do this?</strong></li>
<li><a href="/alex/css/frames/iframe">What about iframes?</a></li>
<li><a href="/alex/css/frames/scalable">Scalable with centered header and footer</a></li>
<li><a href="/alex/css/frames/scalable/reprise">Scalable with centered header and footer (and no expressions) - a reprise</a></li>
<li><a href="/alex/css/frames/scalablefixed">Scalable again - but fixed</a></li>
</ol>
<h2>END LEFT</h2>
</div><!-- close div.paddingwrap -->
</div><!-- close div#sidebar-left -->
<div id="sidebar-right">
<div class="paddingwrap">
<p><a href=" right frame of mind</a></p>
<p><a href=" a frame up</a></p>
<p><a href=" Frame Problem</a></p>
<p><a href=" spark of heavenly flame, Quit, oh! quit this mortal frame</a></p>
<p><a href=" frames, fatal frames, they can play hideous tricks on the brain</a></p>
<br />
<p>We now return you to your regularly scheduled filler text:</p>

</div><!-- close div.paddingwrap -->
</div><!-- close div#sidebar-right -->
<div id="header">
<h1>Frames without frames</h1>
<h2>Interlocking - Can regular frames do this?</h2>
</div><!-- close div#header -->

</body>
</html>

I have this page, it looks fine in Firefox, but in IE then content div (grey box) dos not reach the bottom of the screen. Can anyone help sort this out.

Regards, Taha
 
Sort by date Sort by votes
This is a very messy stylesheet and I am not shocked it looks vastly different in different browsers. If I point out the worst:

1. xml declaration at the top renders doctype useless in IE6, since it sends it back to quirks mode.
2. stylesheet has many propreitary commands for IE, so it is no wonder that it displays differently. most of all, content is as high as browser window - 100px -120px - 10px. That is why it does not reach the bottom. That 100px is just too much.
3. usually it is best to avoid absolute positioning and your page is all absolute positioning.

While the effect the code gives is nice, it is just too confusing to maintain cross-browser version in my opininon.
 
Upvote 0 Downvote
Hi,

Thanks for your pointers Vragabond. Much Appreciated ?. Yeah it was messy, so I cleared it up. This looks the same in Firefox and IE 6 now. There is one header across the whole browser width, with 3 columns beneath stretching right down to the bottom of the browser window, and a content frame which is scrollable. Now I’ve just got to try it out with Netscape. What do you think of the code now? Do you see any problems with the CSS?

Regards,
Taha

Updated Code

----
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns=" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Frames without frames - Interlocking - Can regular frames do this?</title>
<link rel="home" href="/alex/css" title="CSS Stuff index" />
<link rel="index" href="/alex/css/frames/" title="Introduction" />
<link rel="author" href="mailto:css-stuff@alex.cloudband.com" title="Email the author" />
<link rel="copyright" href=" title="Released under the Creative Commons Public Domain Licence" />
<link rel="next" href="/alex/css/frames/iframe" title="What about iframes?" />
<link rel="previous" href="/alex/css/frames/fixed" title="Using fixed rather than absolute" />
<style type="text/css">
body
{
height:100%;
margin: 0; /* margin and padding only necessary to cater for Mac IE5 */
padding: 0;
/*\*/ overflow: hidden; /* because Mac IE5 don't understand */
}
div
{
margin: 0;
padding: 0;
}
#content
{
position: absolute;
top: 100px;
width: 420px;
bottom: 0px;
left: 185px;
margin: 125px 400px 0px 155px;
margin: 0;
overflow: auto;
}
#sidebar-left
{
position: absolute;
top: 100px;
bottom: 0px;
left: 0px;
width: 180px;

}
#sidebar-right
{
position: absolute;
top: 100px;
left: 610px;
bottom: 0px;
width: 180px;
}
#header
{
position: absolute;
top: 0;
/*\*/right: 0;
left: 0px; /* Exclude right and left props for Mac IE5 */
margin: 0 0 0 155px;
/*\*/ margin: 0; /* */
height: 95px;
}
#footer
{
/*\*/ position: absolute; /* Exclude for Mac IE5 */
right: 305px;
bottom: 0;
left: 0;
height: 100px;
margin: 0 305px 0 0; /* Cater for Mac IE5 */
/*\*/ margin: 0; /* Put back for all the rest */
}
#footer h4
{
position: absolute;
bottom: 0;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
/* let the IE expressions commence */
#sidebar-left
{
height: expression(document.body.clientHeight- (100) + "px");
}
#sidebar-right
{
height: expression(document.body.clientHeight- (100) + "px");
}
#content
{
height: expression(document.body.clientHeight - (90 + (2 * 5)) + "px");

}
/* mysterious -5px required to compensate for the scrollbar's presence - or something. other values may be necessary in different situations */
#header
{
width: expression(document.body.clientWidth + "px");
}
#footer
{
width: expression(document.body.clientWidth - (300 + (2 * 5) - 5) + "px");
}
</style>
<![endif]-->
<style type="text/css">
/* settings for appearance alone */
body { background: #FFFFFF; }
#content { background: #EFEFEF; }
#sidebar-left { background: #EFEFEF; }
#sidebar-right { background: #EFEFEF; }
#header { background: #9999cc; }
#footer { background: #99cc99; }
#footer h4 { background: #ccffcc; }
/* convenience div for padding inside positioned divs */
div.paddingwrap
{
margin: 0;
padding: 1em;
}
p, h1, h2, h4, li
{
margin: 0;
padding: 0;
}
h3
{
margin: 1em 0 0 0;
}
ol
{
margin: 0 0 2em 1em;
padding: 0;
}
code
{
display: block;
background-color: #dddddd;
}
</style>
</head>
<body>
<div id="content">
<div class="paddingwrap">
<h1>Content Frame</h1>
<h2>Used For Content</h2>
<p>Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king.</p>
<p>Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king.</p>
<p>Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king.</p>
<p>Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king.</p>
<p>Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king.</p>
<h2>END CONTENT</h2>
</div><!-- close div.paddingwrap -->
</div><!-- close div#content -->
<div id="sidebar-left">
<div class="paddingwrap">
<h1>Left Frame</h1>
<h2>Used For Navigation</h2>
</div>
</div>
<!-- close div#sidebar-left -->
<div id="sidebar-right">
<div class="paddingwrap">
<h1>Right Frame</h1>
<h2>Used For Member Login</h2>
</div>
</div>
<!-- close div#sidebar-right -->
<div id="header">
<h1>Header Frame</h1>
</div><!-- close div#header -->

</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
411
spamjim
spamjim
scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
335
3esolar
3
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
710
Chris Miller
Chris Miller
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
686
spamjim
spamjim
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
637
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top