Help with validating Html/Css page?

Warpscum · 02-19-2009, 05:26 PM

Hi, Guys!

Me and some guys are doing a small projekt and desided we want a homepage for it. The problem is... non of us are that great with writing totally correct code.

I would really appreciate some help with making our page looking correct in Firefox 3 and Firefox 2 as well as in Internet Explorer. In its current state it should look correct in Firefox 3.0.6 but the menu and logo will probably be move around in IE or in FF 2.x.x.

Here's the page: Fluxibility

BoldUlysses · 02-19-2009, 05:49 PM

Welcome to CF!

Your page is a good start. Kudos for using a DOCTYPE; but with your page layout there's really no reason not to go to 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" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Page Title Goes Here</title>

...

Try that for a header. XHTML requires closing tags, all lowercase (<a> and not <A>) tags and some other constraints that will help your code be better formed and more cross-browser friendly.

Some other things on your page to watch out for are block-level elements incorrectly inside inline elements (<div> inside <a> is a no-no):

Code:

<A HREF="screenshot.html" STYLE="text-decoration: none">
	<DIV ID="menubuttonlast"><FONT ID="menufont"><CENTER>SCREENSHOT</CENTER></FONT></DIV>
</A>

along with use of deprecated elements like <font> and <center> (CSS styles control these effects now).

One more thing: You have a profusion of divs on your page. I would read about divitis and semantic code.

Excavator · 02-19-2009, 06:04 PM

Hello Warpscum,
You also need to clear your floats. Try this:

Code:

#content {
	margin-top: 1.5%;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	border: 0px; 
	width: 770px;
background: #fff;
overflow: auto;
}

Just add that background color for testing. Try adding and removing the overflow:auto; to see what it does.
Read about clearing floats here.

...

Have a look at a couple ideas for your horizontal nav -

one
two

Warpscum · 02-22-2009, 12:19 PM

Well, I have tried to fix most things you guys mentioned, not sure I succeeded on all points, but any ways, here's the new version: Fluxibility

(And yes, only the "home" page exists so far)