PDA

View Full Version : cross-browser compatability problems.


-fedexer-
03-22-2008, 07:07 PM
Hey guys,

Ok my problem i'm having is that the site looks like i want it in IE, but when viewed in FF the whole thing goes wrong, it is almost as if a div ends too soon. I have supplied the source, and the site hosted on a webhost, i would be greatful if someone could take a look at it in both IE and FF to see what i am having a problem with, best way to explain it i think. Anyway any solutions will be greatly appreciated.

Site: http://ggl.elementfx.com/preview/register.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Registration</title>
<link href="styleSheet.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>
<body>
<div id="outside" class="outside">
<a name="top"></a>
<div id="inside" class="inside">
<div id="header" class="head">b</div>

<div id="nav" class="nav_bar">
<table width="100%" height="32px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="index.php">Index</a></td>
<td align="center"><a href="register.php">Register</a></td>
<td align="center">Server List</td>
<td align="center">Top 10 Servers</td>
<td align="center">User Server CP</td>
<td align="center">Login</td>
</tr>
</table>
</div>
<div id="left" class="left"></div>
<div id="content_holder" class="content_holder">
<div id="main_content" class="main_content">
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="100%">Registration only takes a few minutes, after which you will be able to add your server to the server listings, this also enables you to edit your server information at anytime.<br />
Please note it is wise to give the correct information, as this will be used to identify you on the website.</td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="10">
<tr class="formWarningsHide">
<td colspan="3"><div align="center" class="formWarnings"></div></td>
</tr>
<tr>
<td width="20"></td>
<td>

<form action="" method="post" name="regForm" id="regForm">

<table border="0" align="center" cellpadding="10" cellspacing="0" class="regTable" id="regTable">
<tr>
<td width="230">Username (15 max length)</td>
<td width="240"><input name="userName" type="text" size="30px" maxlength="15" /></td>
<td width="30" class="bullet">*</td>
</tr>
<tr>
<td>Password (15 max length)</td>
<td><input name="userPass" type="password" size="30px" maxlength="15" /></td>
<td class="bullet">*</td>
</tr>
<tr>
<td>Re-type Password</td>
<td><input name="userPass2" type="password" size="30px" maxlength="15" /></td>
<td class="bullet">*</td>
</tr>
<tr>
<td>Email Address</td>
<td><input name="userEmail" type="text" size="40px" maxlength="100" /></td>
<td class="bullet">*</td>
</tr>
<tr>
<td>RaGEZONE Username</td>
<td><input name="userNameRZ" type="text" size="30px" maxlength="30" /></td>
<td class="bullet">* </td>
</tr>
<tr>
<td>&nbsp;</td>
<td></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="3"><div align="center">Click 'Register' when you are certain the information you have entered is correct.</div></td>
</tr>
<tr>
<td colspan="3"><div align="center">

<input type="submit" width="30px" name="register" id="register" value="Register" />
</div></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>

</form>



</td>
<td width="20"></td>
</tr>
</table>
</div>
</div>
<div id="right" class="right"></div>
<div id="footer" class="footer">
<table align="right" height="38px" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="680px" align="left"></td>
<td valign="middle">Contact Admin -</td>
<td valign="middle">Submit A Server -</td>
<td valign="middle"><a href="#top">Top</a></td>
</tr>
</table>
</div>
<div id="bot" class="bottom"><table width="100%" height="35px" border="0" cellspacing="0" cellpadding="3"><tr><td valign="bottom" align="center"><a href="http://forum.ragezone.com/members/-fedexer-/" target="_blank">A -fedexer- project for use by RaGEZONE Runescape Section</a></td></tr></table></div>
</div>
</div>
</body>
</html>



CSS:
@charset "utf-8";
/* CSS Document
/* Author: -fedexer-
/* Use: RS server status checker site styling */
body{
background-color:#40587B;
background-image:url(images/pagebg.gif);
background-position:top left;
background-repeat:repeat-x;
color: #283A5E;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.outside{
background-color:#FFFFFF;
margin-right:auto;
margin-left:auto;
padding:2px;
width:903px;
height:100%;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
.inside{
width:900px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
height:100%;
}
.nav_bar{
background-image:url(images/nav.gif);
background-repeat:repeat-x;
height:32px;
width:100%;
color: #283A5E;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.nav_bar a:link, .nav_bar_alink
{
color: #283A5E;
text-decoration: none;
}
.nav_bar a:visited, .nav_bar_avisited
{
color: #283A5E;
text-decoration: none;
}
.nav_bar a:hover, .nav_bar a:active, .nav_bar_ahover
{
color: #283A5E;
text-decoration: underline;
}
.content_holder{
float:left;
width:820px;
}
.quote{
font-style:italic;
}

.left{
float:left;
height:100%;
width:40px;
}
.right{
float:right;
height:100%;
width:40px;
}
.head{
width:900px;
height:80px;
margin-bottom:5px;
}
.bullet{
color:#FF0000;
font-style:oblique;
}
/*.regTable{
background-color:#E1E1E1;
border:dashed, medium, #000000;
}*/
#regTable{
background-color:#E1E1E1;
border:thin;
border:dashed;
border:#9FE1A9;
}
.formWarningsHide{
display:none;
}
.formWarnings{
height:20px;
background-color:#FFFFFF;
color:#FF0000;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.footer{
margin-top:20px;
float:left;
background-image:url(images/footer_links_bg.gif);
background-repeat:repeat-x;
width:100%;
height:38px;
color: #8297C8;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.footer a:link
{
color: #FFFFFF;
text-decoration: none;
}
.footer a:visited
{
color: #FFFFFF;
text-decoration: none;
}
.footer a:hover, .vb_footer a:active
{
color: #FFFFFF;
text-decoration: underline;
}
.bottom{
float:left;
background-image:url(images/copyright_bg.gif);
background-repeat:repeat-x;
width:100%;
height:35px;
color: #8297C8;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.bottom a:link{
color: #8297C8;
text-decoration: none;
}
.bottom a:hover, .vb_footer a:active{
color: 498DD1;
text-decoration: underline;
}
.bottom a:visited
{
color: #498DD1;
text-decoration: none;
}
.main_content{
padding-top:20px;
float:left;
width:100%;
}

domedia
03-22-2008, 09:43 PM
Hi Fedexer, run your site through a validation program. There's several errors in your HTML, so right now it's your code that's wrong, not a browser compatibility issue (yet) :)

Example: HTML attributes cannot have 'px' in them to determine numeral value. This is something we do in CSS not HTML.

http://validator.w3.org/

-fedexer-
03-22-2008, 10:06 PM
Ok, i have run through the pages and removed all the 'px' from the HTML tags, although this still has not solved the display problem, also note that validation site informs me that their is no "height" syntax in the table tag, what would i do here? Also im not sure that is what is causing the major problem.. but it may be.

Also ran a validation check in DW, it seems to be saying there is one error in the CSS somewhere.

Made changes to the live site.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Registration</title>
<link href="styleSheet.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>
<body>
<div id="outside" class="outside">
<a name="top"></a>
<div id="inside" class="inside">
<div id="header" class="head">b</div>

<div id="nav" class="nav_bar">
<table width="100%" height="32" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="index.php">Index</a></td>
<td align="center"><a href="register.php">Register</a></td>
<td align="center">Server List</td>
<td align="center">Top 10 Servers</td>
<td align="center">User Server CP</td>
<td align="center">Login</td>
</tr>
</table>
</div>
<div id="left" class="left"></div>
<div id="content_holder" class="content_holder">
<div id="main_content" class="main_content">
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="100%">Registration only takes a few minutes, after which you will be able to add your server to the server listings, this also enables you to edit your server information at anytime.<br />
Please note it is wise to give the correct information, as this will be used to identify you on the website.</td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="10">
<tr class="formWarningsHide">
<td colspan="3"><div align="center" class="formWarnings"></div></td>
</tr>
<tr>
<td width="20"></td>
<td>

<form action="" method="post" name="regForm" id="regForm">

<table border="0" align="center" cellpadding="10" cellspacing="0" class="regTable" id="regTable">
<tr>
<td width="230">Username (3 - 15 length)</td>
<td width="240"><input name="userName" type="text" size="30" maxlength="15" /></td>
<td width="30" class="bullet">*</td>
</tr>
<tr>
<td>Password (3 - 15 length)</td>
<td><input name="userPass" type="password" size="30" maxlength="15" /></td>
<td class="bullet">*</td>
</tr>
<tr>
<td>Re-type Password</td>
<td><input name="userPass2" type="password" size="30" maxlength="15" /></td>
<td class="bullet">*</td>
</tr>
<tr>
<td>Email Address</td>
<td><input name="userEmail" type="text" size="40" maxlength="100" /></td>
<td class="bullet">*</td>
</tr>
<tr>
<td>RaGEZONE Username</td>
<td><input name="userNameRZ" type="text" size="30" maxlength="30" /></td>
<td class="bullet">* </td>
</tr>
<tr>
<td>&nbsp;</td>
<td></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="3"><div align="center">Click 'Register' when you are certain the information you have entered is correct.</div></td>
</tr>
<tr>
<td colspan="3"><div align="center">

<input type="submit" size="30" name="register" id="register" value="Register" />
</div></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>

</form>



</td>
<td width="20"></td>
</tr>
</table>
</div>
</div>
<div id="right" class="right"></div>
<div id="footer" class="footer">
<table align="right" height="38" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="680" align="left"></td>
<td valign="middle">Contact Admin -</td>
<td valign="middle">Submit A Server -</td>
<td valign="middle"><a href="#top">Top</a></td>
</tr>
</table>
</div>
<div id="bot" class="bottom"><table width="100%" height="35" border="0" cellspacing="0" cellpadding="3"><tr><td valign="bottom" align="center"><a href="http://forum.ragezone.com/members/-fedexer-/" target="_blank">A -fedexer- project for use by RaGEZONE Runescape Section</a></td></tr></table></div>
</div>
</div>
</body>
</html>

domedia
03-22-2008, 10:24 PM
Fix the error. Only way you can find out. ;-)

Here's the validation service for CSS:
http://jigsaw.w3.org/css-validator/

-fedexer-
03-22-2008, 10:27 PM
Edit: Ran the css through the validator, and fixed the color error, forgot the # infront of the hex color.

Still the page is not displaying properly, it looks like the outside div's have just closed after the nav bar... doesn't make any sense to me...

Any ideas?

Updated CSS:

@charset "utf-8";
/* CSS Document
/* Author: -fedexer-
/* Use: RS server status checker site styling */
body{
background-color:#40587B;
background-image:url(images/pagebg.gif);
background-position:top left;
background-repeat:repeat-x;
color: #283A5E;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.outside{
background-color:#FFFFFF;
margin-right:auto;
margin-left:auto;
padding:2px;
width:903px;
height:100%;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
.inside{
width:900px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
height:100%;
}
.nav_bar{
background-image:url(images/nav.gif);
background-repeat:repeat-x;
height:32px;
width:100%;
color: #283A5E;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.nav_bar a:link, .nav_bar_alink
{
color: #283A5E;
text-decoration: none;
}
.nav_bar a:visited, .nav_bar_avisited
{
color: #283A5E;
text-decoration: none;
}
.nav_bar a:hover, .nav_bar a:active, .nav_bar_ahover
{
color: #283A5E;
text-decoration: underline;
}
.content_holder{
float:left;
width:820px;
}
.quote{
font-style:italic;
}

.left{
float:left;
height:100%;
width:40px;
}
.right{
float:right;
height:100%;
width:40px;
}
.head{
width:900px;
height:80px;
margin-bottom:5px;
}
.bullet{
color:#FF0000;
font-style:oblique;
}
/*.regTable{
background-color:#E1E1E1;
border:dashed, medium, #000000;
}*/
#regTable{
background-color:#E1E1E1;
border:thin;
border:dashed;
border:#9FE1A9;
}
.formWarningsHide{
display:none;
}
.formWarnings{
height:20px;
background-color:#FFFFFF;
color:#FF0000;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.footer{
margin-top:20px;
float:left;
background-image:url(images/footer_links_bg.gif);
background-repeat:repeat-x;
width:100%;
height:38px;
color: #8297C8;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.footer a:link
{
color: #FFFFFF;
text-decoration: none;
}
.footer a:visited
{
color: #FFFFFF;
text-decoration: none;
}
.footer a:hover, .vb_footer a:active
{
color: #FFFFFF;
text-decoration: underline;
}
.bottom{
float:left;
background-image:url(images/copyright_bg.gif);
background-repeat:repeat-x;
width:100%;
height:35px;
color: #8297C8;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.bottom a:link{
color: #8297C8;
text-decoration: none;
}
.bottom a:hover, .vb_footer a:active{
color: #498DD1;
text-decoration: underline;
}
.bottom a:visited
{
color: #498DD1;
text-decoration: none;
}
.main_content{
padding-top:20px;
float:left;
width:100%;
}

-fedexer-
03-22-2008, 11:38 PM
Sorry for this, anyway i d/l a FF HTML validator addon i found in one of the other threads, and it informed me that height wasnt a variable in the table tag. I have changed those with CSS.

Most up-to-date code:

Site: http://ggl.elementfx.com/preview/index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Registration</title>
<link href="styleSheet.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>
<body>
<div id="outside" class="outside">
<a name="top"></a>
<div id="inside" class="inside">
<div id="header" class="head">b</div>

<div id="nav" class="nav_bar">
<table width="100%" class="nav_bar_table" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><a href="index.php">Index</a></td>
<td align="center"><a href="register.php">Register</a></td>
<td align="center">Server List</td>
<td align="center">Top 10 Servers</td>
<td align="center">User Server CP</td>
<td align="center">Login</td>
</tr>
</table>
</div>
<div id="left" class="left"></div>
<div id="content_holder" class="content_holder">
<div id="main_content" class="main_content">
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="100%">Registration only takes a few minutes, after which you will be able to add your server to the server listings, this also enables you to edit your server information at anytime.<br />
Please note it is wise to give the correct information, as this will be used to identify you on the website.</td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="10">
<tr class="formWarningsHide">
<td colspan="3"><div align="center" class="formWarnings"></div></td>
</tr>
<tr>
<td width="20"></td>
<td>

<form action="" method="post" name="regForm" id="regForm">

<table border="0" align="center" cellpadding="10" cellspacing="0" class="regTable" id="regTable">
<tr>
<td width="230">Username (3 - 15 length)</td>
<td width="240"><input name="userName" type="text" size="30" maxlength="15" /></td>
<td width="30" class="bullet">*</td>
</tr>
<tr>
<td>Password (3 - 15 length)</td>
<td><input name="userPass" type="password" size="30" maxlength="15" /></td>
<td class="bullet">*</td>
</tr>
<tr>
<td>Re-type Password</td>
<td><input name="userPass2" type="password" size="30" maxlength="15" /></td>
<td class="bullet">*</td>
</tr>
<tr>
<td>Email Address</td>
<td><input name="userEmail" type="text" size="40" maxlength="100" /></td>
<td class="bullet">*</td>
</tr>
<tr>
<td>RaGEZONE Username</td>
<td><input name="userNameRZ" type="text" size="30" maxlength="30" /></td>
<td class="bullet">* </td>
</tr>
<tr>
<td>&nbsp;</td>
<td></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="3"><div align="center">Click 'Register' when you are certain the information you have entered is correct.</div></td>
</tr>
<tr>
<td colspan="3"><div align="center">

<input type="submit" size="30" name="register" id="register" value="Register" />
</div></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>

</form>
</td>
<td width="20"></td>
</tr>
</table>
</div>
</div>
<div id="right" class="right"></div>
<div id="footer" class="footer">
<table align="right" class="footer_table" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="680" align="left"></td>
<td valign="middle">Contact Admin -</td>
<td valign="middle">Submit A Server -</td>
<td valign="middle"><a href="#top">Top</a></td>
</tr>
</table>
</div>
<div id="bot" class="bottom"><table width="100%" class="bottom_table" border="0" cellspacing="0" cellpadding="3"><tr><td valign="bottom" align="center"><a href="http://forum.ragezone.com/members/-fedexer-/" target="_blank">A -fedexer- project for use by RaGEZONE Runescape Section</a></td></tr></table></div>
</div>
</div>
</body>
</html>


CSS:

@charset "utf-8";
/* CSS Document
/* Author: -fedexer-
/* Use: RS server status checker site styling */
body{
background-color:#40587B;
background-image:url(images/pagebg.gif);
background-position:top left;
background-repeat:repeat-x;
color: #283A5E;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.outside{
background-color:#FFFFFF;
margin-right:auto;
margin-left:auto;
padding:2px;
top:0px;
width:903px;
height:100%;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
.inside{
width:900px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
height:100%;
}
.nav_bar_table{
height:32px;
}
.nav_bar{
background-image:url(images/nav.gif);
background-repeat:repeat-x;
height:32px;
width:100%;
color: #283A5E;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.nav_bar a:link, .nav_bar_alink
{
color: #283A5E;
text-decoration: none;
}
.nav_bar a:visited, .nav_bar_avisited
{
color: #283A5E;
text-decoration: none;
}
.nav_bar a:hover, .nav_bar a:active, .nav_bar_ahover
{
color: #283A5E;
text-decoration: underline;
}
.content_holder{
float:left;
width:820px;
}
.quote{
font-style:italic;
}

.left{
float:left;
height:100%;
width:40px;
}
.right{
float:right;
height:100%;
width:40px;
}
.head{
width:900px;
height:80px;
margin-bottom:5px;
}
.bullet{
color:#FF0000;
font-style:oblique;
}
/*.regTable{
background-color:#E1E1E1;
border:dashed, medium, #000000;
}*/
#regTable{
background-color:#E1E1E1;
border:thin;
border:dashed;
border:#9FE1A9;
}
.formWarningsHide{
display:none;
}
.formWarnings{
height:20px;
background-color:#FFFFFF;
color:#FF0000;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.footer_table{
height:38px;
}
.footer{
margin-top:20px;
float:left;
background-image:url(images/footer_links_bg.gif);
background-repeat:repeat-x;
width:100%;
height:38px;
color: #8297C8;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.footer a:link
{
color: #FFFFFF;
text-decoration: none;
}
.footer a:visited
{
color: #FFFFFF;
text-decoration: none;
}
.footer a:hover, .vb_footer a:active
{
color: #FFFFFF;
text-decoration: underline;
}
.bottom_table{
height:35px;
}
.bottom{
float:left;
background-image:url(images/copyright_bg.gif);
background-repeat:repeat-x;
width:100%;
height:35px;
color: #8297C8;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.bottom a:link{
color: #8297C8;
text-decoration: none;
}
.bottom a:hover, .vb_footer a:active{
color: #498DD1;
text-decoration: underline;
}
.bottom a:visited
{
color: #498DD1;
text-decoration: none;
}
.main_content{
padding-top:20px;
float:left;
width:100%;
}

domedia
03-22-2008, 11:41 PM
You're floating two of your wrappers, not sure why.
Just remove the float and you should be good.

.content_holder {
width:820px;
}

.main_content {
padding-top:20px;
width:100%;
}

-fedexer-
03-22-2008, 11:46 PM
Nice , that did the trick Dom, only problem is the left hand side spacer does not seem to have an effect on the main content now, it just hugs the left hand side of the page, without being spaced away from it (the main idea of the left/right spacers. Any ideas?

Edit: Also the CSS:#regTable{
background-color:#E1E1E1;
border:thin;
border:dashed;
border:#9FE1A9;
}

The borders take no effect in FF, is there a work around?

domedia
03-22-2008, 11:58 PM
Edit: Also the CSS:#regTable{
background-color:#E1E1E1;
border:thin;
border:dashed;
border:#9FE1A9;
}

The borders take no effect in FF, is there a work around?
You're defining the same shorthand property 3 times, border. So it will only read the last one. Use a shorthand instead:

border: thin dashed #9fe1a9

or write them all out
border-color: #9fe1a9 etc

-fedexer-
03-23-2008, 12:08 AM
Thanks dom ;) You saved me from a tight spot , good to know i can count on professionals to help me out :D

mangofreak
03-23-2008, 02:15 AM
Tested in IE 7 and compared on FF 2.0.0.12 No problem.