By Yuki on

One of the problem I am facing right now is the resolution problem.

My current resolution 1152x864.
In this resoltion seems site working fine but if I change the resolution to 1024x768 or 800x600 then horizontal scrollbar
is coming so users have to scroll to browse which is annoying to them.

I assume different users can be using different resolution which we cant predict but standard can 1024x768 or more

So how can I fix this issue so that users will not see scroll bar below of webpage if the resoltion is different.

⋅ Categories: Drupal 6.x

Comments

bjornarneson’s picture

bjornarneson commented

Can you give us a link to the site? It will be easier for us to help you solve this problem.

Yuki’s picture

Yuki commented

its a intranet based sry...use the "foliage" theme and change teh resolution of your pc you will get the problem...

devtherock’s picture

devtherock commented

It could be a reason of using fixed layout, like assigning width in 'px' rather then '%', Did you check bar width ?

Yuki’s picture

Yuki commented

Below is my full css code:
But if I change the "em" (bar section) to the % the scroll bar of browser is not coming but the siidebars are not visible hiding two sides.
Dont know where to change?

body {
	margin: 0;
	padding: 0;
      background-image:url(bg.gif);
      background-position:left top;
      background-repeat:repeat-x;
	color: #000;
	font-size: 100.1%;
}
#pageWrap {
	font: 75% Arial, Helvetica, sans-serif;
	width: 1090px;
	margin: auto;
	background-color: #fff;
	border: 0px solid #ccc;
}
.two-sidebars #outerColumn {
	border-left: 15em solid #fff;
	border-right: 15em solid #fff;
}
.sidebar-right #outerColumn {
	border-right: 15em solid #fff;
}
.sidebar-left #outerColumn {
	border-left: 15em solid #fff;
}
#innerColumn {
	width: 100%;
}
#soContainer {
	float: left;
	width: 100%;
}
#header {
      height: 100px;
  	background: url(header.jpg) no-repeat;
	border-bottom: 0px solid #ccc;
      margin-bottom: 0em;
}
#content {
	float: right;
	width: 100%;
      margin-top: -1em; 

}
#leftCol {
	float: left;
	margin-left: -15em;
	width: 15em;
}
#rightCol {
	float: right;
	margin-right: -15.5em;
	width: 15em;
}
#footer {
	background: #f8f8ff url(footer.jpg) no-repeat bottom;
	border-top: 1px solid #ccc;
      color: #999;
      font-weight: bold;
	font-size: 0.9em;
	padding-bottom: 30px;
}
.footer_left {
	float: left;
	width: 20%;
}
#footer ul.links li {
	padding: 0 0 0 0.5em;
}
.footer_right {
	float: right;
	width: 75%;
	font-weight: normal;
	text-align: right;
}
#footer a:link, #footer a:visited, #footer a:hover {
	color: #708090;
}
#footer .footer_right a {
	font-weight: normal;
}
#header .inside {
	padding: 10px 0 0 5px;
 
}
#content .inside {
	padding: 25px;
}
#leftCol .inside {
	padding: 10px 0 10px 10px;
	position: relative;
}
#rightCol .inside {
	padding: 10px 10px 10px 0;
	position: relative;
}
#footer .inside {
	padding: 5px;
}
.clr {
	clear: both;
}
* html #soContainer, * html #content, * html #leftCol, * html #rightCol, * html .tabs {
	overflow: visible;
	position: relative;
}
* html .block, * html .mission, * html .sticky, * html .comment, * html #profile .profile {
	height: 0.01%;
}
* html .poll input {
	position: static;
}
*+html .poll input {
	top: 1px;
}
* html .tabs .primary {
	height: 17px;
}
* html .tabs a {
	float: left;
	margin-bottom: -1px;
}
*+html .tabs .primary {
	height: 17px;
}
*+html .tabs a {
	float: left;
}

a {
  text-decoration: none;
  font-weight: bold;
}
a:link {
  color: #379;
}
a:visited {
  color: #157;
}
a:hover {
  text-decoration: underline;
  color: #157;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0px 0 4px 0;
}
h1 {
  font-size: 1.6em;
  color: #69c;
}
h2 {
  font-size: 1.25em;
  color: #690;
}
h3 {
  font-size: 1.1em;
  color: #d72;
}
h4, h5, h6 {
  font-size: 1.1em;
}
p {
  margin-bottom: 0.9em;
  line-height: 1.5em;
}
label {
	cursor: pointer;
}
input, select, textarea {
	font: 100% Arial, Helvetica, sans-serif;
}
td {
	vertical-align: top;
}

.header_left {
	float: left;
	padding-top: 0px;

}
#header img, .header_text {
	float: left;
}
.site-name {
  font-size: 55px;
  font-weight: bold;
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
}
.site-name a:link, .site-name a:visited {
  color: #FFA500;
}
.site-slogan {
  font-size: 12px;
  color: #FFA500;
  font-style: italic;
  font-weight: bold;
}
.header_right {
	float: right;
}
.search {
	height: 50px;
	text-align: right;
	padding-right: 10px;
}
#header #search label {
	color: #FF4500;
      font-size: 15px;
}
#header #search .form-text, #header #search .form-submit {
  border: 1px solid #275;
  font-size: 11px;
}
#header #search .form-text {
  width: 18em;
  padding: 1px 2px 1px 2px;
}
#navlist {
  margin-bottom: 2px;
  font-size: 14px;
  text-align: right;
  padding-right: 5px;
}
#header ul.links li {
	padding: 0 0 0 0.5em;
}
#navlist a {
  font-size: 14px;
  font-weight: bold;
  color: #69c;
}
#subnavlist {
	text-align: right;
	margin-bottom: 5px;
      padding-right: 5px;

}
#subnavlist a {
  color: #69c;
  font-size: 12px;

}
#navlist a.active {
	text-decoration: underline;
}
#subnavlist a.active {
	font-weight: bold;

}

ul.links li {
  border-left: 1px solid #FFD39B; /* LTR */
}
ul.links li.first {
  border: none;
}

.mission {
  background: #EEF3E2;
  padding: .1em 0.5em;
  color: #222;
  margin-bottom: 1em;
}
.mission a:link, .mission a:visited {
  color: #9cf;
}
.node .content, .comment .content {
  line-height: 1.5em;
}
.help {
  font-size: 0.9em;
  margin-bottom: 1em;
	font-style: italic;
	font-weight: bold;
}
.breadcrumb {
  margin-bottom: 0em;
  margin-top: 0em;
}
.tabs {
	margin-bottom: 1em;
}
.messages {
  background-color: #fc6;
  border: 1px solid #ccc;
  padding: 0.3em;
  margin-bottom: 1em;
}
.error {
  border-color: #f00;
}
tr.odd td, tr.even td {
  padding: 0.3em;
}
fieldset {
  border: 1px solid #ccc;
}
pre {
  background-color: #eee;
  padding: 0.75em 1.5em;
  font-size: 12px;
  border: 1px solid #ddd;
}
table {
  font-size: 1em;
}
.form-item label {
  font-size: 1em;
  color: #222;
}
#content .item-list {
	font-size: 0.9em;
	margin: 1em 0;
	border-bottom: 1px solid #ccc;
}
.item-list .title {
  font-size: 1em;
  color: #222;
}
#leftCol .item-list ul, #rightCol .item-list ul {
	margin: 1em 0 0;
}
#leftCol .item-list ul li, #rightCol .item-list ul li {
	margin-left: 0.5em;
}
div.links {
  clear: both;
	color: #999;
	font-size: 0.9em;
}
.node {
  margin: 0.5em 0 2em 0;
}
.sticky {
  padding: 0.5em;
  background-color: #f9f9f9;
  border: solid 1px #ddd;
	margin-top: 0;
}
.node .content, .comment .content {
  margin: 0.5em 0 0.5em 0;
}
.node .taxonomy {
  color: #999;
  font-size: 0.8em;
  text-align: right;
}
.submitted {
	font-size: 0.85em;
	font-style: italic;
}
.comment .submitted {
	font-size: 0.9em;
}
.comment {
  border: 1px solid #abc;
  padding: 0.5em;
  margin-bottom: 1em;
	font-size: 0.9em;
}
.comment .title a {
  font-size: 1.1em;
  font-weight: normal;
}
.comment .new {
  text-align: right;
  font-weight: bold;
  font-size: 0.8em;
  float: right;
  color: #f00;
}
.signature {
  padding: 0.5em;
	font-size: 0.9em;
	background: #cdd;
	margin: 1em;
}
.node .picture, .comment .picture {
  float: right;
}
.comment div.links ul.links, .comment div.links ul.links li {
	display: inline;
}

/* Module specific styles*/
#aggregator .feed-source {
  background-color: #eee;
  border: 1px solid #ccc;
  padding: 1em;
  margin: 1em 0 1em 0;
}
#aggregator h2 {
	padding: 1em 0;
}
#aggregator .feed-item, #aggregator .links {
	border-bottom: 1px solid #ccc;
	padding-bottom: 1em;
}
#aggregator .news-item .categories, #aggregator .source, #aggregator .age {
  color: #999;
  font-style: italic;
  font-size: 0.9em;
}
#aggregator .title {
  margin-bottom: 0.5em;
  font-size: 1em;
}
#aggregator h3 {
  margin-top: 1em;
}
#forum table {
  width: 100%;
	margin: 1.5em 0;
}
#forum tr td.forum {
	background-position: 2px 0.5em;
}
#forum td {
  padding: 0.5em;
}
#forum td.created, #forum td.posts, #forum td.topics, #forum td.last-reply, #forum td.replies, #forum td.pager {
	white-space: normal;
}
#forum td.forum, #forum td.posts {
  background-color: #eee;
}
#forum td.topics, #forum td.last-reply {
  background-color: #ddd;
}
#forum td.container {
  background-color: #ccc;
}
#forum td.container a {
  color: #555;
}
#forum td.statistics, #forum td.settings, #forum td.pager {
  height: 1.5em;
  border: 1px solid #bbb;
}
#forum td .name {
  color: #96c;
}
#forum td .links {
  padding-top: 0.7em;
  font-size: 0.9em;
}
#forum .links {
  font-size: 0.9em;
	text-align: right;
}
.block-forum h3 {
  margin-bottom: 0.5em;
}
#profile .profile {
  clear: both;
  border: 1px solid #abc;
  padding: 0.5em;
  margin: 1em 0em 1em 0em;
}
.profile h3 {
	border: none;
	margin-bottom: 1em;
}
#profile .profile .name {
  padding-bottom: 0.5em;
}
#profile .profile .field {
  font-size: 0.9em;
	font-style: italic;
}
#book-outline {
	min-width: 1em;
	width: auto;
}
div.admin .left, div.admin .right {
	margin: 0;
	width: 49%;
}
div.admin-panel {
	padding: 10px 0;
}
div.admin-panel .description {
  color: #999;
}
div.admin-panel .body {
  background: #f4f4f4;
}
div.admin-panel h3 {
  background-color: #69c;
  color: #fff;
  padding: 5px 8px 5px;
  margin: 0;
}
.poll .vote-form {
	text-align: left;
}
.poll input {
	position: relative;
	top: 2px;
}
.poll .vote-form .choices {
	display: block;
}
.block-poll div.title {
	font-size: 1.1em;
  color: #d72;
}
#user-login-form {
	text-align: left;
}
.block #user-login-form ul {
	padding: 0;
}
#leftCol .item-list ul li.openid-link, #rightCol .item-list ul li.openid-link, #leftCol #user-login-form .item-list ul li, #rightCol #user-login-form .item-list ul li {
	margin-left: 0;
	list-style-type: none;
}
#user-login-form li.openid-link, #user-login li.openid-link {
	padding-left: 1.5em;
	background-position: left center;
	margin-left: 0;
}

.block, .box {
  padding: 0 0 1.5em 0;
}
.block {
  font-size: 12.5px;
  border-top: 0px solid #cdd;
  border-bottom: 0px solid #A2CD5A;
  padding-bottom: 0em;
  margin-bottom: 1em;
  background-color: #ffffff;
}
#footer .block {
  border: none;
  padding-bottom: 0;
  margin: 10px 0 0;
  background: #f8f8ff;
}
.block h2.title {
  font-size: 13px;
  color: #fff;
  background-color: #A2CD5A;
  margin: 0 0 0.25em 0;
  padding: 2px 2px 1px 4px;
}
#footer .block h2.title {
  color: #000;
  background-color: #f8f8ff;
  margin: 0;
  padding: 0;
}
.block .content, .box .content {
  padding: 2px 4px;
}
#footer .block .content {
  padding: 2px 0;
}
.box .title {
  font-size: 1.1em;
}
.powered {
	font-size: 0.8em;
}
devtherock’s picture

devtherock commented

As I said its problem of having fixed layout, in your css you have given width 1090px to "pageWrap" element, so this width wouldn't change when resolution change, you need to change width in "%". try this

#pageWrap {
font: 75% Arial, Helvetica, sans-serif;
width: 88%;
margin: auto;
background-color: #fff;
border: 0px solid #ccc;
}

Hope this help you.

Thanks

regards
Kuldev

ishmael-sanchez’s picture

ishmael-sanchez commented

Or you can scrap your CSS and use a theme (or build your own) that has adaptive properties like Less Framework or Tiny Fluid Grid.

Yuki’s picture

Yuki commented

Not working, I have changed it into % as said...but when I press cntrl+scroll mouse or change the resolution then the sidebar increases its width automatically...header image getting smaller...lokking awkward...do I need to change any other value in the code?

devtherock’s picture

devtherock commented

It would be great if could provide us link. Actually I use the theme you mentioned, and change resolution after changing width in %. It worked for me.

Yuki’s picture

Yuki commented

I am extremely sry that it is intranet based and another info I am using IE 6.
Can you copy pest the whole code (which I've pesetd above) into your foliage theme folder's style.css and see. Appreciate. Thank u very much.

devtherock’s picture

devtherock commented

Hi your css and theme was fine for me in IE6 as well, installing IE6 and then change resolution, it was looking same as in firefox and chrome. there might be some other reason. debug it with IE developer tool.