CSS - Stop Vertical Scrolling From Long Text

Hey guys,

So i'm working on the site www. paulfenton .tk.

My problem occurs when you click on one of the categories in the sidebar or go to an individual post by clicking on the title... a horizontal scrollbar seems to come up. when it shouldnt.

if you use the mouse wheel inside the content region, you can see that the content is scrolling a little bit horizontally. I woudld like to stop this or fix the cause but I cant figure out how...

Also, if you click and drag downwards as if you were trying to select everything on the page, the page scrolls below the bottom border.. it is not supposed to do this since I turned off overflow.

Any help or ideas would be great, let me know if you have any questions.

-Paul

I have a very high div which I want to resize depending on the height availible (it has the central BG image) e.g. if the user is on 1024 they dont have to scroll down for miles to see the whole page. But if the user is on a higher res then the div should become the full length available.

Is this possible?

I thought height: 100%; would work but it doesn't seem to do much. Also had at look at the overflow options but hidden wont do me any good because if the user is on 800x600 then you cant see the rest of the content.

Any help appreciated thanks!

Hello all,

I noticed there was similar post on this topic, though I was not able to fix my problem with that post, so I will post my own.

I have made a site with relative pos, and css. I have everything positioned nicely (on everything but IE, still working on that CSS), but I have a vertical scroll bar that goes down about 3 inches, the only thing, there is nothing down there to scroll to. I have tried to alter just about everything I can think of, but nothing seems to work. If you can believe it this has been plagueing me for about 3 weeks now. Any help would relieve a lot of stress. Thanks very much for your time.

bcode.

=========== CSS File============
.wdlogo {
visibility:visible;
position:absolute;
z-index:0;
left:10px;
top:10px;
}


.slidingtext {
visibility:visible;
position:relative;
z-index:2;
left:245px;
top:-200px;
}


.blacklink {
text-decoration: none;
color: #000000; }


.blacklink:hover {
text-decoration: none;
color: #000000;
}


.intro {
text-align: left;
color: #000000;
font-size: 12pt;
font-family: Lithograph, sans-serif;
position: absolute;
visibility: visible;
z-index: 2;
left: 360px;
top: 300px;
}


.center {
visibility: visible;
position: absolute;
z-index: 0;
top: 165px;
left: 85px;
}


.shadowleft {
width:32px;
background-image: url(images/Working/jpg/left_ver_5.jpg);
background-repeat: repeat-y;
background-position: right top;
}


.background {
background-image: url(images/Working/jpg/background.jpg);
background-repeat: repeat;
}


.shadowright {
width: 32px;
background-image: url(images/Working/jpg/right_ver_3.jpg);
background-repeat: repeat-y;
background-position: left top;
}


.top {
position: absolute;
visibility: visible;
top: 0px;
}


.dots {
position: relative;
visibility: visible;
z-index: 2;
left: 160px;
top: -150px;
}


.nav {
position: relative;
visibility: visible;
z-index: 2;
left: 5px;
top: 250px;
}


.bar1 {
position: relative;
visibility: visible;
z-index: 2;
left: 240px;
top: -460px;
}


.bar2 {
position: relative;
visibility: visible;
z-index: 2;
left: 240px;
top: -420px;
}


.bar3 {
position: relative;
visibility: visible;
z-index: 2;
left: 240px;
top: -380px;
}


.welcometext {
position: relative;
visibility: visible;
z-index: 2;
left: 245px;
top: -455px;
width:330px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 17px;
}


.whytext {
position: relative;
visibility: visible;
z-index: 2;
left: 245px;
top: -415px;
width:310px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 17px;
}


.empowertext {
position: relative;
visibility: visible;
z-index: 2;
left: 245px;
top: -375px;
width:310px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 17px;
}

=================================


==========XHTML File===============
<?xml version="1.0" encoding="iso-8859-1" ?>


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--
Author: Mathew Pridham
Date: April 2004
-->


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>


<title>Web Diligence</title>

<link rel="stylesheet" type="text/css" href="wd.css" />

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="wdiespecific.css" />
<![endif]-->

<!--webbot bot="Include" endspan i-checksum="11150" -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


</head>

<body topmargin="0" bottommargin="0" class="background">
<table cellpadding="0" cellspacing="0" align="center" width="800px">
<td class="shadowleft" height="100%" width="32px" rowspan="20">
</td>
<td width="800px" height="100%" bgcolor="#FFFFFF">

<img src="images/logo/JPEG/Logo/WedDiligence_ver_4.5.jpg" align="left" border="0" name="wdlogo" width="480px" height="252px" />

<object class="slidingtext" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="500" height="100">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="flash/banner/textslide_ver_2.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed class="wdflyingtext" src="flash/banner/textslide_ver_2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="100"></embed>
</object>

<img src="images/Working/gif/dotted4.gif" class="dots" border="0" />

<table style="position:relative; left:5px; top:-340px" class="nav" cellpadding="0" cellspacing="4" width="180px" border="0">
<tr>
<td align="right"><img src="images/Working/jpg/buttons/home_button_hit.jpg" border="0" name="home" /></td>
</tr>
<tr>
<td align="right"><a href="about.html" onmouseover="document.about.src='images/Working/jpg/buttons/about_button_over.jpg'" onmouseout="document.about.src='images/Working/jpg/buttons/about_button_up.jpg'"><img src="images/Working/jpg/buttons/about_button_up.jpg" name="about" border="0" width="143px" height="20px" /></a></td>
</tr>
<tr>
<td align="right"><a href="contact.html" onmouseover="document.contact.src='images/Working/jpg/buttons/contact_button_over.jpg'" onmouseout="document.contact.src='images/Working/jpg/buttons/contact_button_up.jpg'"><img src="images/Working/jpg/buttons/contact_button_up.jpg" name="contact" border="0" width="143px" height="20px" /></a></td>
</tr>
<tr>
<td align="right"><a href="design.html" onmouseover="document.design.src='images/Working/jpg/buttons/design_button_over.jpg'" onmouseout="document.design.src='images/Working/jpg/buttons/design_button_up.jpg'"><img src="images/Working/jpg/buttons/design_button_up.jpg" name="design" border="0" width="143px" height="20px" /></a></td>
</tr>
<tr>
<td align="right"><a href="portfolio.html" onmouseover="document.portfolio.src='images/Working/jpg/buttons/portfolio_button_over.jpg'" onmouseout="document.portfolio.src='images/Working/jpg/buttons/portfolio_button_up.jpg'"><img src="images/Working/jpg/buttons/portfolio_button_up.jpg" name="portfolio" width="143px" height="20px" /></a></td>
</tr>

</table>

<img src="images/Working/jpg/welcomebar.jpg" border="0" class="bar1" width="325px" height="23px" />
<div class="welcometext">
We are a small web design & development company, specialized in quality web design for small businesses.
</div>

<img src="images/Working/jpg/whybar.jpg" border="0" class="bar2" width="325px" height="23px" />
<div class="whytext">
We, at Web Diligence, understand your need for an attractive, high quality website at an affordable price.
We create websites that are an effective combination of functionality, style, and creativity.
We specialize in custom web design as well as website makeovers.
</div>

<img src="images/Working/jpg/herebar.jpg" border="0" class="bar3" width="325px" height="23px" />
<div class="empowertext">
Not the other way around. We believe that it is your idea's, as well as ours that will make your site convey the message you're aiming for.
Whether you're re-vamping an existing site, or starting from scratch, we can design a site that not only captures your imagination,
but also fits into a small business budget.

</div>
</td>

<td class="shadowright" height="100%" width="32px" rowspan="20">
</td>
</table>
</body>

</html>

Hi,

Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables.

My page is on:
http://www.3003online.com/demos/ecoceylon/v2/

You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox.

Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this?


Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions).

The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately

[ this is a follow up to my previous thread
http://forums.devshed.com/showthread.php?t=270438

Any help would be greatly appreciated.

Thanks very much.

Here is the basic structure i'm working with:

Quote:
<div id="header'> header goes here </div>
<br clear="all">
<div id="leftbar">dynamically generated content from php here</div>
<div id="map"> map here </div>





the styles:

Quote:
#header{
height:42px;
width:100%;
background-image: url(../images/header/header_spacer.jpg);
background-repeat:repeat-x;
text-align:right;
}

div.leftbar{
float:left;
width: 400px;
height:100%;
overflow: scroll;
z-index:1;
}

div.map{
float:left;
}




The Problem: In all browsers the height of the leftbar is : 100% of the entire page as opposed to 100% of the entire page minus the size of the header element. This causes a scroll bar to appear on the page.

Any ideas on how to solve this problem? If I don't define a height of 100% the leftbar div doesn't scroll at all.

A good example of what i'm trying to accomplish here is : maps.google.com . Notice how on that site, the left menu bar scrolls, but is always 100% of the remaining page length (after the search stuff on top).

thanks in advance.