Problem with layout-scrollbard disapperaring [Archive]

View Full Version : Problem with layout-scrollbard disapperaring

bugsome

07-18-2008, 12:13 PM

hmm...i have run into a problem.I am trying to attain a frame like layout using css.I have tried the samle from http://www.dynamicdrive.com/style/layouts/item/css-top-and-bottom-frames-layout/.

The design works like a charm.But when we adds a <form> tag after the <body>,the content div disappears.

I am using a masterpage.I tried putting the <form> tag in the content page and it works well.The problem is when we put it in the masterpage....any inputs will be highly appreciated...thx...

rangana

07-19-2008, 01:42 AM

Please provide a link to the page in question.

bugsome

07-19-2008, 04:15 AM

i'm sory but..i'm working offline...i am using the same layout in http://www.dynamicdrive.com/style/layouts/item/css-top-and-bottom-frames-layout/

if u add a <form> tag after the <body> the container scrollbars disappears...i guess i have to add something in the style sheet...can u help pls...

rangana

07-19-2008, 05:04 AM

I've tried it and haven't reproduced the problem on my end.
Since you don't have the page online, please wrap your code here using the forum's
tag.

bugsome

07-19-2008, 06:22 AM

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Top and Bottom Frames Layout</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#framecontentTop, #framecontentBottom{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#framecontentBottom{
top: auto;
bottom: 0;
height: 110px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#maincontent{
position: fixed;
top: 130px; /*Set top value to HeightOfTopFrameDiv*/
left: 0;
right: 0;
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>

<body>
<form>
<div id="framecontentTop">
<div class="innertube">

<h1>CSS Top and Bottom Frames Layout</h1>
<h3>Sample text here</h3>

</div>
</div>

<div id="framecontentBottom">
<div class="innertube">

<h3>Sample text here</h3>

</div>
</div>

<div id="maincontent">
<div class="innertube">

<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(255)</script></p>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>

</div>
</div>

</form>
</body>
</html>

this is the code i am using...i just included the form tags..otherwise its the same from http://www.dynamicdrive.com/style/layouts/item/css-top-and-bottom-frames-layout

and i forget to mention..the scrollbars are hidden only in ie6...

rangana

07-19-2008, 06:31 AM

My apologies, but I don't have IE6 for test. Anyway, try to remove the highlighted:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I don't know the reason behind pushing IE into quirksmode. There might be problem, but worth a risk.

Secondly, why do you intend to put the form tag just right next to the body tag?

If you'll be placing your form element's only on the middle div, then move the form tags here:

<div id="maincontent">
<div class="innertube">
<form>
<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(255)</script></p>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>
</form>
</div>
</div>

Otherwise, you'll experience oddity. If problem still exist, then apologies in advance. I can't test for IE6.

bugsome

07-19-2008, 08:46 AM

i'll try the same..i have to keep the form tags there because i want to place my asp.net controls in the header div also...however if i add in the style sheet the following the problem seems to have resolved..i dnt know the aftereffects..pls take a look

form{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
* html body form{ /*IE6 hack*/
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}

* html form #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}

rangana

07-19-2008, 09:08 AM

Yes. That's good to hear you got things sorted out.

I don't think there's problem with what the rule you've added. Just note that IE don't understand max-height and will regards it as height, but with your rule, height and max-height are the same, so there's nothing to worry.

Also, you might find it useful to use CSS' reset (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)

bugsome

07-19-2008, 09:27 AM

thanks a lot for your support rangana...i will defenitly have a look at it...

one more help....i am using % base width and height throughout..sometimes when i resize my browser window,my controls get scattered...any way to get around this...?

molendijk

07-19-2008, 02:06 PM

* html #maincontent{ /*IE6 hack*/
position:absolute;
height: 60%;
width: 100%;
}
Arie Molendijk