Html/css error! - Webmaster Forum - Web Design, Programming and SEO forums

11-22-2006, 05:12 PM

.Cyanide

Status: Senior Member
Join date: Mar 2006
Location: Stockholm,Sweden
Expertise: Web Design, Coding
Software: Phoshop CS3

Posts: 757

iTrader: 4 / 100%

.Cyanide is an unknown quantity at this point

Html/css error!

Hi

I'm currently trying to code my portfolio (with all the knowledgde i have in html, lol) and its seems as though i just cant get rid of this bug on my site:

FF-screenshot: http://www.sparkload.com/uploads/211...iteproblem.jpg
IE-screenshot: http://www.sparkload.com/uploads/dd0...teproblem2.jpg

Here's the code:

Code:

<html>
<head>
<title>home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

/*Color 1 Links */
a:link.color1  {color : #ffffff;text-decoration :none;}
a:visited.color1  {color : #ffffff;text-decoration :none; }
a:active.color1  {color : #ffffff;text-decoration :none; }
a:hover.color1  {color : #ffffff;text-decoration :underline; }

/*Color 2 Links */
a:link.color2  {color : #6b6659;text-decoration :none;}
a:visited.color2  {color : #6b6659;text-decoration :none;}
a:active.color2  {color : #6b6659;text-decoration :none;}
a:hover.color2  {color : #d8cbaa;text-decoration :none;}

</style>
 <script LANGUAGE="JavaScript">
<!--
function getAppVersion() {
appname= navigator.appName;
appversion = navigator.appVersion;
majorver = appversion.substring(0, 1);
if ( (appname == "Netscape") && ( majorver >= 3 ) ) return 1;
if ( (appname == "Microsoft Internet Explorer") && (majorver >= 4) ) return 1;
return 0;
}
function swtch(num, imgname) {
if (getAppVersion()) {
document[imgname].src = img[num].src;
}
}
//-->
</script>
<script LANGUAGE="JavaScript1.1">
<!--
imgsrc = new Array();
imgsrc[0] = "images/home.jpg";
imgsrc[1] = "images/home_down.jpg";
imgsrc[2] = "images/portfolio1.jpg";
imgsrc[3] = "images/portfolio1_down.jpg";
imgsrc[4] = "images/services1.jpg";
imgsrc[5] = "images/services1_down.jpg";
imgsrc[6] = "images/about.jpg";
imgsrc[7] = "images/about_down.jpg";
imgsrc[8] = "images/contact.jpg";
imgsrc[9] = "images/contact_down.jpg";
if (getAppVersion()) {
img = new Array();
for (i = 0; i < imgsrc.length; i++) {
img[i] = new Image();
img[i].src = imgsrc[i];
}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (home.psd) -->
<table id="Table_01" width="1024" height="769" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2">
			<img src="images/index_01.jpg" width="257" height="36" alt=""></td>
		<td colspan="2">
			<img src="images/index_02.jpg" width="767" height="36" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/index_03.jpg" width="257" height="38" alt=""></td>
		<td background="images/index_04.jpg" width="661" height="38">
			<a href="#" onMouseOver="swtch('1','bild1')"onMouseOut="swtch('0','bild1')">
			<img name="bild1" src="images/home.jpg" border="0" width="83" height="100%"></a>
			
			<a href="index.html" onMouseOver="swtch('3','bild2')"onMouseOut="swtch('2','bild2')">
			<img name="bild2" src="images/portfolio1.jpg" border="0" width="83" height="100%"></a>
			
			<a href="portfolio.html" onMouseOver="swtch('5','bild4')"onMouseOut="swtch('4','bild4')">
			<img name="bild4" src="images/services1.jpg" border="0" width="83" height="100%"></a>
			
			<a href="about.html" onMouseOver="swtch('7','bild6')"onMouseOut="swtch('6','bild6')">
			<img name="bild6" src="images/about.jpg" border="0" width="98" height="100%"></a>
			
			<a href="contact.html" onMouseOver="swtch('9','bild8')"onMouseOut="swtch('8','bild8')">
			<img name="bild8" src="images/contact.jpg" border="0" width="98" height="100%"></a>
			</td>
		<td>
			<img src="images/index_05.jpg" width="106" height="38" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/index_06.jpg" width="918" height="173" alt=""></td>
		<td>
			<img src="images/index_07.jpg" width="106" height="173" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index_08.jpg" width="201" height="521" alt=""></td>
		<td colspan="3">
			<img src="images/index_09.jpg" width="823" height="19" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/index_10.png" width="823" height="502" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="201" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="56" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="661" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="106" height="1" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Thanks in advance

11-23-2006, 10:08 AM

jdudek

Status: I'm new around here
Join date: Nov 2006
Location:
Expertise:
Software:

Posts: 2

iTrader: 0 / 0%

jdudek is on a distinguished road

I guess your problem is caused by Gecko's standards mode (Gecko is the rendering engine in Firefox), which renders space near images in a "proper" way, which is different than IE's. However, there is a special mode in Gecko called "almost standards". You can try to add following lines at the beginning of you file- it should enable the "almost standards" mode

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
			"http://www.w3.org/TR/html4/loose.dtd">

Or you may try to put something like this in your stylesheet (CSS):

Code:

img { vertical-align: bottom }

11-23-2006, 11:40 AM

sardoman

Status: Junior Member
Join date: Oct 2006
Location: A Mediterranean Island
Expertise:
Software:

Posts: 47

iTrader: 0 / 0%

sardoman is on a distinguished road

jdudek? have you taken to web design seeing that you're not getting any time on the football field at Liverpool!!!

11-23-2006, 02:18 PM

jdudek

Status: I'm new around here
Join date: Nov 2006
Location:
Expertise:
Software:

Posts: 2

iTrader: 0 / 0%

jdudek is on a distinguished road

Yes. Maybe this time things will go better ;-)

(surname "Dudek" is quite popular in Poland).