horizontal scroll bar is shown with "overflow:scroll;" in CSS but it is inactive! what do i do?

Question

0.00/5 (No votes)

See more:

hi
i designed a htm page with css.

my problem is that this page don't show horizontal scroll when i minimized it !

horizontal scroll bar is shown with "overflow:scroll;" in CSS but it is inactive!

this is my source code and CSS code:

HTML

<!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" >

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

<link href="RBT-H.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="RBT-jquery.js"></script>


</head> 
<body style="width:1235px" > 

<div class="Table_01"> 
	<div class="a1"> 
		<img src="images/a1.gif" width="647" height="349" alt=""> 
	</div> 
	<div class="b2"> 
		<img src="images/b2.gif" width="588" height="64" alt=""> 
	</div> 
	<div class="c3"> 
		<img src="images/c3.gif" width="274" height="42" alt=""> 
	</div> 
	<div class="d4"> 
        <a href="User-page.aspx" target="_blank">
	    <img id="d4" src="images/l-d4.gif" width="211" height="211" alt=""></a>
	</div> 
	<div class="e5"> 
		<img src="images/e5.gif" width="103" height="886" alt=""> 
	</div> 
	<div class="f6"> 
        <a href="Login-Page.aspx" target="_blank">
    <img id="f6" src="images/l-f6.gif" width="273" height="63" alt="" ></a>
	</div> 
	<div class="g7"> 
		<img src="images/g7.gif" width="1" height="244" alt=""> 
	</div> 
	<div class="h8"> 
        <a href="Register-Page.aspx" target="_blank">
		<img id="h8" src="images/l-h8.gif" width="273" height="56" alt=""></a>
	</div> 
	<div class="i9"> 
		<img src="images/i9.gif" width="273" height="125" alt=""> 
	</div> 
	<div class="j10"> 
		<img src="images/j10.gif" width="211" height="75" alt=""> 
	</div> 
	<div class="k11"> 
		<img src="images/k11.gif" width="647" height="1" alt=""> 
	</div> 
	<div class="l12"> 
		<img src="images/l12.gif" width="519" height="178" alt=""> 
	</div> 
	<div class="m13"> 
	    <a href="Website-Portfolio.aspx" target="_blank">
		<img id="m13" src="images/l-m13.gif" width="341" height="57" alt=""></a>
	</div> 
	<div class="n14"> 
		<img src="images/n14.gif" width="1" height="300" alt=""> 
	</div> 
	<div class="o15"> 
		<img id="o15" src="images/l-o15.gif" width="211" height="211" alt=""> 
	</div> 
	<div class="p16"> 
		<img src="images/p16.gif" width="60" height="600" alt=""> 
	</div> 
	<div class="q17"> 
	    <a href="Website-Prices.aspx" target="_blank">
		<img id="q17" src="images/l-q17.gif" width="341" height="53" alt=""></a>
	</div> 
	<div class="r18"> 
        <a href="Order-Website.aspx" target="_blank">
		<img id="r18" src="images/l-r18.gif" width="341" height="62" alt=""></a>
	</div> 
	<div class="s19"> 
		<a href="Website-Templates.aspx" target="_blank"><img id="s19" src="images/l-s19.gif" width="341" height="65" alt=""> </a>
	</div> 
	<div class="t20"> 
		<img src="images/t20.gif" width="103" height="422" alt=""> 
	</div> 
	<div class="u21"> 
		<a href="Contact Us.aspx" target="_blank"><img id="u21" src="images/l-u21.gif" width="211" height="211" alt=""> </a>
	</div> 
	<div class="v22"> 
		<img src="images/v22.gif" width="205" height="59" alt=""> 
	</div> 
	<div class="w23"> 
		<img src="images/w23.gif" width="211" height="89" alt=""> 
	</div> 
	<div class="x24"> 
		<img src="images/x24.gif" width="144" height="363" alt=""> 
	</div> 
	<div class="y25"> 
		<img id="y25" src="images/l-y25.gif" width="211" height="211" alt=""> 
	</div> 
	<div class="z26"> 
		<img src="images/z26.gif" width="191" height="63" alt=""> 
	</div> 
	<div class="aa27"> 
		<img id="aa27" src="images/l-aa27.gif" width="280" height="53" alt=""> 
	</div> 
	<div class="ab28"> 
		<img src="images/ab28.gif" width="123" height="300" alt=""> 
	</div> 
	<div class="ac29"> 
        <a href="Order-Software.aspx" target="_blank">
		<img id="ac29" src="images/l-ac29.gif" width="280" height="54" alt=""></a>
	</div> 
	<div class="ad30"> 
		<img src="images/ad30.gif" width="211" height="211" alt=""> 
	</div> 
	<div class="ae31"> 
        
    </div> 
	<div class="af32" style="text-align: right"> 
        
        <span style="font-size: 8pt; color: #993300; font-family: Tahoma">
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            Copyright@2011 Baloot Design</span></div> 
</div> 

</body> 

</html>

<pre lang="text">

CSS CODE:

CSS

 a img {border:none;}
 
 .myCenter{  
 margin-left:auto;
 margin-right:auto;  
 }
 
body {

 margin: 0 auto;
 overflow:scroll;
 

}


#preview{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
    }
 
div.Table_01 {
	position:absolute;
	right:0px;
	top:0px;
	width:1235px;
	min-height:950px;
    
}
 
div.a1 {
	position:absolute;
	left:0px;
	top:0px;
	width:647px;
	height:349px;
}
 
div.b2 {
	position:absolute;
	left:647px;
	top:0px;
	width:588px;
	height:64px;
}
 
div.c3 {
	position:absolute;
	left:647px;
	top:64px;
	width:274px;
	height:42px;
}
 
div.d4 {
	position:absolute;
	left:921px;
	top:64px;
	width:211px;
	height:211px;
    background-image:url('images/d4.gif');
}
 
div.e5 {
	position:absolute;
	left:1132px;
	top:64px;
	width:103px;
	height:886px;
}
 
div.f6 {
	position:absolute;
	left:647px;
	top:106px;
	width:273px;
	height:63px;
    background-image:url('images/f6.gif');	
    
}
 
div.g7 {
	position:absolute;
	left:920px;
	top:106px;
	width:1px;
	height:244px;
}
 
div.h8 {
	position:absolute;
	left:647px;
	top:169px;
	width:273px;
	height:56px;
    background-image:url('images/h8.gif');
}
 
div.i9 {
	position:absolute;
	left:647px;
	top:225px;
	width:273px;
	height:125px;
}
 
div.j10 {
	position:absolute;
	left:921px;
	top:275px;
	width:211px;
	height:75px;
}
 
div.k11 {
	position:absolute;
	left:0px;
	top:349px;
	width:647px;
	height:1px;
}
 
div.l12 {
	position:absolute;
	left:0px;
	top:350px;
	width:519px;
	height:178px;
}
 
div.m13 {
	position:absolute;
	left:519px;
	top:350px;
	width:341px;
	height:57px;
	background-image:url('images/m13.gif');
}
 
div.n14 {
	position:absolute;
	left:860px;
	top:350px;
	width:1px;
	height:300px;
}
 
div.o15 {
	position:absolute;
	left:861px;
	top:350px;
	width:211px;
	height:211px;
	background-image:url('images/o15.gif');
}
 
div.p16 {
	position:absolute;
	left:1072px;
	top:350px;
	width:60px;
	height:600px;
}
 
div.q17 {
	position:absolute;
	left:519px;
	top:407px;
	width:341px;
	height:53px;
	background-image:url('images/q17.gif');
}
 
div.r18 {
	position:absolute;
	left:519px;
	top:460px;
	width:341px;
	height:62px;
	background-image:url('images/r18.gif');
}
 
div.s19 {
	position:absolute;
	left:519px;
	top:522px;
	width:341px;
	height:65px;
	background-image:url('images/s19.gif');
}
 
div.t20 {
	position:absolute;
	left:0px;
	top:528px;
	width:103px;
	height:422px;
}
 
div.u21 {
	position:absolute;
	left:103px;
	top:528px;
	width:211px;
	height:211px;
	background-image:url('images/u21.gif');
}
 
div.v22 {
	position:absolute;
	left:314px;
	top:528px;
	width:205px;
	height:59px;
}
 
div.w23 {
	position:absolute;
	left:861px;
	top:561px;
	width:211px;
	height:89px;
}
 
div.x24 {
	position:absolute;
	left:314px;
	top:587px;
	width:144px;
	height:363px;
}
 
div.y25 {
	position:absolute;
	left:458px;
	top:587px;
	width:211px;
	height:211px;
	background-image:url('images/y25.gif');
}
 
div.z26 {
	position:absolute;
	left:669px;
	top:587px;
	width:191px;
	height:63px;
}
 
div.aa27 {
	position:absolute;
	left:669px;
	top:650px;
	width:280px;
	height:53px;
	background-image:url('images/aa27.gif');
}
 
div.ab28 {
	position:absolute;
	left:949px;
	top:650px;
	width:123px;
	height:300px;
}
 
div.ac29 {
	position:absolute;
	left:669px;
	top:703px;
	width:280px;
	height:54px;
	background-image:url('images/ac29.gif');
}
 
div.ad30 {
	position:absolute;
	left:103px;
	top:739px;
	width:211px;
	height:211px;
}
 
div.ae31 {
	position:absolute;
	left:669px;
	top:757px;
	width:280px;
	height:193px;
	background-image:url('images/ae31.gif');
}
 
div.af32 {
	position:absolute;
	left:458px;
	top:798px;
	width:211px;
	height:152px;
	background-image:url('images/af32.gif');
}


 
div.id1a {
	position:absolute;
	left:0px;
	top:0px;
	width:181px;
	height:238px;
}
 
div.id2b {
	position:absolute;
	left:181px;
	top:0px;
	width:1054px;
	height:13px;
}
 
div.id3c {
	position:absolute;
	left:181px;
	top:13px;
	width:164px;
	height:149px;
}
 
div.id4d {
	position:absolute;
	left:345px;
	top:13px;
	width:149px;
	height:149px;
	background-image:url('images/4d.gif');
}
 
div.id5e {
	position:absolute;
	left:494px;
	top:13px;
	width:741px;
	height:35px;
}
 
div.id6f {
	position:absolute;
	left:494px;
	top:48px;
	width:199px;
	height:35px;
	background-image:url('images/6f.gif');
}
 
div.id7g {
	position:absolute;
	left:693px;
	top:48px;
	width:542px;
	height:463px;
}
 
div.id8h {
	position:absolute;
	left:494px;
	top:83px;
	width:199px;
	height:40px;
	background-image:url('images/8h.gif');
}
 
div.id9i {
	position:absolute;
	left:494px;
	top:123px;
	width:199px;
	height:40px;
}
 
div.id10j {
	position:absolute;
	left:181px;
	top:162px;
	width:111px;
	height:149px;
}
 
div.id11k {
	position:absolute;
	left:292px;
	top:162px;
	width:149px;
	height:149px;
	background-image:url('images/11k.gif');
}
 
div.id12l {
	position:absolute;
	left:441px;
	top:162px;
	width:53px;
	height:1px;
}
 
div.id13m {
	position:absolute;
	left:441px;
	top:163px;
	width:252px;
	height:48px;
	background-image:url('images/13m.gif');
}
 
div.id14n {
	position:absolute;
	left:441px;
	top:211px;
	width:252px;
	height:39px;
	background-image:url('images/14n.gif');
}
 
div.id15o {
	position:absolute;
	left:0px;
	top:238px;
	width:181px;
	height:73px;
}
 
div.id16p {
	position:absolute;
	left:441px;
	top:250px;
	width:252px;
	height:38px;
	background-image:url('images/16p.gif');
}
 
div.id17q {
	position:absolute;
	left:441px;
	top:288px;
	width:252px;
	height:38px;
	background-image:url('images/17q.gif');
}
 
div.id18r {
	position:absolute;
	left:0px;
	top:311px;
	width:165px;
	height:51px;
}
 
div.id19s {
	position:absolute;
	left:165px;
	top:311px;
	width:149px;
	height:149px;
	background-image:url('images/19s.gif');
}
 
div.id20t {
	position:absolute;
	left:314px;
	top:311px;
	width:127px;
	height:40px;
}
 
div.id21u {
	position:absolute;
	left:441px;
	top:326px;
	width:252px;
	height:25px;
}
 
div.id22v {
	position:absolute;
	left:314px;
	top:351px;
	width:235px;
	height:42px;
	background-image:url('images/22v.gif');
}
 
div.id23w {
	position:absolute;
	left:549px;
	top:351px;
	width:144px;
	height:160px;
}
 
div.id24x {
	position:absolute;
	left:0px;
	top:362px;
	width:148px;
	height:149px;
	background-image:url('images/24x.gif');
}
 
div.id25y {
	position:absolute;
	left:148px;
	top:362px;
	width:17px;
	height:149px;
}
 
div.id26z {
	position:absolute;
	left:314px;
	top:393px;
	width:235px;
	height:43px;
	background-image:url('images/26z.gif');
}
 
div.id27aa {
	position:absolute;
	left:314px;
	top:436px;
	width:235px;
	height:75px;
}
 
div.id28ab {
	position:absolute;
	left:165px;
	top:460px;
	width:149px;
	height:51px;
}
div.master {
	position:absolute;
	left:0px;
	top:511px;
	width:1235px;
	min-height:386px;
	background-image:url('images/29ac.gif');
	background-repeat:no-repeat;
}
 
div.id30ad {
	position:fixed;
	right:63px;
	width:1172px;
	height:53px;
	bottom:0px;
}
 
div.id31ae {
	position:fixed;
	right:0px;
	width:63px;
	height:53px;
	bottom:0px;
}

what do i do?

Posted 6-May-13 21:35pm

bamzi software

Updated 6-May-13 21:39pm

v2

Add a Solution

Comments

Prasad Khandekar 7-May-13 3:56am

Minimized window won;t show the scrollbar, infact it won't show anything. However if you reduces the window to a size less than 1235px then it will probably show the scrollbar.

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

vaibhav10Dec1987 · Answer 1 · 2013-05-06T21:59:00

Hi,

Remove Css Property ,

CSS

div.Table_01 {
    position:absolute;
    right:0px;
    top:0px;
    width:1235px;  //Remove these.
    min-height:950px;

}

If you want to adjust a div as per screen resolution then , give div width in percentage
and also If you not really need then remove

<body style="width:1235px" >

inline css width.

bamzi software · Answer 2 · 2013-05-06T23:11:00

thank you 'vaibhav10Dec1987573' for your quick respond.

i changed these:

CSS

body {
width:1235px; 
}

div.Table_01 {
	position:absolute;
	right:0px;
	top:0px;
	
	min-height:950px;
    
}

but now scroll appear but width is double and scroll goes to left and i have to drag scroll to right to view page!!!

bamzi software · Answer 3 · 2013-05-07T01:35:00

Solution 3

i changed again and it's better:

CSS

body {
width:48.5%;
margin:0 auto;

text-align:right;
}

div.Table_01 {
	position:absolute;
	
	top:0px;
	
	min-height:950px;
    
}

anyway thanx

Posted 7-May-13 1:35am

bamzi software

horizontal scroll bar is shown with "overflow:scroll;" in CSS but it is inactive! what do i do?

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0