[adam c]

Hi all,
I'm really trying to improve my front end coding practices.
If anyone's got time could you take a look at this test page:
A website
and let me know any XHTML or CSS you think might be incorrect or wrongly implemented or just could be coded better.
Cheers guys.

[d3mcfadden]

Here is the only thing I see (in about a 5 second glance) in your html:

<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<br/> <- not valid 
</ul>

[pgo]

Or necessary. Should also have a space between the r and the / to avoid backward compatibility issues.

Also, images-as-text. Tsk, tsk.

[adam c]

Thanks guys. I'll take out the br tag and put in some padding instead.
Hmm, I see what you mean about the images as text. What would you do if the client has asked for a specific, non-web friendly typeface though? Would you advise them against it or do some sort of image replacement (of which I have no experience, I've only heard other people say it)?

[niggle]

What would you do if the client has asked for a specific, non-web friendly typeface though?

Remember that search engines and validators can't recognise a heading. All they know to look for is keywords, tags and so on. So your graphic headings might well be the headings for your human viewers, but you can duplicate them elsewhere with tags and so on for your non-human ones.

[Dusteh]

You could use sIFR on your H tags like everyone else.

Or basic css image replacement. Set the background for the text being replaced to the image, give the container a width and height, set your overflow to hidden, offset the text by -9999px - job done.

[d*d]

Originally Posted by niggle

Remember that search engines and validators can't recognise a heading.

<h1>

[adam c]

Originally Posted by Dusteh

You could use sIFR on your H tags like everyone else.

Or basic css image replacement. Set the background for the text being replaced to the image, give the container a width and height, set your overflow to hidden, offset the text by -9999px - job done.

Thanks Dusteh. I'll look into this.

[pgo]

Originally Posted by adam c

Thanks guys. I'll take out the br tag and put in some padding instead.
Hmm, I see what you mean about the images as text. What would you do if the client has asked for a specific, non-web friendly typeface though? Would you advise them against it or do some sort of image replacement (of which I have no experience, I've only heard other people say it)?

Image replacement is great. I've never bothered using sIFR - mostly because I don't have Flash.

Anyway, there are lots of image replacement methods. The one I generally use requires extra markup, but there are other methods - I'm just a creature of habit.

<h1><span>Heading</span></h1>

h1 {
 width: XXXpx;
 height: YYpx;
 background: url(/path/to/image.png) no-repeat top left;
}

h1 span {
 display: block;
 width: 0px;
 height: 0px;
 overflow: hidden;
}

Probably more preferable is...

<h1>Heading</h1>

h1 {
 width: XXXpx;
 height: YYpx;
 background: url(/path/to/image.png) no-repeat top left;
 text-indent: -9999px;
 overflow: hidden;
}

That should work.

[Dusteh]

Yeah I think the second one is better because you don't need the extra markup. I've yet to see it fail on any browsers.

[d*d]

text-indent: -9999px;

I've never been entirely happy with that though

[pgo]

What happens when I get a monitor that runs 12800x10240, huh smart guy?!

[adam c]

Thanks pgo.
I take it the text-indent value is so that you will definitely not see the text unless you have images turned off?

[pgo]

No, it just pushes it off the screen. Images off/CSS on will show nothing - like most IR techniques.

There's several methods detailed: mezzoblue § Testing Grounds

[Mongoose]

There's no need to have two divs for your header. Get rid of either topBar or topImg.

You should try to name your divs a bit more semantically:
div#topBar --> div#branding
div#rightNav --> div#sidebar
div#footer --> div#siteInfo

[pgo]

I don't know, I've had a few cases where I needed to create one or two extra non-semantic <div>s or <span>s. It's not a crime against humanity, really.

[Mongoose]

Originally Posted by pgo

I don't know, I've had a few cases where I needed to create one or two extra non-semantic <div>s or <span>s. It's not a crime against humanity, really.

Well, yeah. At the end of the day, it doesn't matter. Just makes the code more human readable.

[adam c]

Originally Posted by Mongoose

There's no need to have two divs for your header. Get rid of either topBar or topImg.

You should try to name your divs a bit more semantically:
div#topBar --> div#branding
div#rightNav --> div#sidebar
div#footer --> div#siteInfo

I think I understand why you're saying there's no reason for both of these divs but what I'm trying to do is have a white bar the entire length of the browser and an image aligned off the left hand side of the centered box below. Can I still do this with only one div?

[Dusteh]

I wouldn't worry about it.

[pgo]

Originally Posted by adam c

I think I understand why you're saying there's no reason for both of these divs but what I'm trying to do is have a white bar the entire length of the browser and an image aligned off the left hand side of the centered box below. Can I still do this with only one div?

I can't think of an easy way. I did that recently using almost the same markup.

<div id="banner-parent"><div id="banner">Site Name</div></div>
<div id="wrap" class="clearfix">
...blah...
</div>

Not ideal, but not too bad. Site name is replaced by a logo.

#banner-parent {
	width: 100%;
	height: 100px;
	border-bottom: 25px solid #FFF;
	background-color: #084A8E;
}

#banner {
	width: 650px;
	height: 100px;
	margin: 0 auto;
	background: url(logo.gif) no-repeat 25px 50% #084A8E;
	text-indent: -99999px;
}