cross browser table width mess

[jreitz]

Ok, so I have been using this site for a while somewhat aware of this problem, but just recently decided to go at fixing it. Without tearing the guts out. In IE it looks pretty good. In mozillafirefox or netscape 7.2 the left most column which is suposed to be 100px in width freaks out to about 600px in length. but most eveything else stays how it should. The validator in dreamweaver says all is well, and i am not the greatest hand coder, so i might be missing something when i have looked at the code.

www.parkfun.com/index.html

take a look, let me know if you see something in the sorce that would cause this?

THANKS MUCH!

JAR

[bradyj]

Holy #$%, I went to High School in Zion, IL - my mom lives in Schaumburg, I worked in Vernon Hills. Small world:)

I'm taking a look at it now -- just off the top of my head, I see a lot of coding in your HTML that could be condensed and cleaned up -- a lot of declarations that should be CSS, a lot of elements that should be table-less.

You may essentially find it easier to put your links in one table cell and make them a list:

<ul>
<li><a href="home.html">home</a></li>
<li>...
</ul>


That way you can force a width via CSS and style them as needed -- this is also the semantic proper method. The fully accessible method would be to dump tables all together, but if you're unwilling to do that due to time restraints, cost, or whatever else you have, then I would think about making those lists and styling them CSS wise -- it would be faster than debugging some of these issues -- since it looks like it some html or css spec is intefering. Ironically, you don't have any issues in Safari, Opera, or Mac IE -- they show it the absolute same as IE. It's firefox that is thrown off.

Edit: in you Link-gray classes, have you attempted to define a width for the elements yet? Your height is at 16px, conflicting with 20 in your HTML for the td height -- but that shouldn't be a problem. The problem might be a needed width:

.Link-Grey {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #666666;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
display: block;
}
.Link-Grey a {
text-decoration: none;
color: #333333;
display: block;
height: 16px;
padding-top: 1px;
padding-bottom: 1px;
margin-bottom: 0px;
margin-top: 0px;
padding-right: 1px;
padding-left: 2px;
border-top-color: #666666;
border-top-style: solid;
border-top-width: 1px;
}
.Link-Grey a:hover {
color: #1F77A5;
background-color: #CCCCCC;
}


turn into:

.Link-Grey {
font: bold 10px Arial, Helvetica, sans-serif;
color: #666666;
text-align: center;
margin: 0px;
}
.Link-Grey a {
text-decoration: none;
color: #333;
display: block;
height: 20px;
width: 100px;
padding: 1px 1px 0px 2px;
margin: 0px;
border-top: 1px solid #666;
}
.Link-Grey a:hover {
color: #1F77A5;
background-color: #CCCCCC;
}

I shorthanded it for you -- if you find that this does not work, apply the width height to .Link-Gray, not .Link-Grey a.

[jreitz]

thanks! adding the width to the first CSS statement (without the a) worked well. I know theres alot of non-standard and superfluos stuff in there, but theres not time for a true re-write. anyway, thanks for pointing that one out.

Small world eh? I grew up in roselle, just south of schaumburg.

-JAR