Browser problems - fixable or start over?

[Cygnus X-1]

I started working on a site and I thought it was going okay until I checked it in IE6 (minor positioning problem) and Firefox (really messed up!). I'm at the point now where I don't know if I should just start all over, or try and fix the code to work in all browsers.

I'm not too experienced with css. I'm still learning when I can, but I don't have much free time these days. So not sure if this is something that can be easily fixed?

The site is still under construction, but can be viewed here.

CSS code:

* {
	margin: 0;
	padding: 0;
}
html {
	background: #fff url("../images/html.png") repeat-x left top;
}
body {
	font-family: arial, sans-serif;
	font-size: 12px;
	color: #000000;
	background: url("../images/body.png") repeat-y left top;
	width: 1000px;
	margin: 0 auto 30px auto;
	position: relative;
}
a img {
	border: 1px solid #ccc;
}

a {
	color: #94AEBB;
	text-decoration: none;
}
a:hover {
	visibility: visible;
/* IE bug fix */
}
a:hover img {
	border: 1px solid #729AD7;
}
h1 {
	font-size: 14px;
}
h2 {
	font-size: 12px;
}
.page {
	background: url("../images/page.jpg") no-repeat left top;
	padding: 28px 125px 0 115px;
	width: 760px;
}
.header {
	position: relative;
	width: 760px;
	height: 175px;
	overflow: hidden;
	font-size: 160%;
	padding: 0px 0px 0px 0px;
	
}
.header a {
	display: block;
	width: 760px;
	height: 175px;
	cursor: pointer;
	padding: 20px 0 0 0;
	text-align: center;
	color: #84A7DC;
}
.header span {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 760px;
	height: 175px;
	background: url("../images/h1.gif") no-repeat left top;
}
.topmenu {
	height: 100px;
	background: url("../images/topmenu.png") no-repeat left top;
	text-align: right;
	padding: 35px 27px 0 0;
}
.page>.topmenu {
	min-height: 100px;
	height: auto;
}
.topmenu li {
	display: inline
}
.topmenu li a {
	float: right;
	width: 105px;
	height: 100px;
	background: url("../images/paw.gif") no-repeat;
	text-align: center;
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	padding-top: 5px;

}
.topmenu li>a {
	min-height: 100px;
	height: auto;
}
.topmenu li a:hover {
	background: #ffffff url("../images/paw.gif") no-repeat;
}
.main {
	width: 706px;
	margin: 0 auto;
}
.bluebox {
	border: 1px solid #cc0000;
	clear: both;
	padding: 7px 17px 9px 8px;
	width: 677px;
	position: relative;
	margin-bottom: 10px;
	background: #FFFFCC;
	
}
.bluebox .big {
	float: left;
	margin-right: 40px;
}
.bluebox .big2 {
	float: left;
	margin-right: 20px;
}
.bluebox .big img {
	padding: 2px;
}
.bluebox .right {
	width: 335px;
	float: left;
	padding-bottom: 30px;
}
.bluebox .small1, .bluebox .small2 {
	position: absolute;
	bottom: 9px;
}
.bluebox .small2 {
	left: 534px;
}
.bluebox3 {
	border: 1px dashed #000000;
	clear: both;
	padding: 2px 2px 2px 2px;
	width: 677px;
	position: relative;
	margin-bottom: 10px;
	background: #FFFFCC;
	
}
.bluebox .big3 {
	float: left;
	margin-right: 40px;
}
.photos {
	margin-bottom: 15px;
}
.photos a {
	width: 106px;
	height: 148px;
	float: left;
	background: #C2D3EE;
	text-align: center;
	color: #A2A3A6;
	text-decoration: none;
	font-size: 11px;
	font-weight: bold;
	margin-right: 14px;
}
.photos>a {
	min-height: 148px;
	height: auto;
}
.photos a.last, .greybox-background .right a.last {
	margin-right: 0;
}
.photos a:hover {
	color: #729AD7;
}
.photos a span {
	display: block;
	padding-top: 2px;
}
.photos a>span {
	padding-top: 5px;
}
.greybox {
	border: 1px solid #ccc;
	margin-bottom: 39px;
	padding: 5px 0;
}
.greybox-background {
	background: url("../images/gbback.jpg") repeat-y left top;
	width: 100%;
	line-height: 170%;
}
.greybox-background .left, .greybox-background .right {
	width: 321px;
	float: left;
	padding: 0 10px;
}
.greybox-background .right {
	float: left;
	padding: 0 19px 0 20px;
}
#contact * {
	vertical-align: middle;
}
#contact fieldset {
	border: none;
}
#contact fieldset p {
	margin-bottom: 3px;
}
#contact label {
	padding-right: 3px;
}
#contact legend {
	color: #BFBFBF;
	margin-left: -7px;
}
#contact fieldset>legend {
	margin-left: 0;
}
#name, #email {
	height: 13px;
	width: 218px;
	border: 1px solid #B5B5B5;
}
#send {
	border: none;
	width: 62px;
	height: 15px;
	background: #D5D5D5;
	cursor: pointer;
	margin: 4px 0 0 34px;
	color: #B8B8B8;
	line-height: 100%;
	font-weight: bold;
}
fieldset>#send {
	min-height: 15px;
	height: auto;
}
.greybox-background .right a {
	display: block;
	float: left;
	margin-right: 11px;
	margin-top: 8px;
}
.greybox2 {
	border: 1px solid #ccc;
	margin-bottom: 15px;
	padding: 9px 7px;
	width: 688px;
}
.greybox2 .preview {
	float: left;
	margin-right: 40px;
	margin-right: 44px;
}
.greybox2 .preview img {
	padding: 5px;
}
.greybox2 .right {
	float: left;
	width: 350px;
}
.greybox2 .right a {
	float: left;
	margin: 0 14px 7px 0;
}
.footer1 {
	text-align: center;
	padding: 0 27px 3px 27px;
}
.footer1 a {
	color: #888;
	text-decoration: none;
}
.footer1 a:hover {
	color: #729AD7;
	text-decoration: none;
}
.footer2 {
	font-size: 0px;
	line-height: 0px;
	height: 18px;
	
	margin-left: 105px;
}
.cleaner {
	font-size: 0px;
	line-height: 0px;
	height: 0px;
	clear: both;
}

.lightBlueBg {
  background-color: #EAF2F5;
}

Is there still hope?

[Tailslide]

There's a fair few things I'm afraid...

You're using tables for layout which is generally considered a "bad idea" these days. You'd be much better off using CSS and semantic HTML to structure your page.

You're using XHTML for your markup but (ignoring the whole text/html argument) you're using upper case for the various tags and attributes which is incorrect - all XHTML tags and attributes should be lower case.

You're also not closing some of your tags which is required in XHTML (such as img or br) - you might be better off dropping back down to HTML 4.01 (strict preferably), that way you can keep the upper case and keep the non-closing tags.

All styling information should be removed from the page itself to a stylesheet so that it's easier to maintain the site (change stuff in one place) and so that you don't run into confusing precedence problems where inline rules interfere with rules in the stylesheet. It also makes it easier to read the markup on the page if all you've got there is the semantic markup and the actual content.

You've also got quite a few coding errors there such as missing quote marks around ids (should be id="myidname"). I'd suggest dropping down to HTML 4.01 strict and then (if possible dump the tables in favour of just using CSS and semantic HTML- then) check your markup at the W3C validator to spot any coding errors. Once those are sorted out you can hopefully clear up any remaining cross-browser issues.

In Firefox you can solve some of the problems caused by uncleared floats such as the background image not appearing all the way down, by either clearing the floats (if possible) or adding overflow:hidden to the element with the background image (such as .page). Also, add "clear:both" to your footer rule to push it clear of all the other content.

Final point - if you do go through all your code again, try to give your ids and class names more useful values - "m1" doesn't tell you very much - "container" or "wrapper" might be easier to understand. Also, try to avoid class names that could become confusing due to layout changes - ".bluebox" might become confusing if, 6 months down the line you change the colour concerned to red!