icon Get the most out of Surmunity, read our tips here! Need an interesting blog to read? You've got to read the Surpass Blog! | Welcome! Please register to access all of our features.

» Surpass Web Hosting Forums » Discussions » Coding and Programming » Firefox Issues CSS Tables and Linking img

Reply
 
LinkBack Thread Tools Search this Thread Rate Thread
Old October 26th, 2006, 8:51 PM   #1 (permalink)
DemonicAngel
Super #1
 
twirp's Avatar
 
Joined in Aug 2004
Lives in Wherever The World Takes Me
Hosted on Pass76
1,826 posts
Gave thanks: 26
Thanked 35 times
Firefox Issues CSS Tables and Linking img
For some reason, in firefox, the tables keep breaking when I link one of the images in the table.
http://paruparo.org/dgraycomic.html

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!-- 
body{
	font-family: "Comic Sans MS";
	color: #3E666E;
	font-size: 12px;
	background-color: #FFFFFF;
}

.centered {
	margin: 0 auto 0 auto;
}

#layout td img{
	border-left: 0px dotted #FFFFFF;
	border-right: 0px dotted #FFFFFF;
	border-top: 0px dotted #FFFFFF;
	border-bottom: 0px dotted #FFFFFF;
	text-decoration: none;
	background-color: #FFFFFF;
}

#layout, #layout td{
	font-family: "Comic Sans MS";
	color: #3E666E;
	font-size: 12px;
	background-color: #FFFFFF;
	border-left: 0px dotted #FFFFFF;
	border-right: 0px dotted #FFFFFF;
	border-top: 0px dotted #FFFFFF;
	border-bottom: 0px dotted #FFFFFF;
}

.header{
	font-family: "Comic Sans MS";
	color: #3E666E;
	font-size: 14px;
	font-weight: bold;
}

a:link, #layout a:link{
	font-family: "Comic Sans MS";
	color: #3E666E;
	font-size: 10px;
	text-decoration: none;
	border-bottom: 1px dotted #3E666E;
}

a:visited, #layout a:visited{
	font-family: "Comic Sans MS";
	color: #3E666E;
	font-size: 10px;
	text-decoration: none;
	border-bottom: 1px dotted #3E666E;
}

a:hover, #layout a:hover{
	font-family: "Comic Sans MS";
	color: #3E666E;
	font-size: 10px;
	text-decoration: none;
	border-bottom: 1px dotted #3E666E;
	border-top: 1px dotted #3E666E;
	background-color: #EAF0F0;
}

img {
	border-left: 0px dotted #FFFFFF;
	border-right: 0px dotted #FFFFFF;
	border-top: 0px dotted #FFFFFF;
	border-bottom: 0px dotted #FFFFFF;
	text-decoration: none;
	background-color: #FFFFFF;
}

a img {
	border-left: 0px dotted #FFFFFF;
	border-right: 0px dotted #FFFFFF;
	border-top: 0px dotted #FFFFFF;
	border-bottom: 0px dotted #FFFFFF;
	text-decoration: none;
	background-color: #FFFFFF;
}
a:link img {
	border-left: 0px dotted #FFFFFF;
	border-right: 0px dotted #FFFFFF;
	border-top: 0px dotted #FFFFFF;
	border-bottom: 0px dotted #FFFFFF;
	text-decoration: none;
	background-color: #FFFFFF;
}
a:hover img {
	border-left: 0px dotted #FFFFFF;
	border-right: 0px dotted #FFFFFF;
	border-top: 0px dotted #FFFFFF;
	border-bottom: 0px dotted #FFFFFF;
	text-decoration: none;
	background-color: #FFFFFF;
}
a:visited img {
	border-left: 0px dotted #FFFFFF;
	border-right: 0px dotted #FFFFFF;
	border-top: 0px dotted #FFFFFF;
	border-bottom: 0px dotted #FFFFFF;
	text-decoration: none;
	background-color: #FFFFFF;
}
-->
</style>
<title>ParuCoding</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<!-- ImageReady Slices (layout.psd) -->
<table id="layout" class="centered" width="601" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="6" rowspan="2">
			<img src="http://paruparo.org/images/dgraycomic_01.jpg" width="442" height="58" alt=""></td>
		<td colspan="2">
			<img src="http://paruparo.org/images/dgraycomic_02.jpg" width="158" height="29" alt=""></td>
		<td>
			<img src="http://paruparo.org/images/spacer.gif" width="1" height="29" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="http://paruparo.org/images/dgraycomic_03.jpg" width="1" height="98" alt=""></td>
		<td rowspan="2">
			<a href="/index.php"><img src="http://paruparo.org/images/dgraycomic_04.jpg" width="157" height="45" alt=""></a></td>
		<td>
			<img src="http://paruparo.org/images/spacer.gif" width="1" height="29" alt=""></td>
	</tr>
	<tr>
		<td rowspan="14">
			<img src="http://paruparo.org/images/dgraycomic_05.jpg" width="23" height="442" alt=""></td>
		<td colspan="5" rowspan="8" width="419" height="329" style="background-image: url(http://paruparo.org/images/dgraycomic_06.jpg)">
			<!--<img src="http://paruparo.org/images/dgraycomic_06.jpg" width="419" height="329" alt="">-->
			
			<div style="width: 419px; height: 329px; overflow: auto;">
			Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
			</div>
			
		</td>
		<td>
			<img src="http://paruparo.org/images/spacer.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="http://paruparo.org/images/dgraycomic_07.jpg" width="157" height="12" alt=""></td>
		<td>
			<img src="http://paruparo.org/images/spacer.gif" width="1" height="12" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="/about.php"><img src="http://paruparo.org/images/dgraycomic_08.jpg" width="157" height="41" alt=""></a></td>
		<td>
			<img src="http://paruparo.org/images/spacer.gif" width="1" height="41" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="http://paruparo.org/images/dgraycomic_09.jpg" width="158" height="7" alt=""></td>
		<td>
			<img src="http://paruparo.org/images/spacer.gif" width="1" height="7" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<a href="/staff.php"><img src="http://paruparo.org/images/dgraycomic_10.jpg" width="158" height="37" alt=""></a></td>
		<td>
			<img src="http://paruparo.org/images/spacer.gif" width="1" height="37" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="http://paruparo.org/images/dgraycomic_11.jpg" width="158" height="129" alt=""></td>
		<td>
			<img src="http://paruparo.org/images/spacer.gif" width="1" height="129" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="http://paruparo.org/images/dgraycomic_12.jpg" width="158" height="58" alt=""></td>
		<td>
			<img src="http://paruparo.org/images/spacer.gif" width="1" height="58" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="http://paruparo.org/images/dgraycomic_13.jpg" width="158" height="29" alt=""></td>
		<td>
			<img src="http://paruparo.org/images/spacer.gif" width="1" height="29" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="http://paruparo.org/images/dgraycomic_14.jpg" width="260" height="20" alt=""></td>
		<td rowspan="6">
			<img src="http://paruparo.org/images/dgraycomic_15.jpg" width="76" height="113" alt=""></td>
		<td rowspan="6">
			<img src="http://paruparo.org/images/dgraycomic_16.jpg" width="83" height="113" alt=""></td>
		<td colspan="2" rowspan="6">
			<img src="http://paruparo.org/images/dgraycomic_17.jpg" width="158" height="113" alt=""></td>
		<td>
			<img src="http://paruparo.org/images/spacer.gif" width="1" height="20" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="http://paruparo.org/images/dgraycomic_18.jpg" width="114" height="21" alt=""></td>
		<td colspan="2">
			<a href="http://forums.paruparo.org"><img src="http://paruparo.org/images/dgraycomic_19.jpg" width="146" height="21" alt=""></a></td>
		<td>
			<img src="http://paruparo.org/images/spacer.gif" width="1" height="21" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<a href="/projects.php"><img src="http://paruparo.org/images/dgraycomic_20.jpg" width="114" height="51" alt=""></a></td>
		<td colspan="2">
			<img src="http://paruparo.org/images/dgraycomic_21.jpg" width="146" height="1" alt=""></td>
		<td>
			<img src="http://paruparo.org/images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="http://paruparo.org/images/dgraycomic_22.jpg" width="146" height="29" alt=""></td>
		<td>
			<img src="http://paruparo.org/images/spacer.gif" width="1" height="29" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<a href="/map.php"><img src="http://paruparo.org/images/dgraycomic_23.jpg" width="107" height="42" alt=""></a></td>
		<td rowspan="2">
			<img src="http://paruparo.org/images/dgraycomic_24.jpg" width="39" height="42" alt=""></td>
		<td>
			<img src="http://paruparo.org/images/spacer.gif" width="1" height="21" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="http://paruparo.org/images/dgraycomic_25.jpg" width="114" height="21" alt=""></td>
		<td>
			<img src="http://paruparo.org/images/spacer.gif" width="1" height="21" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
If anyone knows how to fix the issue, please share
__________________
You wear Vans so high school kids will think that you can skate. He wears Vans because he can skate. TwiRp wears Vans because they were on sale. Pass76 wants Vans.
twirp is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old October 27th, 2006, 12:56 PM   #2 (permalink)
H
after g, before i
Resident.
 
H's Avatar
 
Joined in Jul 2004
Lives in N,BC,CA
8,058 posts
Gave thanks: 48
Thanked 129 times
I see this on occasion. It's the problem with using images for links and trying to confine them... The fix is simple.

In your CSS you have the image selector (img { ..})... Just add display: block;

Code:
img {
	border-left: 0px dotted #FFFFFF;
	border-right: 0px dotted #FFFFFF;
	border-top: 0px dotted #FFFFFF;
	border-bottom: 0px dotted #FFFFFF;
	text-decoration: none;
	background-color: #FFFFFF;
	display: block;
}
That should resolve it.
H is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
This user thanks H for this great post!
Kayla (October 27th, 2006)
Reply

« MySQL/PHP Help | The New CPANEL Evolution! »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On