HTML Border Colour problem

Hamish

Hamish

Hamish

Soldato
Joined
14 Apr 2003
Posts
4,950
Location
Deepest Yorkshire
I'm making a website for my dad's bus and its going well, but there seems to be a problem with the borders, i'm doing it in tables as its too much of a faf to do all CSS stuff, it should look like this: with gold borders as it does in IE7
2es1.png


but in firefox it apprears like this:

1bc3.png


Here is the header HTML:
Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>RTL554</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="default.css"/>
</head>

<body>
<div align="center">
  <br/>
  <table width="745" border="1" cellspacing="0" cellpadding="0" bordercolor="#C1AC01">
    <tr> 
      <td colspan="7"><img src="top.png" width="747" height="200" /></td>
    </tr>
    <tr> 
	  <td><a href="home.php"><img src="buttons/home.png" width="105" height="35" title="Home" border="0" /></a></td>
      <td><a href="about.php"><img src="buttons/about.png" width="105" height="35" title="About" border="0" /></a></td>
	  <td><a href="history.php"><img src="buttons/history.png" width="105" height="35" title="History" border="0" /></a></td>
	  <td><a href="photos.php"><img src="buttons/photos.png" width="105" height="35" title="Photos" border="0" /></a></td>
	  <td><a href="restoration.php"><img src="buttons/restoration.png" width="105" height="35" title="Restoration" border="0" /></a></td>
	  <td><a href="links.php"><img src="buttons/links.png" width="105" height="35" title="Links" border="0" /></a></td>
	  <td><a href="contact.php"><img src="buttons/contact.png" width="105" height="35" title="Contact" border="0" /></a></td>
    </tr>
    <tr> 
      <td colspan="7" align="left" valign="top">
	  <table width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="left"><br/><!-- Body Start -->

And the CSS:
Code: 
body {
	margin: 0;
	font: 12px Trebuchet MS, verdana, helvetica, arial, sans-serif;
	background: #FFFFCC;
	color: #460207;
	text-align: center;
	line-height: 20px;
}

TABLE {
	border-color: #C1AC01;
	}


A:link, A:visited, A:active 
	{ color: #304C80; }
A:hover 
	{ color: #CA453F; }

h1 {
	color: #460207;
	font-size: 125%;
	font-family: Trebuchet MS, Verdana, sans-serif;
}

h2 {
	color: #460207;
	font-size: 110%;
	font-family: Trebuchet MS, Verdana, sans-serif;
}

Any ideas?
Hamish
 
Ahh thought it might have been an ie7 thing.

The ironic thing is that if you'd have "faffed" about in CSS, this wouldn't be an issue :o Can't really help though sorry, don't know much about css and tables myself.
 
Hamish said:
i'm doing it in tables as its too much of a faf to do all CSS stuff
Click to expand...
As Im in a good mood, I have knocked up the template for your site. You can build on this simple outline to suit your needs. You will find it much easier to sort problems like this, if you have a good base, trying to fiddle with all those tables is just asking for trouble :)

XHTML

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

	<title>Title</title>
	
	<link title="default" href="css.css" type="text/css" rel="stylesheet" />
	
</head>

<body>

	<div id="container">
	
	
			<div id="top">#top</div>
			
			<div id="nav">#nav</div>
			
			<div id="content">#content</div>
	
	
	</div>

</body>
</html>

CSS

Code: 
*, body, html {
	padding: 0;
	margin: 0;
}

body {
	margin: 10px;
	background: #FFFFCC;
}

#container {
	width: 760px;
	\width: 780px;
	w\idth: 760px;
	margin: 0 auto;
}

#top {
	height: 150px; /* May need to be adjusted */
	background: Red;
	border-top: 1px solid #DAA520;
	border-right: 1px solid #DAA520;
	border-left: 1px solid #DAA520;
}

#nav {
	height: 40px; /* May need to be adjusted */
	background: Red;
	border: 2px solid #DAA520;
}

#content {
	height: 300px; /* Remove as required, just a preview height */
	background: transparent;
	border-right: 1px solid #DAA520;
	border-left: 1px solid #DAA520;
	border-bottom: 1px solid #DAA520;
}

The only thing I havent done is set up the list for the navigation, but there are plenty of tutorials around for the list you want to achieve. Anyway, good luck :)

Note: The colours may not be correct, I was just guessing.
 
You must log in or register to reply here.
Back
Top Bottom