CSS - I Want 800x600 To Overflow

Site
CSS

I've been making that for a few days now. It used to be larger, but didn't fit on an 800x600 display.

I resized the three sliced BG images down to 641px from 684px. I resized #main to 768px.

I chose 641px for this reason... The left side BG is 125px wide. The border for #main is 2px. 641 + 125 + 2 = 768px

Right? Is my thinking clear?

It all looks great in all 3 major browser, IE, FF, and Opera! I'm stoked!

I have FF, but I did not have that developer extension. So, I downloaded it. This is GREAT!

Now, when I resize to 800x600, the window I had it in shrinks, and I STILL get a horizontal scrollbar. I don't care about a vertical scrollbar. I'm not worried about that, but I don't understand why I get a horizontal scrollbar. Is there some web development piece of info I don't have, or am I just doing something wrong. Now, let me also say that the entire page still actually fits on screen at 800x600, meaning that all text is still visible, and all links/images can be seen, but the fact that there is a scrollbar at all annoys me...

Please have a look-see, and tell me what you think, folks.

All in all, how do I ensure that anyone with any screen can effectively view this site?

Chris

I have created a small website to test something out. It only has the one <div> tag which is set to 780px. margins and padding on the body tag have been set to 0px but still i get a horizontal scrollbar in IE when at 800x6000 resolution. Why?!

you can see what i mean bu going to...
http://www.impulsive-solutions.co.u...uy/template.htm

I am curious to know what many of you think about the design consideration for 800 x 600. I am about to start a major project and am considering going to a fixed width of 1024 instead of my current default of 770. As I see it only about 1 of 10 use 800 x 600, and I think that will go down in the not too distant future. I wouln't mind learing how to scale a site so it looks good in any resolution but as I understand it you can not scale images that many of my site layouts depend on. Tom

My CSS works in IE and Mozilla but not Netscape or Opera
I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there).

Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately?

Here are the related parts of my CSS:

/* CSS styles */
BODY {
font-family : Verdana, Arial, Helvetica, sans-serif ;
font-size : 10pt;
background : Black;
color : White;
margin: 0;
padding: 0;
border-width: 0;
overflow: hidden;
}


HTML {
overflow: hidden;
}


#LeftNavDIV {
position:relative;
width:185px;
height:100%;
float:left;
padding:2px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:1px solid white;
overflow:auto;
}


#ContentDIV {
position:relative;
height:100%;
width:75%;
float:right;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:0px dashed #336699;
overflow:auto;
}

this is the code i'm having problems with:

Code:

<style type="text/css">

body {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
 	margin : 0;
	padding : 0;
}

/* text */

h1 {
	font: bold 10px Verdana, Arial, Helvetica, sans-serif;
	line-height:30px;
}

/* div classes */

div.row {
	position:relative;
	left:10px;
	width:326px;
	height:20px;
	z-index:1;
	margin-bottom:8px;
	text-align:right;
}

div.cell_title, div.cell_content {
	position:absolute;
	top:0px;
	float:left;
	padding:0px 0px 0px 8px;
	border:1px solid #E4E4E4;
	text-align:left;
	line-height:17px;
	
}

div.cell_title {
 	background-color: #E4E4E4;
	left:0px;
	width:100px;
	z-index:2;
}

div.cell_content {
	background-color:#FCFCFC;
	left:100px;
	width:224px;
	z-index:3;

}

/* form elements */

.input {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
	background-color: #FCFCFC;
	height:15px;
	width:213px;
	border:0;
	}

.textarea {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
	background-color: #FCFCFC;
	height:100px;
	width:213px;
	border:0;
	overflow:auto;
	}

</style>

<h1>Contact</h1>
<form action="?menu=contact" method="post" name="contact">
<div class="row">
	<div class="cell_title"><label for="name">name:</label></div>
	<div class="cell_content"><input type="text" class="input" name="name" id="name"/></div>
</div>

<div class="row">
	<div class="cell_title"><label for="email">email:</label></div>
	<div class="cell_content"><input type="text" class="input" name="email" id="email" /></div>
</div>

<div class="row">
	<div class="cell_title"><label for="message">message:</label></div>
	<div class="cell_content"><textarea class="textarea" name="message" id="message"></textarea></div>
</div>

<div class="row">
	<input type="image" src="includes/images/btn_add.gif" name="Submit" value="Submit">
</div>
</form>

My problem is that my "row" div's overlay if their content is larger. Because of that i cannot see the send button from my form (the textarea height is bigger that the height of the "row" div - i need the layer to expland according to the content, but i don't want it to overlay on what is after it!).
I hope that you understood my problem and could help my with it.

Thanks in advance!