BleepingComputer.com: One page will not respond to style sheet settings.

Hello again,

I've been tearing my hair out for hours now trying to get one of my pages to display properly. I've gotten my style selector code working, and even booted into Windows and ironed out the wrinkles with Internet Explorer.

Now I have one page which just won't behave itself! If you set the font size on my site to x-large on the Change Ray's Links Skin page, and go to the Web Site Monitor for Linux page on my site, you will note that the table extends off the right side of the screen. No amount of tweaking has managed to get this page to stay on the screen.

In all of the style sheets I have the table width set to 98% which is working nicely for all of the pages except this one. I've compared the html and id attributes with the other pages, and they all match. I've validated the html and the css on that page, and it passes.

Could someone smarter than me have a look at it, and see if you can spot what is making this rouge refuse to format properly?

I'm at my wits end over this matter and just can't look at it anymore, it's driving me buggy!

Later, Ray Parrish

The only thing I can think of is that there is some conflict with the table and paragraphs. Is there any reason that you are using a table?

groovicus, on Nov 18 2008, 12:26 PM, said:

Hello,

I originally used tables to set my pages up before I knew anything about css. All the other pages are using tables as well, and none of them are rendering this way. I can't for the life of me understand why that one page renders differently than all of the others. I use the same id tags and classes in all the pages as well, so the settings should be the same in all of them.

I really thought I had it whipped once I found the example that let me do the code for IE, but this has me stymied. I tried setting the paragraph element to 80% width, but that broke the rest of the pages, and that page was still wider than the window anyway.

I think I'll open one of the other pages in my editor and paste the content from that page in, and do a save as to create a new file, I've used that trick before to get away from a problem like this, maybe it will work again.

Later, Ray Parrish

Your text in the first page is inside a div, yes? The text in the second page is inside a table.

Hello again,

Well, I figured out how to fix it. I set the following property in the style sheets on the tables in my site and now they all work as intended. Once again some reading on the W3C Schools site was what it took to solve the problem. You apply this attribute to the main table, set the table's width to 98%,, and then set the column on the right to a fixed number of pixels,, and the column on the left to a width of 100%.

table-layout: fixed;

Later, Ray Parrish

This post has been edited by Ray Parrish: 18 November 2008 - 06:56 PM

groovicus, on Nov 18 2008, 02:27 PM, said:

Hello,

Sorry I didn't notice your new post. No, the front page is two tables, one above the other. I've always used tables to lay my sites out. If you'd like to see an extreme example of my use of tables, have a look at my Global Systems Design site. I made it years ago when I had the domain name matching the site name, but I haven't worked on it for a long time.

By the way, I fixed my pages as I've already stated in another post.

Later, Ray Parrish