Forum Moderators: not2easy
I'm really struggling with this problem, and could use some help.
I built a page with css-based layout. The text in the body of my page is being cut off when I view it in FireFox. For some reason, FireFox will not turn on its vertical scrollbar when the text in the body exceeds the length of the window. IE has absolutely no problem with it.
Has anyone seen similar behavior?
Any help would be greatly appreciated.
Thanks,
Laura
I tried adding this to the body attribute of my page:
overflow: -moz-scrollbars-vertical;
After doing that, the scrollbar did appear, however it's not useable. FireFox is behaving as though it has reached the end of the content on the page - that there's nothing more to see.
}
#container {
margin: 0px auto;
text-align: left;
width: 692px;
height:100%;
}
/* ----- BEGIN HEADER CONTAINER ----- */
#header {
margin: 0px auto;
text-align: left;
width: 692px;
}
#uhs {
width: 210px;
height: 108px;
border-right: 2px solid #FFF;
float: left;
position:relative;
padding: 0;
}
#sub-header {
width: 478px;
height: 108px;
border-left: 2px solid #FFF;
float: right;
position: relative;
background: #FFF;
z-index:1;
}
.search {
width: 692px;
height: 28px;
position:fixed;
top: 123px;
background: url(../images2/home_bar.gif);
margin: 0px auto;
border-top: 2px solid #FFF;
border-bottom: 2px solid #FFF;
}
#help {
margin-left: 558px;
}
/* -----END HEADER CONTAINER ----- */
#navcontainer {
width: 210px;
height: 108px;
top: 155px;
position:fixed;
float:left;
padding:0;
text-align: left;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 11px/23px Verdana, Arial, Helvetica, sans-serif;
text-indent: 14px;
}
#navcontainer a {
display: block;
width: 210px;
height: 25px;
}
#navcontainer a:link, #navcontainer a:visited {
background: url(../images2/nav_button.gif);
color: #FFFFFF;
text-decoration: none;
}
#navcontainer a:hover {
background: url(../images2/nav_button_over.gif);
color: #FFFFFF;
text-decoration: none;
}
#navcontainer li a#current {
background: url(../images2/nav_button_over.gif);
color: #FFFFFF;
text-decoration: none;
}
#navcontainer li a#activetab {
background: url(../images2/nav_button_over.gif);
color: #FFFFFF;
text-decoration: none;
}
#content {
width: 470px;
top: 155px;
margin-left: 213px;
position: fixed;
padding-top: 5px;
padding-right: 5px;
text-align:inherit;
height:100%;
}
#content h2 {
font: bold 16px Verdana, Arial, Helvetica, sans-serif;
color: #000;
width: 454px;
}
#content h3 {
font: normal 18px Georgia, Times New Roman, Times, serif;
color: #002C77;
width: 454px;
}
#section1 {
width: 450px;
background-color: #EEEEEE;
padding-top: 5px;
padding-right: 0;
padding-bottom: 0;
padding-left: 10px;
height:100%;
}
.clear {
clear: both;
width: 692px;
margin: 0px auto;
background: url(images2/clear.gif) repeat-y;
}
#footer {
margin: 0;
background-color: #002c77;
border-top: 9px solid #FFFFFF;
width: 692px;
padding: 5px 0;
clear: both;
position:fixed;
margin: 0px auto;
bottom: 0;
}
#footer h2 {
margin: 0;
text-align: center;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
line-height: 18px;
color: #FFFFFF;
}
#footer h2 a:visited, #footer h2 a:link {
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px solid #FFFFFF;
}
#footer h2 a:hover {
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px solid #FFFFFF;
}
</style>
</head>
<body>
<img src="../images2/header1.gif" /><br />
<!-- Begin Page Container -->
<div id="container">
<!-- Begin Header Container (Nav, UHS Logo, Header Graphic, Search bar) -->
<div id="header">
<div id="uhs"><img src="logo.gif" alt="Logo" /></div>
<div id="sub-header"><img src="images/testing.gif" alt="header graphic" /></div>
<div class="search">
<div id="help"><a href="#"><img src="../images2/home.gif" width="63" height="26" vspace="2" border="0" /></a> <a href="javascript:history.go(-1)"><img src="../images2/back.gif" width="63" height="26" vspace="2" border="0" /></a></div>
</div>
<!-- END Header Container -->
</div>
<!-- BEGIN Main Container (Left Nav, page body)-->
<div id="navcontainer"> <ul>
<li><a id="activetab" href="#">Corporate Email </a></li>
<li><a href="#">Employee Extranet Portal </a></li>
<li><a href="#">Troubleshooting/Help</a></li>
</ul></div>
<div id="content"> <h2>Employee Extranet Portal </h2>
<div id="section1">
<p><strong>Use of computer and network facilities requires prior authorization. Unauthorized access is prohibited. Usage may be subject to security testing and monitoring. Abuse is subject to criminal prosecution.</strong></p>
<h3>Remote Access </h3>
<p><strong>Login</strong> to remote access to use internal applications such as:</p>
<p> </p>
<p>So this is Christmas <br />
And what have you done? <br />
Another year over <br />
And a new one just begun <br />
<br />
insert favorite foo text here
</p>
<p><br />
</p>
</div>
</div>
<!-- End Page Container -->
<div class="clear"> </div>
<div id="footer">
<h2><a href="#">Home</a> ¦ <a href="#">Corporate Internet Site</a> <br />
© 2006 Your System. Terms of use subject to Confidentiality Agreement.</h2>
</div>
</div>
</div>
</body>
</html>
[edited by: SuzyUK at 11:31 pm (utc) on Dec. 15, 2006]
[edit reason] examplified [/edit]
Thanks - that was a push in the right direction...page is working beautifully now. :)
-Laura
