Google Chrome Differentiation

HTML & CSS
1 
#pm_inbox td[colspan="5"] {
background: url(http://209.85.62.24/28094/5/0/p318997/CatFootStripe.png) no-repeat center;
font-size: 1px;
height: 8px;
padding: 0;
}

How it’s suppose to look, Firefox: http://209.85.62.24/28094/5/0/f592235/firefox.gif

Google Chrome: http://209.85.62.24/28094/5/0/f592234/chrome.gif

What causes this?

2

Ok, well looking at your table, the colspan=6 crap doesn’t belong in the table, the rowspan=3 stuff probably also doesn’t belong in there especially since that doesn’t even seem like a header to any of the rows. The button tag is unreliable cross browser and probably shouldn’t even be being used, etc, etc, etc…

… and that’s before we even TALK about cellspacing, classes that probably shouldn’t even be presents on the table, inlined style, etc, etc, etc…

Is that all going to be one big form? (doesn’t look like it…) if not, you should be having all your form tags in there ahead of time too.

Going through to clean it up, I think I may have found PART of your issue, but not sure. You’ve got a section set as colspan=“6” when there are only five columns at that point… yeah, you are trying to ‘cheat’ using colspan to target that line when that could be causing all sorts of headaches.

Is that divider only supposed to show up before c_foot? If so, why not just pad the top of c_foot and put it there?

In any case, only one small subsection of that bit of code is actually tabular data - so only that subsection should be in a table in the first place.

OH WAIT, I see it for certain – duh. It has to stretch to fit the height of the rowspan next to it. Tables are fully dynamic and you can NEVER trust height to work consistently cross browser next to a rowspan - which the fix is what I said above, don’t waste table elements on 90% of the stuff there, reserve the table for the actual tabular data.

I’d probably swap the markup down to something like this:


<div class="pm_inbox">
	
	<form action="#" class="pm_searchMessages">
		<fieldset>
			<label for="searchMessagesSender">Search Messages By Sender:</label>
			<input type="text" name="sender" id="searchMessagesSender" /> 
			<input type="submit" value="Search" />
		</fieldset>
	</form>
	
	<div class="pm_selectMessages">
		Select Messages:
		<a onclick="return toggleAll(this,'msg_boxes','bx_read');" href="#">Read Messages</a> &middot;
		<a onclick="return toggleAll(this,'msg_boxes','bx_replied');" href="#">Replied Messages</a>
	</div>
	
	<ul class="pm_folderlist">
		<li><a href="/msg/?folder=-1">Inbox</a> &middot; 0</li>
		<li><a href="/msg/?folder=-2">Archive</a> &middot; 0</li>
		<li><a href="/msg/?folder=-3">Drafts</a> &middot; 0</li>
	</ul>
	
	<div class="pm_folderIndent">
		<table>
			<thead>	
				<tr>
					<th class="pm_subject"><a href="/msg/?folder=-1&amp;sort=title&amp;pg=1">Title</a></th>
					<th class="pm_with"><a href="/msg/?folder=-1&amp;sort=name&amp;pg=1">Conversation with:</a></th>
					<th class="pm_replies">Replies</th>
					<th class="pm_datesent"><a href="/msg/?folder=-1&amp;sort=&amp;pg=1">Received</a></th>
					<th class="pm_select"><input type="checkbox" onclick="toggleAll(this,'msg_boxes')" id="selectall" name="selectall"></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="pm_subject">ASDFASDFASD</th>
					<td class="pm_with">Nimrod</th>
					<td class="pm_replies">1</th>
					<td class="pm_datesent">2</th>
					<td class="pm_select">
						<form action="#">
							<div>
								<input type="checkbox" name="selecthis" />
							</div>
						</form>
					</th>
				</tr><tr>
					<td class="footer" colspan="5">
						<form action="#">
							<fieldset>
								<legend><span>With Selected:</span></legend>
								<input value="1" name="read" type="submit" value="Mark as read" />
								<input value="1" name="unread" type="submit" value="Mark as unread" />
								<input value="1" name="del" type="submit" value="Archive" />
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	
<!-- .pm_inBox --></div>

pm_folderIndent is so you can margin-left it next to the float and still declare width:100% on the table.

… and as Felgall said, tranny is for supporting old/outdated/half-assed coding methodologies, not for building new websites.

3

The webpage is 100% valid, under the XHTML 1.0 transitional doctype.

I’m trying to reveal as little of the theme as possible so the surprise won’t be spoiled by on on-looker of the network it will be used on. Any who, here’s the basic structure of the table: http://planetnexus.net/dev/cory/preview.html

4

If it is a new design being created after 2004 then you really ought to be using a strict doctype.

The transitional doctype is for converting old pre-CSS layouts gradually from HTML 3.2 to use HTML 4 and CSS instead without having to redo the whole thing in one go. It allows you to transition your pre-1999 table based layouts to modern semantic HTML/CSS layouts.

5

We’d probably have to see a LOT more code than that little snippet to tell you anything meaningful, though the subselector (the [colspan=“5”]) part could be failing (not that it would work in IE in the first place making that undeployable code) you could be encountering a table-layout:auto limitation in chrome, or a dozen other possibilities.

I also would suspect that this is an element that shouldn’t even BE a TD, but I’d have to see the actual markup the CSS is being applied to in order to be certain.

See, CSS without the markup is gibberish - one small section of CSS means we can’t see if it’s an inheritance/specificity issue, if something is going wrong elsewhere like a validation issue (unclosed TD or TR preceding it for example), or if you entire method for building the content is flawed.