Webmaster of School Site, odd table problem

T

Theowb4

New Member
I'm the webmaster for my school's website, and recently the strangest problem happened.
http://www.slrsd.org/slrhs/
Please visit that website, if you can, in Chrome, then either Firefox or IE. For some reason, a very large amount of tables come up on Firefox and IE that don't in Chrome. If you have any ideas as to why, please tell me.

tl;dr version, Random tables in Firefox and IE, what do?

Thank you all so much!
-Theo
 
T

Theowb4

New Member
Right-vs-wrong-school-site.png

That's the difference for me. The tables around the "wrong" (firefox and IE) one are what is concerning me and the school board.
 
D

DesignerBill

Member
The tables around the "wrong" (firefox and IE) one are what is concerning me and the school board.
Click to expand...
Now I see what you mean; I'm sorry I missed it the first time. You mean the extra table borders.

What has happened is that the style.css has this specification on the td element: border: .25px solid #000000;. Some of the classes for other td elements have left, top, right, or bottom borders specified separately. So, where there is a td with no class spec, having another table nested inside, the .25px border is in effect on the outer td and it is being shown in addition to the border for one or more of the the nested table td's. In the footer (td class="fineprint"), there is no nested table, so you are only seeing the .25px border at the right, left, and bottom of that td.

Here's the reason you see these borders in IE and Firefox, but not Chrome. Chrome does not show a border as small as .25px (or if it does it is too thin to see on the screen) but IE and Firefox are actually showing this thin border as if it were 1 px.

I think the solution may be to just remove that .25 px border from the td spec in style.css.

BTW, I like the site appearance very much. It is clean, nicely laid out, good choice of graphics. But to make it faster to display and easier to maintain in the future, why not have it recoded to use a div based layout instead of all those tables?
 
Last edited:
C

che09

New Member
DesignerBill said:
Now I see what you mean; I'm sorry I missed it the first time. You mean the extra table borders.

What has happened is that the style.css has this specification on the td element: border: .25px solid #000000;. Some of the classes for other td elements have left, top, right, or bottom borders specified separately. So, where there is a td with no class spec, having another table nested inside, the .25px border is in effect on the outer td and it is being shown in addition to the border for one or more of the the nested table td's. In the footer (td class="fineprint"), there is no nested table, so you are only seeing the .25px border at the right, left, and bottom of that td.

Here's the reason you see these borders in IE and Firefox, but not Chrome. Chrome does not show a border as small as .25px (or if it does it is too thin to see on the screen) but IE and Firefox are actually showing this thin border as if it were 1 px.

I think the solution may be to just remove that .25 px border from the td spec in style.css.

BTW, I like the site appearance very much. It is clean, nicely laid out, good choice of graphics. But to make it faster to display and easier to maintain in the future, why not have it recoded to use a div based layout instead of all those tables?
Click to expand...


I guess this would fix your problem! ;)
 
T

Theowb4

New Member
DesignerBill said:
Now I see what you mean; I'm sorry I missed it the first time. You mean the extra table borders.

What has happened is that the style.css has this specification on the td element: border: .25px solid #000000;. Some of the classes for other td elements have left, top, right, or bottom borders specified separately. So, where there is a td with no class spec, having another table nested inside, the .25px border is in effect on the outer td and it is being shown in addition to the border for one or more of the the nested table td's. In the footer (td class="fineprint"), there is no nested table, so you are only seeing the .25px border at the right, left, and bottom of that td.

Here's the reason you see these borders in IE and Firefox, but not Chrome. Chrome does not show a border as small as .25px (or if it does it is too thin to see on the screen) but IE and Firefox are actually showing this thin border as if it were 1 px.

I think the solution may be to just remove that .25 px border from the td spec in style.css.

BTW, I like the site appearance very much. It is clean, nicely laid out, good choice of graphics. But to make it faster to display and easier to maintain in the future, why not have it recoded to use a div based layout instead of all those tables?
Click to expand...

THANK YOU SO MUCH! That fixed it!!! THANK YOU!
 
You must log in or register to reply here.
Top