Advertisement

05.05.2008 at 02:37PM PDT, ID: 23377872
[x]
Attachment Details

Gutter on right hand side when I remove pixels to prevent scroll bar.

Asked by charlesbaldo in Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), Firefox Web Browser

Hi

I am using html and css on a page that is 480x640 using fiefox 2.0.0.14.   I created a wrapper <div> tag with those dimension.  However the scroll bar activates even when my screen is set to 640x480 with navigation turned off and full screen. All <divs> inside are within that size with 0 margins and paddingf considered. Yet it turns on the scroll bar. When I make the page small enough to turn off the scroll bar I get a gutter on the right hand side ( a column of blank pixels)

I have attached the original page in a snippet

Thank youStart Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:

<!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>
<title>100X System</title>
 
<style type="text/css">
	body
	{
	    background-color:white;
	    margin-top: 0px;
	    margin-right: 0px;
	    margin-bottom: 0px;
	    margin-left: 0px;
	}
	
	#wrapper{
	  width: 640px;
	  height: 480px;
	  border: none;
	  background: #FFF;
	  padding: 0px 0px 0px 0px;
	  margin:0px;   	  
	}
 
	#topbanner 
	{
	  width: 640px;
	  height: 100px;
	  font-family:Verdana;  
	  font-size:x-large;
	  line-height:90px;	  
	  font-weight:bold;
	  color:white;
	  background-color:#069;  
	  text-align:center;
 	  vertical-align: bottom;  
	}
	
	#content
	{
	  width:640px;
	  height:310px;
	  font-family:Verdana;  
	  font-size:large;
	  font-weight:bold;
	  color:white;
	  background-color:#069;  
	  vertical-align:middle; 
	  text-align:center;
	  clear: both;
	  display: table-cell;	
	
	}
	
	#leftfooter
	{
	  width:310px;
	  height: 60px;
  	  padding: 5px 5px 5px 5px;  
  	  font-family:Verdana;  
	  font-weight:bold;
	  color:white;
	  background-color:#069;  
	  vertical-align:middle; 
	  text-align:left;
	  float:left; 
	}
	
	#rightfooter
	{
	  width:310px;
	  height: 60px;
  	  padding: 5px 5px 5px 5px;  	  
	  font-family:Verdana;  
	  font-weight:bold;
	  color:white;
	  background-color:#069;  
	  vertical-align:middle; 
	  text-align:right;
	  float:left;
	}
	
 	#topbanner div 
 	{
 	 	display: table-cell;
  		vertical-align: bottom;
 	} 
 
  	#content div {
  		display: table-cell;
  		vertical-align: middle;
 	} 
 
</style>
</head>
<body>
<div id="wrapper">  
    <div id="topbanner">STERRAD® 100NX System</div>
    <div id="content">Touch Screen To Start</div>
    <div id="leftfooter">04-54675-0-001 Rev. G</div>  
    <div id="rightfooter"><img alt="ASP" src="asplogo.gif" width="88" height="38" /></div>   
</div>
</body>
</html>
[+][-]05.05.2008 at 02:58PM PDT, ID: 21503350

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), Firefox Web Browser
Sign Up Now!
Solution Provided By: strobbe
Participating Experts: 1
Solution Grade: A
 
 
[+][-]05.05.2008 at 03:51PM PDT, ID: 21503660

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628