CSS table overflow? 2

[fauntleroy]

Hi there,

I posted this problem earlier and was advised to run a CSS validator on a site I'm working on. That was good advice, and now the site is showing no errors. But I'm still having this problem.

In Camino, on a MAC, the first four links work fine, but when I get to the 5th (Team) and 6th (How We Work) links ... the site jumps to the left.

http://deborahjacobs.com/SmartGivingWeb/index.html

I realize there is much more text on those pages, and that's what's forcing it to shift. The text is overflowing on those two pages because my height is set to 750 pixels. I can stop the shifting by setting the height to something like 900 pixels (which is taller than the longest text) but I don't like the look of the site when I do that. It's too tall for the pages with less text.

I'd like the site to stay centered, and let the bottom expand downward when needed for pages with lots of text.

Is there a way to do this? I'd be grateful for a solution here cause it's driving me nuts.

Thanks

@charset "ISO-8859-1";
.bodytext {
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 14px;
color: #333333;
margin-left: 13px;
margin-right: 13px;
list-style-image: url(images/curser.gif);
}
.BottomMenuText {
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 10px;
color: #FFFFFF;
}
.RedHeaderText {
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 16px;
font-weight: bold;
color: #B15634;
margin-left: 13px;
margin-top: 13px;
}
#Table_01 {
background-image: url(images/parchment1.jpg);
height: 750px;
width: 757px;
position: center;
}
.CreditTextSmall {
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 9px;
color: #FBE9D1;
}

 

[Vragabond]

The shift happens (in my FF/Win and I guess Camino/Mac has the same issue) because shorter pages have no need for a scrollbar and longer do. Since scrollbar disappears on the shorter ones and the scrollbar is part of the viewport, the center shifts a little bit. This shift won't happen in IE, because IE always displays the scrollbar, it is just inactive when you cannot scroll anywhere. You can mimic this behaviour by adding [tt]overflow: scroll;[/tt] to your html element. That will work in FF, although some browsers may not recognize html element as the actual canvas and will give that role to the body element. Play around with assigning the property to either html or body and see what works better across browsers.

html {
  overflow: scroll;
}

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ChrisHunt]

I'd like the site to stay centered, and let the bottom expand downward when needed for pages with lots of text.

For modern browsers - FF, Opera, IE7, etc. - you can do this by using [tt]min-height[/tt] instead of [tt]height[/tt]. It specifies a minimum height - the element will grow beyond that if it needs to.

For IE6 and below you'll need to continue to specify a [tt]height[/tt] (which that browser often (wrongly) treats as a [tt]min-height[/tt] anyway). Either use conditional comments or something like this:

#whatever {
   min-height: 500px;
}

* html #whatever {
   height: 500px;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[fauntleroy]

Can't believe I never noticed it was the scrollbar pushing it over!

I'm trying to use more CSS in my designs so it's been a bit of a struggle.

Thanks Guys for the great advice!!

 

[datamasher]

Hi,
just for info really,

I've tested your site in several browsers and got the following results :-

Firefox 2.0
All pages render o.k.

Opera 9.02
1. The Home Page banner images at the top break up horizontally and have a gap between them
2. The Home Page is wider by the amount of the gap between the banner images (approx. 100 pixels)

IE 7
1. The Home Page banner images at the top break up horizontally and have a gap between them
2. The Home Page is wider by the amount of the gap between the banner images (approx. 100 pixels)
3. The Company Background page banner images at the top break up vertically and have gaps between them
4. The Elements of our Style page banner images at the top break up vertically and have gaps between them

Netscape 7.02
1. The Company Background page still jumps to the right ( all other pages o.k. )

BT Yahoo browser
1. The Home Page banner images at the top break up horizontally and have a gap between them
2. The Home Page is wider by the amount of the gap between the banner images (approx. 100 pixels)
3. The Company Background page banner images at the top break up vertically and have gaps between them
4. The Elements of our Style page banner images at the top break up vertically and have gaps between them

All browsers running on Windows XP Home edition

The image break up spoils what is a reasonable site otherwise

Hope this is useful for you

Steve

 

[datamasher]

Hi again,
I've used this in my css in the past and it works o.k. for the browsers mentioned in my last post to fix the "jump to the right " problem.

html
{
height: 100%;
margin-bottom: 1px;
}

Having fun trying to find out why the image break ups are occurring in some browsers. Will post again if I find anything

Steve

 

[fauntleroy]

Thanks you for taking the time to write that information datamaster. I had no idea the site was behaving like that in the Windows browsers. I fixed the previous problems, and it looks like it triggered a whole new set of problems.

The site is built from a template, so what's making the smaller pages break-up is the fact that the text is shorter on the "background" and "elements" pages.

I think I solved the homepage being wider.

I think I implemented all the suggestions given to me. But I'm not certain if the code is fighting with itself. I've changed the code to what's below.

It really is driving me mad!!!!!!!

@charset "ISO-8859-1";
.bodytext {
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 14px;
color: #333333;
margin-left: 13px;
margin-right: 13px;
list-style-image: url(images/curser.gif);
line-height: 20px;
}
.BottomMenuText {
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 10px;
color: #FFFFFF;
}
.RedHeaderText {
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 16px;
font-weight: bold;
color: #B15634;
margin-left: 13px;
margin-top: 13px;
}
#Table_01 {
background-image: url(images/parchment1.jpg);
height: 750px;
width: 757px;
position: center;
}
.CreditTextSmall {
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 9px;
color: #FBE9D1;
}
html {
overflow: scroll;
min-height: 500px;
height: 100%;
margin-bottom: 1px;
}

 

[Vragabond]

It's because of a table-based design. That's nothing but trouble. If you were to switch to a modern way of laying out a page via stylesheets, most of these problems would go away.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]