ITT: BG-Web Design HALP

[thestalkmore]

Designing a webpage for my Anthropology section's final project. Get to substitute spending hours in the library for hours coding and doing graphics, NP! Anyway, this link I'm giving you (http://chaco.malpurposed.net/astronomy.html) is pretty much a final draft of what the pages will look like. Problem is, I'm having a small browser compatibility issue. If you'll notice, loading the page in Firefox renders no errors except a gap between the content div and the footer div. Loading the page in IE, however, renders the same sort of gap between the header div and the content div. I originally only had this problem in IE with the header/content divs and remedied it by adding -4px to the margin-top property of the content div. Doing the same thing for the footer doesn't work, however, because a value which fixes the problem shoots the footer up into the content div.

Anyway, halp? What's the problem here? You can view the entire source on the webpage but I'll quote the relevant CSS here:

<style type="text/css">
<!--
body {
	background-image: url(pattern.jpg);
	padding: 0px;
	margin: 0px;
}
.mainholder {
	padding: 0px;
	padding-bottom: 0px;
	margin: 0px;
	height: auto;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}
.header {
	width:800px;
	height:244px;
	padding: 0px;
	margin: 0px;
}
.content {
	background-image: url(tablebg.jpg);
	background-repeat:repeat-y;
	width: 495px;
	margin-left: 148px;
	margin-right: 146px;
	
	padding-left: 6px;
	padding-right: 6px;
	color: #cc9966;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.img1 {
	float:right;
	
}

.img2 {
	float:left;
	margin-right: 4px;
	margin-top: 4px;
}

.content object {
	margin-top: 4px;
	margin-left: 4px;
	float:right;
}



.content h2 {
	background-image: url(subdiv.jpg);
	background-repeat: no-repeat;
	font-size: 20px;
	color: white;
	padding-left: 22px;
}
.footer {
	width: 495px;
	margin-left: 148px;
	margin-right: 146px;
	padding-left:6px;
	padding-right: 6px;
	padding-top:6px;
	background-image: url(bottomborder.jpg);
	background-repeat: no-repeat;
	color: white;
	font-size: 11px;
}
.footer a {
	color:#cc9966;
	text-decoration: none;
}
.footer a:hover {
	color: white;
}

-->
</style>

Thanks!

[izembo]

didnt have any errors load up at all on mine =/

[thestalkmore]

Really? Hmm, I'll take screenshots

[thestalkmore]

IE:
http://img89.imageshack.us/img89/3540/iedw9.jpg

Firefox:
http://img213.imageshack.us/img213/5994/ffrt7.jpg

[Keno]

Once you figure this out make the font on the site a size bigger. It's as if you're trying to get people to lose their vision >.<

EDIT: Actually it may not be the actual font size that's causing the problem but more so the big brick-o-texts.

[Feedmenow]

It'd be nice if the text was a bit brighter. That small of text does not go well with a text color as close to the backround. It's a bit of an eyesore.

[thestalkmore]

Thank you for the design suggestions, but those require about .5 seconds to fix and are not the problem atm :>

[Keno]

Thank you for the design suggestions, but those require about .5 seconds to fix and are not the problem atm :>

We clearly only mentioned those design suggestions because we don't know the answer to your problem. If we did, we would have told you. At least, that goes for me, I assume for Feedmenow as well.

[thestalkmore]

Problem with the bottom divs was an unclosed

tag. There's nothing similar in the header though >

[Feedmenow]

Thank you for the design suggestions, but those require about .5 seconds to fix and are not the problem atm :>

We clearly only mentioned those design suggestions because we don't know the answer to your problem. If we did, we would have told you. At least, that goes for me, I assume for Feedmenow as well.

If it's HTML I'd only be able to give you advice you'd already know, and I don't have a clue about CSS or anything else. So yeah, all I can give you are general hints about how to improve the site based on how it looks.

So yeah.

[netz]

Only idea I'm coming up with: ditch the centering, and switch to absolute positioning to drop the main content area down 244px. For the life of me I cannot figure out why IE6 makes a bigger area than firefox does. Check it yourself by putting a border around the object.

[thestalkmore]

Have decided that IE6 compatibility is for idiots because only idiots use IE6, let alone IE at all. Project doesn't need to be completely accessible for users of all different browsers anyway, so fuck it. Thanks anyway guys.

[Keno]

Have decided that IE6 compatibility is for idiots because only idiots use IE6, let alone IE at all. Project doesn't need to be completely accessible for users of all different browsers anyway, so fuck it. Thanks anyway guys.

I was just about to come to that conclusion for you

Website compatibility coding these days should be something like:

if browser=MozillaFirefox; then load webpage.html; else display "Please install Firefox and try again"

[Rammses]

Setting font-size to 0 in the header class should fix it.