• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 576
  • Last Modified:

Scrollbar showing up with different heights but using the same CSS

Hello all experts.

I have some CSS that creates a scrollbar if the content is above a certain height limit.

Some of the pages using this scrollbar turns out as it should.  But a number of pages using the SAME code shows up with the scrollbar much shorter.

I have switched the content around and it is not the content.

This is happening in both FF and IE.

I have attached pictures of the correct scrollbar height, the incorrect scrollbar height and the CSS-calls that are being used for this section. I have also included the whole CSS file.

Can anyone help me figure this out....??

Thanx in advance,

--d.

Correct Length:
correct lengthIncorrect Length:
incorrect lengthCSS calls Used:
CSS used
CSS being used:
p {
    margin-bottom: 15px;
}

#wrapper {
    width: 990px;
    height:1045px;
    background-color: #fff;
    border-left: 1px solid #D8D8D8;
    border-right: 1px solid #D8D8D8;
    margin-left: auto;
    margin-right: auto;
     text-align: left;
}

.content-topic {
	margin-left: 25px;
}

.content-topic h2 {
	color: #5c85ff;
	font-size: 14px;
	font-weight: normal;
}

.content-topic ul {
	list-style: none;
	margin: 15px 0;
}

.content-topic li {
	float: left;
	width: 240px;
	margin-bottom: 10px;
}

.content-topic a {
	text-decoration: none;
	color: #5c85ff;
	font-size: 14px;
	font-weight: 400;
}

.content-bytopic {
	margin-left: 25px;
	color: #5c85ff;
}

.content-bytopic div {
	margin-top: 10px;
	float:left;
	width: 233px;
}

.content-bytopic div div.article {
    width: 216px !important;
    width: 228px;
    padding: 1px;
    border: 1px solid white;
    margin: 0 1px 1px 0;
    cursor: pointer;
}

.content-bytopic div div.article:hover {
    border-color:  #5c85ff;
}

.content-bytopic div div.article h1 {
    font-size: 12px;
    color:  #0e5caa;
    margin: 0px;
	font-weight: 400;
}

.content-bytopic div div.article h2 {
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    color: #0a0a7a;
    margin: 0px;
}

.content-bytopic div div.article p {
    font-size: 12px;
    font-style: italic;
    margin: 0px;
    color:  #5c85ff;
}

#mainwrapper {
    width: 990px;
    min-height:500px;
    height:auto !important;
    height:800px;
    background-color: #fff;
    border-left: 1px solid #D8D8D8;
    border-right: 1px solid #D8D8D8;
    border-bottom: 1px solid #D8D8D8;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    text-align: left;
}

#mainwrapper img {
    margin: 10px;
    float: left;
}

#mainwrapper h1 {
    font-size: 16px;
    color:  #5c85ff;
    margin: 0 0 0 10px;
}

#mainshadowtop {
	clear: both;
    width: 750px;
    height: 8px;
    background: url("/assets/images/shadow-top-wide.png");
    background-repeat: no-repeat;
    margin-bottom: 10px;
}

#mainshadowbot {
	width: 750px;
    height: 8px;
    background: url("/assets/images/shadow-bottom-wide.png");
    background-repeat: no-repeat;
    clear:both;
    margin-bottom: 15px;
}

#mainwrapper #maintop {
    width: 936px;
}

#mainwrapper #maintop .topics {
    width: 200px;
    height: 300px;
    background-color: #f7f7f7;
    float: left;
    margin-left: 15px;
}

#mainwrapper #maintop .topics ul {
    list-style: none;
    margin-top: 10px;
}

#mainwrapper #maintop .topics a {
    display: block;
    color: #000;
    text-decoration: none;
    margin: 2px 15px;
}

#mainwrapper #maintop .topics li:hover {
    background-color: #f0f0f0;
}

#mainwrapper #maintop div.awrapper {
    display: block;
    float: left;
    margin: 0 0 16px 16px;
    width: 285px;
    border-left: 1px solid #D8D8D8;
}

#mainwrapper #maintop div div.article {
    width: 273px !important;
    width: 326px;
    padding: 5px;
    border: 1px solid white;
    margin: 5px 0 0 5px;
    cursor: pointer;
}

#mainwrapper #maintop div div.article:hover {
    border-color: #A31721;
}

#mainwrapper #maintop div div.article img {
    float: left;
    border: 1px solid #f0f0f0;
    margin: 0 5px 5px 0;
}

#mainwrapper #maintop div div.article h1 {
    font-size: 16px;
    color: #5c85ff;
    margin: 0px;
}

#mainwrapper #maintop div div.article h2 {
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    color: #666;
    margin: 0px;
}

#mainwrapper #maintop div div.article p {
    font-size: 14px;
    font-style: italic;
    margin: 0px;
    color: #999;
}

#mainwrapper #mainbottom {
    clear: both;
    width: 936px;
}

#mainwrapper #mainbottom div {
    display: block;
    float: left;
    margin: 0 0 16px 16px;
    width: 285px;
    border-left: 1px solid #D8D8D8;
}

#mainwrapper #mainbottom div div.article {
    width: 273px !important;
    width: 285px;
    padding: 5px;
    border: 1px solid white;
    margin: 5px 0 0 5px;
    cursor: pointer;
}

#mainwrapper #mainbottom div div.article:hover {
    border-color: #A31721;
}

#mainwrapper #mainbottom div div.article img {
    float: left;
    border: 1px solid #f0f0f0;
    margin: 0 5px 25px 0;
}

#mainwrapper #mainbottom div div.article h1 {
    font-size: 14px;
    color: #A31721;
    margin: 0px;
}

#mainwrapper #mainbottom div div.article h2 {
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    color: #666;
    margin: 0px;
}

#mainwrapper #mainbottom div div.article p {
    font-size: 12px;
    font-style: italic;
    margin: 0px;
    color: #999;
}

#banners {
	width: 936px;
	border-top: 1px solid #D8D8D8;
	border-bottom: 1px solid #D8D8D8;
	margin-bottom: 5px;
}

#banners img {
	margin: 0;
	border: none;
}

.toplinks {
    margin-right: 15px;
    color:  #0A427B;
	float: right;
	margin-top: 7px;
}

.toplinks a{
    color: #999;
	text-decoration: none;
}

#bottomlinks {
	padding-bottom: 5px;
    width: 936px;
	text-align: center;
	color: #999;
}

#bottomlinks a {
    color: #999;
    text-decoration: none;
}

.padding {
    padding: 10px 20px 10px 20px;
}

#header {
    width: 800px;
    height: 87px;
}

#header #shadow {
    width: 600px;
    height: 8px;
    background: url("/assets/images/shadow-top.png");
    background-repeat: no-repeat;
    z-index: 100;
    position: absolute;
    margin-top: 87px;
}

#header #mainnav {
    position: absolute;
    margin-top: 5px;
    margin-left: 500px;
    color: #2C5A7D;
}

.rightcol {
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
    margin-top: 28px;
    font-style: normal;
    text-transform: none;
    color: #0A427B;
    float: left;
    width: 200px;
 /*   height: 900px;*/
    text-align: justify;
	font-weight: 400;
	background-color: #fff;
}

.rightcol a {
   color: #003beb;
}

#header img {
    margin-left: 20px;
    margin-top: 7px;
    margin-bottom: 0px;
	border: none;
}

#fixedfooter {
    position: none;
   /* bottom: 0;
    left: 0;*/
    height: 25px;
    width: 100%;
	padding-bottom:10px;
	clear:both;
/*	position:relative; */
}

/* FOOTER STARTS */
 #footer{ width: 100%; height: 34px; clear: left; float: left; padding-left: 0px; 
 background: url(/assets/new_style_img/footer_bg.png) top center repeat-x;
          color: #fff7df; text-align: center; padding-top: 7px;}
    #footer ul { margin: 0; padding: 0;}
    #footer li { list-style-type: none; display: inline;
                 padding:  0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
    #footer a { color: #fff7df; }
    #footer li a:hover { padding: 0px 0px 0px; margin: 0px 0px 0px 0px;}
/* FOOTER ENDS */

/*#footer {
	text-align: center;
    width: 100;
    height: 25px;
    background-color: #fff;
    border-left: 1px solid #D8D8D8;
    border-right: 1px solid #D8D8D8;
	border-bottom: 1px solid #D8D8D8;
    margin-left: auto;
    margin-right: auto;
    padding-left: 5px; 
	color: #999;
}

#footer p {
	padding-top: 4px;
	font-size: 11px;
}

#footer a {
    color: #999;
	text-decoration: none;
}
*/
#fixedfooter #shadow {
    width: 750px;
    height: 8px;
    background: url("/assets/images/shadow-bottom.png");
    background-repeat: no-repeat;
    z-index: 100;
    position: relative;
    margin-top: -8px;
    margin-left: auto;
    margin-right: auto;
	
}

#regshadow {
    width: 750px;
    height: 8px;
    background: url("/assets/images/shadow-bottom.png");
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
}

.articlelink {
    width: 166px !important;
    width: 176px;
    padding: 3px 5px 3px 5px;
    border: 1px solid white;
    margin: 0;
    cursor: pointer;
}

.articlelink:hover {
    border-color: #A31721;
}

.articlelink h1 {
    font-size: 13px;
    color: #333;
    margin: 0px;
	font-weight: 400;
}

.articlelink p {
    font-size: 13px;
    margin: 0px;
    color: #333;
	font-weight: 400;
}

#outer_container{width:850px; /*margin-left: 25px; */padding-left:25px;/* margin-bottom: 50px;*/ 
        float:left; background-color:#FFFFFF; padding-top:10px; height: 750px; }
#customScrollBox{position: relative; height: 750px; margin-bottom: 50px; overflow:hidden; float:left;}
#customScrollBox .container{position: relative; width:500px; top:0; float:left; height: 750px; margin-right:25px; text-align: justify;}
#customScrollBox .container a{color: #29587A}
#customScrollBox .content{clear: both;}
#customScrollBox .content p {margin-bottom: 10px;}
#customScrollBox img{border:5px solid #fff;}
#dragger_container{position:relative; width:0px; height: 750px; float:left; margin:25px 25px 0 10px; border-left:1px solid #D8D8D8; border-right:1px solid #D8D8D8;}
#dragger{position:absolute; margin-left: -7px; width:15px; height:30px; background:url(/assets/images/handle.jpg) no-repeat center center;}

img{
	border:0px;
}

.scrl_out{
	width:550px;
	height: 400px;
	overflow:auto;
	float:left;
	
}
.scrl_in{
	width:500px;
	height: auto;
	overflow:hidden;
	float:left;
	margin-right:10px;
	
}
	
/* CSS Document 
.ind1 {
	height: 120px; 
	overflow: hidden; 
	margin: 10px 0 10px 0;
	margin-right: 40px;
	margin-left: 40px;
	text-align: justify;	
		}

.ind2 {
	height: 120px; 
	overflow: hidden; 
	margin: 10px 0 10px 0;
	margin-right: 0px;
	margin-left: 0px;
	text-align: justify;	
		}

#hifi .row {
text-align: left; padding: 8px 0 0 2px;
}

#hifi .row img {
	width: 300px; 
	border: none;
	float:none; 
	margin-left: 10px;
	text-align: center;
	}@charset "utf-8";
 */

Open in new window

0
driven_13
Asked:
driven_13
  • 6
  • 5
1 Solution
 
Kyle HamiltonData ScientistCommented:
please either post a link to the page (most helpful), or a zip file of all files used. A screenshot of the html is completely useless.
0
 
driven_13Author Commented:
Here is a link to a page that shows both the working pages and the non-working pages.

http://tinyurl.com/99xge54


Thanx.

--d.
0
 
Kyle HamiltonData ScientistCommented:
Why are you doing it his way? The scrollbars are still the native scrollbars.

Why not just have one content box with a fixed height and overflow:auto?

What are you trying to achieve?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
driven_13Author Commented:
I have no idea what I am doing.  I am not a coder...[:0(

This is something that I inherited from someone else.

I have no idea why this same template is working the correct way on some pages while not on others.

I believe this whole system is built on CodeIgniter.  Why, I have no idea.

So what would be the fix for this?  Without breaking anything else...??....[:0)

Thanx for any help.

--d.
0
 
Kyle HamiltonData ScientistCommented:
No problem. I can help you. We're going to simplify by removing all the extraneous wrappers.

STEP 1.

Find all instances of the following on your pages:

<div id="customScrollBox" style="height: 930px;">

				<div class="container">

					 <div id="content">

						<div class="content" >        

							<h1 style="color: #900;">Lazy Bones</h1>

			        <p style="color: #069; font-weight: 400;">M Adam Roberts</p>

							<div class="scrl_out">

								<div class="scrl_in">

								<p>I've heard it said several times lately, almost as if it's a message being sent to me, "If you aren't sweating, you aren't working!"</p>
<p>The first time I heard that statement I laughed! On further consideration, I realized it's really not a joke. It's&nbsp;actually&nbsp;true!</p>
<p>Some would say, "Hold on a minute! Just because someone is not dripping&nbsp;with sweat doesn't mean they're not working hard at what they're doing."</p>
<p>I'll agree,&nbsp;not everyone works in such a physical manner that bodily perspiration is always produced upon maximum work output.&nbsp; I can see where it&nbsp;might be&nbsp;unfair to judge someone who is really busting chops at&nbsp;what they're doing,&nbsp;and just because they're not showing any signs of personal overheating, we label them a slacker!</p>
<p>Lately, I've been evaluating my own performances in life and work. I noticed there are times when I'm really pushing myself to give my best and there are other times when I'm hardly making any effort at all.</p>
<p>The point I'm making is that if we're not pushing ourselves to&nbsp;give our very best in everything we do in life, we're robbing ourselves and others of the full benefits of our personal potential.&nbsp;By just coasting along at a comfortable pace in life, we're choosing to take the easy way out. We're not even breaking a sweat! We're not working! We're living lazy.</p>
<p>I say we all&nbsp;need to push ourselves a little harder.&nbsp;Some of us need to push ourselves a lot harder!</p>
<p>I'm not only&nbsp;speaking of our efforts at work.&nbsp; I'm referring to our efforts in every area of our lives. We need to break out of our comfort zones and force ourselves to sweat a little! We need to work hard at bettering our relationships with others.&nbsp;We need to go that extra mile for someone else who needs our help right now.&nbsp;We need to&nbsp;push ourselves to be better fathers, better mothers, better sisters&nbsp;and&nbsp;better brothers. We&nbsp;need to make greater efforts&nbsp;to be kind, and generous, and helpful to our neighbors. We&nbsp;need to start&nbsp;doing those things for others that we keep&nbsp;putting off doing. We need to&nbsp;start saying those words of healing, encouragement and forgiveness we've been meaning to say to someone for so long.&nbsp;</p>
<p>These things are not always easy to do.&nbsp; That's the whole point!&nbsp; We need to start sweating a little more in the ways we live our lives.&nbsp;We need to start pushing ourselves to be better people.</p>
<p>You might notice most&nbsp;of the areas of improvement I believe we all need to be working on involve giving more of ourselves towards other people. In my opinion, that's what life is all about!&nbsp; True living comes through giving!&nbsp; It is by giving that we receive life itself!&nbsp; The more we give, the more we live!&nbsp; The less we give, the closer we come to dying.</p>
<p>Of course, the list goes on and on.&nbsp; We need to sweat at being a better student of life.&nbsp;We need to perspire more over controlling our diets and over making healthier food choices.&nbsp;It's not easy denying ourselves all the delicious junk foods that destroy the health of our bodies, but we need to do it!</p>
<p>We need to discipline ourselves to be wise with our finances and to plan for our futures.&nbsp; Again, it&rsquo;s not always fun working at this,&nbsp; but it's something we need to force ourselves to do.&nbsp; It's hard work!&nbsp; It causes us to break a sweat and to feel a little uncomfortable, but don't we all know that in the end we will be glad we made the extra effort?&nbsp; Don't we all know we will be better off for doing it?&nbsp; So let's just do it!</p>
<p>The question remains.&nbsp; Are you and I going to be workers of life, or are we going to be a bunch of lazy bones?&nbsp; Are we going to push ourselves to be the very best we can be or are we just going to&nbsp;coast through life and never really make any difference?</p>
<p>Aren't our lives important?&nbsp; Shouldn't we be working hard at really giving our best so that we can receive the best?&nbsp; By holding&nbsp;out, we're only robbing ourselves of the abundant life we were intended for!</p>
<p>Let's not be lazy in our living and our giving!&nbsp; Let's&nbsp;work hard at everything we do so&nbsp;that our lives may be full of goodness and prosperity!</p>
								</div>

							</div>

							<br/>

							
						</div>

					</div>

				</div>

				<div id="dragger_container">

					<div id="dragger" style="display:none;"></div>

				</div>

			</div>

Open in new window

STEP 2.

Then replace them with this (retaining the appropriate content of course):

<div class="container">
        <div class="title">
        <h1>Lazy Bones</h1>

        <p>M Adam Roberts</p>
        </div>


        <div class="content">

            <p>I've heard it said several times lately, almost as if it's a message being sent to me, "If you aren't sweating, you aren't working!"</p>
            <p>The first time I heard that statement I laughed! On further consideration, I realized it's really not a joke. It's&nbsp;actually&nbsp;true!</p>
            <p>Some would say, "Hold on a minute! Just because someone is not dripping&nbsp;with sweat doesn't mean they're not working hard at what they're doing."</p>
            <p>I'll agree,&nbsp;not everyone works in such a physical manner that bodily perspiration is always produced upon maximum work output.&nbsp; I can see where it&nbsp;might be&nbsp;unfair to judge someone who is really busting chops at&nbsp;what they're doing,&nbsp;and just because they're not showing any signs of personal overheating, we label them a slacker!</p>
            <p>Lately, I've been evaluating my own performances in life and work. I noticed there are times when I'm really pushing myself to give my best and there are other times when I'm hardly making any effort at all.</p>
            <p>The point I'm making is that if we're not pushing ourselves to&nbsp;give our very best in everything we do in life, we're robbing ourselves and others of the full benefits of our personal potential.&nbsp;By just coasting along at a comfortable pace in life, we're choosing to take the easy way out. We're not even breaking a sweat! We're not working! We're living lazy.</p>
            <p>I say we all&nbsp;need to push ourselves a little harder.&nbsp;Some of us need to push ourselves a lot harder!</p>
            <p>I'm not only&nbsp;speaking of our efforts at work.&nbsp; I'm referring to our efforts in every area of our lives. We need to break out of our comfort zones and force ourselves to sweat a little! We need to work hard at bettering our relationships with others.&nbsp;We need to go that extra mile for someone else who needs our help right now.&nbsp;We need to&nbsp;push ourselves to be better fathers, better mothers, better sisters&nbsp;and&nbsp;better brothers. We&nbsp;need to make greater efforts&nbsp;to be kind, and generous, and helpful to our neighbors. We&nbsp;need to start&nbsp;doing those things for others that we keep&nbsp;putting off doing. We need to&nbsp;start saying those words of healing, encouragement and forgiveness we've been meaning to say to someone for so long.&nbsp;</p>
            <p>These things are not always easy to do.&nbsp; That's the whole point!&nbsp; We need to start sweating a little more in the ways we live our lives.&nbsp;We need to start pushing ourselves to be better people.</p>
            <p>You might notice most&nbsp;of the areas of improvement I believe we all need to be working on involve giving more of ourselves towards other people. In my opinion, that's what life is all about!&nbsp; True living comes through giving!&nbsp; It is by giving that we receive life itself!&nbsp; The more we give, the more we live!&nbsp; The less we give, the closer we come to dying.</p>
            <p>Of course, the list goes on and on.&nbsp; We need to sweat at being a better student of life.&nbsp;We need to perspire more over controlling our diets and over making healthier food choices.&nbsp;It's not easy denying ourselves all the delicious junk foods that destroy the health of our bodies, but we need to do it!</p>
            <p>We need to discipline ourselves to be wise with our finances and to plan for our futures.&nbsp; Again, it&rsquo;s not always fun working at this,&nbsp; but it's something we need to force ourselves to do.&nbsp; It's hard work!&nbsp; It causes us to break a sweat and to feel a little uncomfortable, but don't we all know that in the end we will be glad we made the extra effort?&nbsp; Don't we all know we will be better off for doing it?&nbsp; So let's just do it!</p>
            <p>The question remains.&nbsp; Are you and I going to be workers of life, or are we going to be a bunch of lazy bones?&nbsp; Are we going to push ourselves to be the very best we can be or are we just going to&nbsp;coast through life and never really make any difference?</p>
            <p>Aren't our lives important?&nbsp; Shouldn't we be working hard at really giving our best so that we can receive the best?&nbsp; By holding&nbsp;out, we're only robbing ourselves of the abundant life we were intended for!</p>
            <p>Let's not be lazy in our living and our giving!&nbsp; Let's&nbsp;work hard at everything we do so&nbsp;that our lives may be full of goodness and prosperity!</p>

        </div>
</div>

Open in new window


STEP 3.
Then in your stylesheet, add the following rules:

.container {
                position: relative;
                margin-bottom: 50px;
                overflow: hidden;
                float: left;
            }
                
            .container img{
                border:5px solid #fff;
            }
            .container a{color: #29587A}
            .content{
                overflow:auto;
                width:540px;
                height: 750px;
                padding-right:10px;
                text-align: justify;
            }
            .title h1{
                color: #900;
            }
            .title p{
                color: #069; 
                font-weight: 400;
            }
            .content p {
                margin-bottom: 10px;
            }

Open in new window


STEP 4.
You can then delete all this from your stylesheet (starting on line 450):


#customScrollBox{position: relative; height: 750px; margin-bottom: 50px; overflow:hidden; float:left;}
#customScrollBox .container{position: relative; width:500px; top:0; float:left; height: 750px; margin-right:25px; text-align: justify;}
#customScrollBox .container a{color: #29587A}
#customScrollBox .content{clear: both;}
#customScrollBox .content p {margin-bottom: 10px;}
#customScrollBox img{border:5px solid #fff;}
#dragger_container{position:relative; width:0px; height: 750px; float:left; margin:25px 25px 0 10px; border-left:1px solid #D8D8D8; border-right:1px solid #D8D8D8;}
#dragger{position:absolute; margin-left: -7px; width:15px; height:30px; background:url(/assets/images/handle.jpg) no-repeat center center;}

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
if the above is too scary :)

the height differences come from inline styles on the various pages which are different:

<div class="scrl_out" style="height: 679px; ">
0
 
driven_13Author Commented:
Ahhhh.....thank you so much kozaiwaniec.  I will try out your solution shortly and get back to you with the result.

Question: These articles were entered via a web-page and there was no way to set the "scrl_out" height to different values individually.  So how do you think this happened...???

Thanx again,

--d.
0
 
Kyle HamiltonData ScientistCommented:
Dont know. I would need to know the script behind it.

Are people still going to be using that method of entering articles? If so, then you might need to reconsider changing the HTML structure per my post, as it may break the CMS.
0
 
driven_13Author Commented:
There is a template in PHP that I would need to make the changes in as per your solution.

This is the same template that the web-based entry uses to display whenever an article is entered into the system.  (I guess like WordPress.)

So, I am thinking if I change this template then it is going to be used by ALL the articles and it will display like it should.

Correct..???...[:0)

--d.
0
 
Kyle HamiltonData ScientistCommented:
it should.

back everything up first.

Then make your changes to the template. As long as the title, byline, article etc.. tags are in the right places then it should be OK.

it might look something like this (and this is an over-simplification):
<div class="title">
        <h1>{$title}</h1>
        <p>{$byline}</p>
</div>
<div class="content">{$article}</div>

Open in new window

0
 
driven_13Author Commented:
Thank you very much for this.  It works perfectly.

Best,

--d.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now