Forums

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.

http://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...

dfogge

"I thought you guys are experts who can find the bug from an image"

welp, i guess you were wrong: http://css-tricks.com/forums/discussion/21516/a-guide-to-using-codepen-help-us-help-you-/p1

Safey89

you are so right . you can't help without seeing what I'm talking about and I'm not allowed to show you local code . I asked our designer here in company and he didn't know what's wrong . he said I should know how zooming works in firefox to know why the tabs of jequery is always getting their width from brower width . any help in that ?

Safey89

I wrote some code here's somthing similar to my problem : http://jsfiddle.net/U2YkF/11/

Safey89

please help me :( I tried many ways and I had two results : if I want to make my site like this site : all elements inside html and body I have to make width:100% for html and body and not specify any width for any element (table) inside html and body . second way (which I was asked to do ) : I have to give html and body width of the table to keep it always (keep the table) inside html and body . but that's so wrong !! beacause I have to make my site for all screen sizes . I want the page to expand when zooming or when width of tables is large the body and html goes wider too

HugoGiraudel

if you are develoing a product you will have many style sheets :D !! what's strange in that !

Nothing strange with that. However there is something wrong: you shouldn't have multiple stylesheets in the production environment.

I thought you guys are experts who can find the bug from an image

We are front-end developer. Not magicians.

Safey89

okay I'm sorry , I'm not the one who wrote those stylesheets . I'm just trying to find errors and I'm a beginner and here's my pain

Safey89

maybe this's called a fluid width of table

Merri

Solution A: limit the width of content within the table.

Solution B: give the table's parent element overflow-x: auto; (and make sure it also has a width defined).

That'll make scrollbar for the table's parent element so you'll be scrolling the table horizontally instead of the whole page.

Safey89

I was asked to scroll the whole page when zooming not only the table , also I thought It's wrong to give the table a width (for example : 1200px) beacuase I don't know what screen would be used to display my site !

Safey89

I think I found my solution :

$('html').css('width',$(window).attr('innerWidth'));
$('html').css('overflow-x','scroll')
$('html').css('position','absolute')

Safey89

thanks everyone and sorry if i bothered you ^_^

treehouse : what would you like to learn today?

Forums

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