IE fix/hack for IE horizontal scroll bars for frames

Hi,

Does anyone have a fix/hack/whatever for getting rid of IE horizontal scroll bars in frames? I am not using pdf. I know frames are a thing of the past but I use footnotes that direct the answer to a bottom frame and is why I want to use them. (Convenience for the visitor/reader.) Here is the URL and the css I used listed below. (It is an external style sheet).

Problem: I have ten chapters and only two of them work like they should. Chapters one and four work. The rest do not. Argh-h-h-h. (Firefox works great.) I used a generic template for ALL files so I am at a loss. If it was css, wouldn’t all files either not work or work?

http://www.jameslindquist.net/htmfiles/frame/index2.html

div.wrapper {
margin-left: 5%;
margin-right: 5%;
}
body {
background-image: url(parch.GIF);
background-repeat: repeat;
background-attachment: fixed;
font-family: “Times New Roman”, Times, serif;
font-size: 14pt;
margin-top: 13px;
}
#center {
text-align: center;
}
p.center {
text-align: center;
}
p.right {
text-align: right;
}
.under {
text-decoration: underline;
}
#line {
border-bottom: 2px solid #8b4513;
border-top: 2px solid #8b4513;
}
#linetop {
border-top: 2px solid #8b4513;
width: 99%;
}
#justify {
text-align: justify;
}
Content a:link, a:visited {
background-image: url(parch.GIF);
color: #0000ff;
text-decoration: none;
}
Content a:hover {
background-image: url(parch.GIF);
color: #ff0000;
}

Thanks Paul. I appreciate it. I will give it a shot. Thanks.

I still need help but I wrote the css wrapper wrong. It should read:

#wrapper {

etc

}

Not

div.wrapper {

The justified text in the main frame css is pushing the element wide in IE6.

Remove the justified text or reduce the content width to compensate.

In the main frame css file:


#content{width:98%}

That page structure is ancient and looks like something out of the last century.:slight_smile:

Frames are evil and you could achieve the same effect using valid css/html for all apart from IE6 like so:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Scrollable 100% high element</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
p {
    margin:0 0 1em 0
}
html, body {
    margin:0;
    padding:0
}
body {
    height:100%;
    margin:0;
}
#outer {
    background:#ffffcc;
    overflow:auto;
    position:absolute;
    left:250px;
    right:0;
    top:50px;
    bottom:51px;
    border-bottom:1px solid #000;
}
#top {
    position:absolute;
    left:0;
    width:100%;
    top:0px;
    height:49px;
    background:red;
    overflow:hidden;
    border-bottom:1px solid #000;
}
#bottom {
    position:absolute;
    left:0px;
    right:0;
    width:100%;
    height:50px;
    bottom:0;
    overflow:hidden;
}
#base-inner {
    margin:0 0 0 250px;
    background:#fff;
}
#left {
    width:249px;
    background:green;
    top:50px;
    bottom:0;
    left:0;
    position:absolute;
    z-index:2;
    border-right:1px solid #000;
    overflow:auto;
}
#bottom h1 {
    font-size:200%
}
#bottom p {
    margin:3em 0
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
* html {padding:50px 0 50px} 
* html body{padding:50px 0 50px;padd\\ing:0}
* html #outer{    
    height:100%;
    position:static;
    margin-left:250px;
}
* html #left{height:100%;padding-bottom:50px}
* html #bottom{height:49px;border-top:1px solid #000}
html{overflow:auto}
* html,* html body{overflow-y:hidden}
</style>
<![endif]-->
</head>
<body>
<div id="top">
    <h1>Header</h1>
</div>
<div id="left">
    <p>left column</p>
    <p>left column</p>
    <p>left column</p>
    <p>left column</p>
    <p>left column</p>
    <p>left column</p>
    <p>left column</p>
    <p>left column</p>
    <p>left column</p>
    <p>left column</p>
    <p>left column</p>
    <p>left column</p>
    <p>left column</p>
    <p>left column</p>
    <p>left column</p>
</div>
<div id="outer">
    <p><img src="images/zimg1.jpg" width="600" height="300" alt="Test" /></p>
    <p>Start</p>
    <p><a href="#foot1">Footnote 1</a></p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p><a href="#foot2">Footnote 2</a></p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p><a href="#foot3">Footnote 3</a></p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p><a href="#foot4">Footnote 4</a></p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>last</p>
</div>
<div id="bottom">
    <div id="base-inner">
        <h3>Footnotes</h3>
        <p id="foot1">Footnote 1</p>
        <p id="foot2">Footnote 2</p>
        <p id="foot3">Footnote 3</p>
        <p id="foot4">Footnote 4</p>
    </div>
</div>
</body>
</html>


IE6 is awkward and needs the extra styles shown above but is basically working until the screen is narrowed and then it gets a bit lost.