How to stretch my page and get scroll bar when zooming in?

[Safey89]

I couldn’t find a way to describe my situation but when zooming in the page it’s not zooming with all its contents , just look to the image and you will know what I mean :

I can’t provide you with css code becuase of my company policy
can you tell me what’s wrong in my style !
html and body don’t grow when zoooming like other sites !
I want the whole page with all its contents get bigger when zooming abd a csroll bar would appear .
I’m still a beginner and I’m lost in attributes

[Paulie_D]

It’s going to be really hard to help without the code.

Your image doesn’t really show us the problem and, anyway, it looks like you DO have scrollbars.

[Safey89]

the table is going outside the html body content .
I’ll give you an example ! my page now is like this site . try to zooming-in here this page .
I want the zooming to be like http://stackoverflow.com
scroll I’m talking about is in the bottom of the window .

[Paulie_D]

I don’t get a scrollbar on stackoverflow when zooming until I get to 200%, which, I guarantee, no-one will ever do.

If it’s a table then that is probably the problem but, again, without the code we can’t play with it to try things out.

[webunv]

there is problem with margin .
have you use margin or top left right to put space between two div ?

use margin

[Safey89]

I have many css files and I don’t know which one I should show you its code . any way here it is :

body{font-size: 11pt;color: #333333;font-family: Calibri,”Times New Roman”;}
a{text-decoration: none}
h3{border-bottom:1px solid #A19B9E;color: #c77405;font-style: italic;}
label{font-weight: bold;color: #c77405;font-style: italic;}

#Page{width:100%;margin:0;padding:0;min-width:994px;height:100%;}
#Header{width:100%;height:60px;background-color:#FFFFFF;}
#Header{background:url(/images/Logo.png) no-repeat;}
#Header .menu {float:right}
#Header .menu a {color:#c77405;text-decoration: none;}
#Header .menu a:hover {color:#eb8f00;text-decoration: underline;}
#Header .welcome {float:right;margin:0 10px 0 10px;font-style: italic;font-size: 10pt;}
#Loading{display:none;background:#FFFFFF url(‘images/loading.gif’) no-repeat center;z-index:1000;}
#DataForm{display:none;}
#NavBar{border:0;height:30px;padding:0;text-align: center;vertical-align: middle;}

#MainPage{width:100%;margin:0;padding:0;background:url(‘images/MainPage.jpg’) repeat-x;}
#MainPage #SideBar{height: 100%;width:220px;margin:0;padding-top:20px;}
#MainPage #SideBar h2{font-size: 11pt;padding-top:5px;padding-bottom: 5px;padding-left: 25px;}
#MainPage #SideBar ul{list-style: none;font-size: 10pt;margin: 0;padding: 0 ;}
#MainPage #SideBar ul li{padding: 2px;cursor: pointer; }
#MainPage #SideBar ul li a:hover{color:#e78f08;text-decoration: underline;}
#MainPage #SideBar ul li h3{font-size:10pt;cursor:default;margin: 5px}
#MainPage #Container{padding:20px;width:74%;height: 100%;overflow: auto;}
#MainPage #msg {display: none;max-width: 300px;}
#MainPage #Result{height: 100%;width: 100%;min-width:610px;min-height:300px; max-height: inherit;padding-top:20px;}
#MainPage #Result h3{border-bottom:1px solid #A19B9E;color: #c77405;font-style: italic;}

#Footer {display: inline-block;width:100%;text-align: center;font-size: 12px;font-style: italic;font-family: serif;color:#787878;}
#toolbar{margin: 0;padding: 0;}
ul#ListToolBar li {cursor: pointer;list-style: none outside none;margin: 2px;padding: 4px;position: relative;}
#Final{border-collapse: collapse;width:100%;}
#Final tr td{vertical-align: top;margin: 0;padding: 0;border-color: #d3d3d3;}
#Final tr.ui-state-default td{padding: 4px;}
#Final table tr td{padding: 2px;}
#Final .TopBorder{border-top:1px solid #d3d3d3}
#Final .Primery{color:#9FAFD1}
#Final .center{text-align: center; }
#InsertForm h3{font-size: 12pt;}
.ObjectData{min-width: 550px;}

.red{
background-color:#994d53;
color: #ffffff;
}

and another style sheet :

* {margin:0; padding:0;}
body
{
background:#F3F3F3;
font-size: 14px;
line-height: 150%;
font-family: Arial;
color: #797979;

}
img
{
border:0;
}
a
{
color: #F69744;
text-decoration:none;
}
a:hover
{
text-decoration:underline;
}
input
{
color:#797979;
}
textarea
{
color:#797979;
}
label
{
display:block;
color:#F69744;
font-weight:bold;
margin-top:3px;
margin-bottom:1px;
}
legend
{
color:#797979;
}
/**********************************************/
#main
{
margin:0 auto;
width:100%;
height:100%;
background:#FFFFFF;
}
#main img.mysql
{
margin-top:0px;
}
/**********************************************/
#header
{
padding:0px 0 30px 0;
display: block;
}
#header img.logo
{
margin-top:5px;
}
#header ul
{
float:right;
margin-top:10px;
margin-right:40px;
font-size:16px;
line-height:25px;
}
#header ul li
{
float:left;
list-style:none;
padding-left:20px;
}
#header ul li a
{
color:#797979;
text-decoration:none;
}
#header ul li a:hover
{
text-decoration:underline;
}
#header ul li.home
{
border-right:1px solid #E6E6E6;
padding-right:10px;
padding-left:10px;
position:relative;
left:0px;
top:10px;
}
#header ul li.contact
{
padding-right:10px;
padding-left:10px;
}
/**********************************************/
#container
{
position:relative;
width:100%;
background:#FFFFFF;
}

/**********************************************/
#right-bar
{
float:left;
width:236px;
padding:0;
margin:0;
vertical-align:top;
text-align:center;
}
#right-bar img.pic2
{
text-align:right;
margin-left:18px;

}
/*************************************************************************************/
#left-bar
{
float:left;
width:236px;
padding:0;
margin:0;
vertical-align:top;
text-align:center;
}

/*************************************************************************************/
#footer
{
width:100%;
height:20px;
vertical-align:middle;
font-size:10px;
font-weight:bold;
/* position: fixed;
bottom: 30px;*/
/*margin-top:-100px;
/*clear: both;*/
}
#footer ul
{
margin-top:10px;
margin-right:10px;
margin-left:30px;
color: #797979;
line-height:11px;

}
#footer ul li
{
float:left;
border-right:1px solid #797979;
list-style:none;
margin:0 5px 5px 0;
padding-right: 5px;
}
#footer ul li a
{
color: #797979;
text-decoration:none;
}
#footer ul li a:hover
{
text-decoration:underline;
}
#footer .copyright
{
margin-top:5px;
float:none;
text-align:center;
}
p.page-title
{
font-size:18px;
font-family:Tahoma;
color:#F69744;
padding-bottom:7px;

border-bottom:1px solid #E6E6E6;
}
/********************************************************************************************/

#main-bar-l
{
width:504px;
vertical-align:top;
height:100%;
padding-bottom:20px;
padding-left:20px;
padding-right:10px;
margin:0;
line-height:20px;
border-left:1px solid #F69744;
}
#main-bar-l p
{
margin-top:15px;
margin-bottom:15px;
}
#main-bar-l img.pic2
{
float:right;
margin-left:5px;
margin-right:-14px;
margin-top:-15px;

}
/*****************************************************************************************************************/
#main-bar-r
{
float:left;
display:block;
width:504px;
vertical-align:top;
height:100%;
padding:0 5px 10px 30px;
margin:0;
line-height:20px;
border-right:1px solid #F69744;
}
#main-bar-r p
{
margin-top:15px;
margin-bottom:15px;
}
/*****************************************************************************************************************/
#submenu-title
{
width:200px;
height:30px;
margin-left:30px;
margin-top:15px;
color:#F69744;
padding-top:4px;
padding-left:25px;
font-family:Arial;
font-size:18px;
text-align:left;
background:url(images/sub_title.png) no-repeat;
}
.submenu
{
margin:10px 10px 10px 30px;
color: #797979;
line-height:11px;
text-align:left;
text-decoration:none;
list-style:none;
}
.submenu li
{
color:#797979;
padding:8px;
padding-left:20px;
text-decoration:none;
border-bottom:1px dotted #797979;
}
.submenu li:hover
{
background:url(images/arrow.png) no-repeat left;

}
.submenu li.selected
{
background:url(images/arrow1.png) no-repeat left;
}
.submenu li.selected:hover
{
background:url(images/arrow1.png) no-repeat left;
}
.submenu a
{
color:#797979;
text-decoration:none;
}
.submenu a:hover
{
color:#797979;
text-decoration:none;
}

[Paulie_D]

This worries me! ¬

>I have many css files

I can’t see any styles / properties for the table (unless it has an ID) so my guess is that there is some inline styling. Until we can see a live site it’s really going to be hard to help.

[Safey89]

if you are develoing a product you will have many style sheets :D !!
what’s strange in that !
I can’t give a link .
I thought you guys are experts who can find the bug from an image
it’s a position or overflow or somthing I still don’t know in CSS yet !
thanks for help any way

[Safey89]

I solved it :

body html
{
position: fixed;
width: 100%;
overflow:scroll;
}

but the scroll is not visible :(

[Paulie_D]

When I am developing a web page I know where all the parts of my page are in relation to the CSS.

You may have added a fix but I doubt if you have actually resolved the underlying issue. My understanding is (and I’m sure others will chime in if i am wrong) is that tables don’t scale/zoom as you might expect and that has to be taken into account when doing your code.

https://css-tricks.com/responsive-data-table-roundup/

[Safey89]

I’m not the ine who wrote the stylesheets . I’m just using them .
and I was asked to fix this problem

[Safey89]

http://jsbin.com/apane6/14
it’s my problem !!
I want to get rid of this problem . I want the whole page which contains many tabs and tables inside tabs to grow together .
thats simple …

[Watson90]

I am really struggling to get my head around what you’re talking about?

[Safey89]

I’m really sorry :$
I just want my page to be like stackoverflow.com when zooming in .
but style I have (which I didn’t write) do as you see in the image above .
html and body don’t get bigger they are always in the size of my browser window like our page we are posting in :D
the table is a dependent component and it has its own style
the problem here appears !
zoom in . table gets out of the tab :D
I was asked to fing why my tab is not growing also like the table does :D
I hope I made my question clear now

[Paulie_D]

The Jsbin seems to work fine zoomed and is also pretty responsive (as tables go).

Here’s my question.

How MUCH do you have to zoom in before you can’t see all the data.

This could be a could be a problem that doesn’t need a solution.

Once again, until we can see a live site…

[Author]

Posts