CSS - Page Doesn't Scroll At Height: 100%

i have a layout that I am trying to get to work that I need some help with. I am getting records from a database and then displaying them side by side such as:

header record1 record2 record3 record4
column1 column1 column1 column1 column1
column2 column2 column2 column2 column2
column3 column3 column3 column3 column3
column4 column4 column4 column4 column4

what I want is for the page to have to scroll to the right when lots of records are present, what happens now is that say record4 starts a new line and will be under the rest of the records not are their side. I can get it if I set the div container's width to something like 10000px but that wont work as sometimes they may be longer or shorter and I dont want a lot of white space to the right side. I want this accomplised dynamically so no matter how wide it is, it will show them all. I tried overflow: scroll but that didn't seem to work.

Here is the code, its in php but its not big or too hard to figure out.

PHP Code:
echo '<div id="tableheader">';
for ($i=0; $i<count($info); $i++) {
    echo '<p>'.$info[$i][name].'</p>';
}
echo '</div>';

for ($i=0; $i<count($data); $i++) {
    if (!($i & 1)) {
        echo '<div class="even">';
    } else {
        echo '<div class="odd">';
    }
    for ($j=0; $j<count($data[$i]); $j++) {
        if ($j == 0) {
            echo '<p><a href="homedata.php?record='.$data[$i][$j].'">'.$data[$i][$j].'</a></p>';
        } else {
            echo '<p>&nbsp;'.$data[$i][$j].'&nbsp;</p>';    
        }
    }
    echo '</div>';
}
echo '</div>';
?>
</div> 





and my css is:
Code:

#tableData {padding: 0; margin: 0; border: 0; width: 10000px;}
  
#tableheader {background-color: #ACACAC;position: relative; float: left;}
.odd {background-color:#C0D8E1; position: relative; float: left;} 
.even {position: relative; float: left;}

#tableData p {padding: 0 3px; margin: 0; border-right: 1px solid black;  border-bottom: 1px solid black;display: block;}

Any ideas?

Thanks

When I scroll up and down my page, parts of my background image I have set (aka sliding door or box or container...) disappears!!! I don't understand, I tried getting rid of all the color and hover options and it still doesn't work right. I posted my code below if someone can help me!!! If needed I can always email the images if you can't work without them, I just need to get this figured out! Thanks a bunch!!
Toni Lynne

HTML
<td width="247" class="splitright">
<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Welcome to Joy!</h2>
<p>Pastor Steve and Kim Schmelzer would like to thank you for viewing this site and blah blah blah blah. Enjoy! Pastor Steve and Kim Schmelzer would like to thank you for viewing this site and blah blah blah blah. Enjoy!</p>
<br />
</div></div>
</div>
</td>


CSS
/* background box */
.box {
background: url(images/bottom-left.gif) no-repeat left bottom;
}

.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 4%;
}

.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}

.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 4%;
}

.box h2, .box p {
padding-left: 4%;
padding-right: 4%;
}

.splitright {
background: #ffffff;
width:38%;
float: right;
overflow: hidden;
text-align:justify;
}

a:link { color: #fea11d; text-decoration: none; }
a:hover { color: #999999; text-decoration: none; }

I have a div that uses overflow:scroll to allow a large amount of text to fit into a small space.

Is there a way to make it so that when this div is loaded, it will scroll to the bottom of its contents instead of starting at the top by default?

Thanks for any help.

OK, I have a static sub-navigation on the left side of the page, which works just fine. You can see it here

I'd like the sub-navigation to scroll to just beneath he header navigation, then stay put there, when the page is scrolled. Something like the Vogue web site does with the red navigation bar, which you can see here


Can someone please explain, or give me an idea of how to accomplish this? I think it is with CSS.

thanks

Hi,

I have this strange issuewhich is only happening in IE7. When the page loads, the scroll bars begin to flicker. It stops after the page loads completely. And if the page is loading after an ajax request, it scroll bars keep flickering even after ajax response is completed. Please let me know if anyone has any answers to this issue.

The HTML is as follows:

<div id="db-overlay-popup-box" class="overlay-popup-box">
<div id="database-list-popup"><form>....</form></div></div>

The CSS used for the div elements is given below.

#db-overlay-popup-box {
min-height: 200px;
height: 400px;
position: absolute;
width: 40%;
margin-left: 30%;
top: 15em;
border: 2px solid #3282b6;
z-index: 999;
padding: 10px;
background-color: #fff;
}

#databaselist-databases {
list-style-type : none;
clear: both;
overflow: auto;
position: absolute;
width: 90%;
margin-left: 1em;
padding-left: 1em;
right: 1em;
white-space: nowrap;
}

.overlay-popup-box {
position: absolute;
z-index: 999;
width: 40%;
margin-left: 30%;
border: 2px solid #3282b6;
padding: 10px;
background-color: #fff;
}

Link To Site

Dear CSS Guruz

If you goto this page in IE and scroll down you will notice the text "Power, Safety, Simplicity, etc" Dissapears! This does not happen in Firefox. It could be a javascript issue but Im not really sure. Anybody have any clues what could cause this?

Louis

Bear with me please. I am brand new to html/CSS etc...

I just cobbled together a page a few days ago using someone elses code as a reference, I hardly know what I did or how it works, but it works just like I want it to - Background centered and stationary (no scrolling with content), but the content does scroll, with NO horizontal scroll bar.

You can view it he bit(dot)ly/rbsZsH - THIS IS WHAT I WANT MY OTHER PAGE TO DO

Ok, so feeling smug, I tried to do another one like it, without the sidebar/header, etc... For the most part it works, EXCEPT - I have an unexpected horizontal scroll bar that goes about 50% across the browser and allows the user to pull the content off-center across the background. I have nearly pulled my hair out trying to fix it and put a hidden message under the content just for fun.. (make lemonade when you get lemons, right?)

You can view second page he bit(dot)ly/qMbYl2 - THIS IS THE GOOFY PAGE

The only real clue I have is that the first page is set to 780px wide and has this comment in the container div: /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */

My second page container div is set to 802px because I am using an image from Photoshop rather than a background color.

Thank you if any of you can shed light on the situation.

P.S. - I'm sure I've totally butchered the code, and you can assume when you answer that I can cut and paste but not really understand what you are saying.

I downloaded a free layout and started using it for my club's website. After finishing several pages, I uploaded it to the school's server. However, I realized that after publishing it, the layout does not look right. It is supposed to look like this (I had to insert spaces to get around no URL postings for newbs) https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/howitssupposedtolook.jpg

Unfortunately, it looks like this https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/index.html

As you can see, there are several layout issues. First, the background color inside the white border is not the lighter green color. Also, the border is missing on the right hand side.

If anyone can shed some light on this issue, I would greatly appreciate it!

In case you can't pull up the CSS document, it is https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/FlexibleGreen.css

I use the same css for all page, but one of them doesn't show sidebar and push down the footer about 100px
Code:

http://elsoszabadmagyarkormany.com/torveny-szavazasok/

Anybody can help me?

Hi,
I am in the process of migrating a web site over on to a new platform. The old web page had an in text translation feature which I am wanting to keep but just tweek slightly.

The original page has the turkish translation appear on the right and the english translation appear on the let each expanding to about 80% of the page when clicked on.

Original Website
web .archive.org/web/20080719023530/cat .une.edu.au/page/acemhoyuk

This is a link to the original site using Wayback Machine and you can see from the moment the page loads both translations are visible.

What I am wanting to do is keep the minimised translations to the one side and the bulk of the text to the other to eliminate the inertia that comes with constantly moving your focus from one side of the page to the other.

I have done this by changing this bit of css code:
.page_language_a .bilingual .language_a, .page_language_b .bilingual .language_b {
position: static;
margin: 0 20% 0 0;
padding: 0 1.5em 0 0;
text-align:left;
border-right:1px solid #ccc;
}

.page_language_b .bilingual .language_b {
margin: 0 0 0 20%;
padding: 0 0 0 1.5em;
border-left:1px solid #ccc;
border-right: none;
}


to


.page_language_a .bilingual .language_a, .page_language_b .bilingual .language_b {
position: static;
margin: 0 20% 0 0;
padding: 0 1.5em 0 0;
text-align:left;
border-right:1px solid #ccc;
}

.page_language_b .bilingual .language_b {
margin: 0 20% 0 0;
padding: 0 1.5em 0 0;
text-align:left;
border-right:1px solid #ccc;
}


This simple change in the code seems to have worked for the most part and everything lines up fine except that it is not initially visible. When you first navigate to the page both translation appear as the body of the text one after each other. It is not until you click the mouse in the body of the text that you see the css doing what it is meant to and the translation appear on the right.

New website
www .une.edu .au/cat/sites/Acemhoyuk .php

I am a relative novice with css but I can 'read' the code and I have gone through it, experimenting with changing different aspect of it but I can't find any solution to my problem.

Could someone please help me figure out a solution to this issue as I want both the text and the translation to appear at the same time on the screen from the moment it loads not just after a mouse click.

Kim

OK,

So I have put together what I thought was a reasonably basic xhtml page outline. I'm using a Win2k box. I checked it in Opera 7 and IE6 and it looks fine (more or less). I've also validated the xhtml and css codes. However, when I look at the page in Netscape 7.1 or Firefox, the menu kind of hangs a bit in limbo. Otherwise the rest of the page render's fine. I've included my code below. Does anyone have any suggestions since it's likely that if it doesn't work in Netscape/Firefox, it won't work in many other browsers either. Thanks!

Shawn

PS I'm not saying there is anything wrong with Firefox/Netscape, but likely my code


URL: http://www.raisetheratesottawa.org/xhtml/

=====
CSS
=====

HTML {
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
BACKGROUND-COLOR: #FF99CC;
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 0px;
COLOR: #000000;
PADDING-TOP: 0px
}
BODY {
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
BACKGROUND-COLOR: #FF99CC;
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 0px;
COLOR: #000000;
PADDING-TOP: 0px
}


#upper {
width:700px;
margin:0px auto;
text-align:left;
padding: 0px;
border: 5px solid #FFFFFF;
BACKGROUND-COLOR: #000000;
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 10px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
}


/* Horizontal nav */

#menu {
width:700px;
margin:0px auto;
padding: 0;
}

#menu ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
clear: left;
}

#menu ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#menu ul li a {
background: #000000;
width: 175px;
/* was 'height: 2em; */
height: 24px;
padding: 0;
/* was 'margin: 0 0 10px 0;
' this affects the margin between upper menus*/
margin: 0 0 0 0;
color: #FF0000;
text-decoration: none;
display: block;
text-align: center;
font-weight: bold;
letter-spacing: 1px;
/* was 'line-height: 2em; */
line-height: 24px;
/* was 'font-size: x-small;
' */
font-size: 10px;
font-size: 10px;
/* was 'FONT: 8px Verdana, Arial, Helvetica, Sans-Serif;*/
}




#menu ul li#one {
width: 46px;
}
#menu ul li#two a {
width: 154px;
}
#menu ul li#three a {
width: 105px;
}
#menu ul li#four a {
width: 85px;
}
#menu ul li#five a {
width: 56px;
}
#menu ul li#six a {
width: 57px;
}
#menu ul li#seven {
width: 147px;
}


#menu ul li a:hover {
color: #000000;
background: #FF0000;
}

#menu a:active {
background: #c60;
color: #fff;
}


#content {
width:700px;
margin:0px auto;
text-align:left;
padding:0px;
border:5px solid #FFFFFF;
background: url(/xhtml/graph/rtr-logo-bk.gif) #FF99CC;
}


======
XHTML
======

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Test</title>

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

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="ROBOTS" content="No Index" />
<meta name="Copyright" content="Copyright (c) 2004" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="" />
<meta name="keywords" content="" />

<link rel="help" href="about.php" title="Site info." />

<meta name="Rating" content="General" />
<meta name="revisit-after" content="2 Days" />
<meta name="doc-class" content="Living Document" />


</head>

<body>

<div id="upper">

<div id="header">
<img src="graph/top-right2.jpg" width="700" height="78" alt="" />
</div>

<div id="menu"><ul>
<li id="one">&nbsp;</li>
<li id="two"><a href="link1.php" title="Link 1.">Link 1</a></li>
<li id="three"><a href="link2.php" title="Link 2.">Link 2</a></li>
<li id="four"><a href="link3.php" title="Link 3.">Link 3</a></li>
<li id="five"><a href="link4.php" title="Link 4.">Link 4</a></li>
<li id="six"><a href="link5.php" title="Link 5.">Link 5</a></li>
<li id="seven">&nbsp;</li>
</ul></div>
</div>


<div id="content">
<p>Here is some text</p>
<p>Here is some more text </p>
</div>



</body>
</html>

I am an art student, and I'm trying to construct my own portfolio site. I am, however, new to CSS, so I dont really know what I'm doing. I'm using Dreamweaver CS3.

I'm using a fixed 2 column template, with header and footer, and the left column as the side bar. Within the right column, I'm trying to make a scrollbar hovering near the top of the div, with clickable thumbnails of my work. Once the thumbnails are clicked on, a larger version of the image takes up the rest of the column.

Does anyone have any idea how to accomplsh this? Even my web design teacher's stumped with this one. I thought about using frames, but thats html...

Does anyone know how to set the height so it's 100% of the page size? Setting "height: 100%" doesn't seem to work. Thanks!

#bottomLeft
{
position: absolute;
height: 100%;
padding: 0;
margin: 0;
width: 175px;
}

Hi

I wonder if anyone can help. I've been trying to tidy up the layout of my home page, and I'm pretty confused by the way that the header is behaving in both Firefox and Safari - the browsers I use on my Mac.

I've got screen shots which show it looking good on most Windows browsers, but for some reason, all the text is bunched up at the top when I look at it on the Mac.

This is a link to the page:

http://www.independentliving.co.uk/index1.shtml

And this is the relevant bit of the stylesheet:

div#header {
background-image: url("header.jpg");
background-repeat: no-repeat;
color: #FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top: 0;
width:780px;
height: 200px;
margin-bottom: 10px;
font-size: 0.8em;

}

#header .welcome {
text-align: left;
width: 700px;
padding-top: 90px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.welcome {
text-align: left;
width: 700px;
padding-top: 90px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

#header .slogan {
text-align: left;
width: 700px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.slogan {
text-align: left;
width: 700px
padding-left: 20px;
padding-right: 20px;
color: #003366;
}

If anyone has any ideas, I'd be really grateful. I know Mac is a minority platform, but as it's the one I use, I'm pretty keen to get it working!

Thanks

Frances

Hi,

My site is divided into 2 columns:

The left column is 760px in width.

I want the right column to take up the remaining space of the screen - no matter what resolution i'm on.

Here's the page:
http://www.3003online.com/demos/ecoceylon/

As you can see, the left column is 760px wide, but the right column (which is currently a simple background black colour) isn't filling up the rest of the space

There's even a height problem - On IE, the width of that right column is 100% on the backgorund colour. But on Firefox, it isnt...

Here's the code:

Code:

<div id="container">
	<div id="logo">
		<div class="hide">test</div>
	</div>
	<div class="spacer">
		&nbsp;
	</div>
</div>

<div id="bgcolor_area">
	&nbsp;
</div>

And the CSS:
Code:

body { 
	color:#FFFFFF ; 
	font-family: Trebuchet MS, Arial ; 
	font-size:9pt ; 
	font-weight:normal; 
	line-height: 18px;
	background-color: #FFFFFF;
	margin:0px;
	width:100%;
	height:100%;
}

#bgcolor_area {
	background: #000000;
	height: 100%;
	width: auto;
	float: left;
}

#container { 
 	text-align: left; 
 	width: 760px;
	float: left;
}

#logo { 
	height: 89px;
	width: 760px;
 	background: url(../images/0_top.jpg) no-repeat;
	margin: 0;
}

Does anyone know what I'm doing wrong?

Thanks a lot!