Why do these two table styles conflict?

[GaryCam]

I have a bunch of text that scrolls vertically. Inside that text I have several tables and they appear as expected and scroll along with the text.

I have a table I'll call 'cart' that I want to place inside the scrolling area but it won't go. The only way it will scroll merrily along is if I remove its style or remove the overflow characteristic of the scrolling text.

Here's the style for the scrolling text:

.bodytext {
   overflow-y: auto; 
   overflow-x: hidden;    
   font-family: Arial, Helvetica, sans-serif;
   font-size: small;
   color: #666666;
   width: 580px; 
   vertical-align: top;  
   text-align: left;
   background-color: #FFFFCC;
   line-height: normal;
   height: 440px;
}

And here's the style for the table I want to insert:

#cart {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #666666;
   text-align: right;
   width: 537px;
   align: center;
}

Obviously some characteristic is incompatible, but what? What style attribute would conflict with "overflow-y: auto;"?

Thanks in advance, Gary

 

[Vragabond]

There's no align in CSS, however I don't think that is causing your problems. Can you explain in more detail what "it won't go" means?

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

 

[GaryCam]

Thanks for the response, Vragabond. I just found the problem: I had an unclosed tag. Funny how you can concentrate on a problem for an hour without success and then after taking a break the answer leaps out at you!

~ Gary

 

[ChrisHunt]

The moral of this story - validate your code!

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[GaryCam]

Hi Chris. Wise advice indeed. VALIDATE YOUR CODE.

I am not a programmer/designer/anything. I just fiddle around. Can you explain how YOU validate code? After I make something nice & pretty in Firefox I then have to spend at least as much time making it look the same in IE. I assume proper validation would eliminate this.

TIA,
Gary

 

[ChrisHunt]

There are plenty of validators out there, but I tend to use the W3C one at

http://validator.w3.org/

. If you install the Web Developers Toolbar extension for Firefox it'll let you validate any page your looking at with a couple of clicks. You can also install a plug-in which will validate each page as you view it from

http://users.skynet.be/mgueury/mozilla/

.

All these methods will check your code against the doctype you give it, and keep it on the straight and narrow.

Will it ensure that IE and FF renderings look the same? Not in itself, no, but it does help. When a browser encounters invalid code, it tries to guess at what you meant your code to say. IE and FF sometimes make different guesses, leading to inconsistent results. Ensuring your code is valid makes it easier to keep the browsers in step. Equally important, it flags up hard-to-spot errors like missing an end tag.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[GaryCam]

Thanks, Chris. I will download the toolbar and validate code from now on.

~ Gary