Looking at what you have for “layout” (accessibility wreck of fixed width and px fonts on body) and then what you have for markup and CSS, you’ve really overthought your layout and theres not really anything I see being done that warrants the presence of a 16k file for IE8 and lower; the ONLY thing that might even come close to needing it is the ‘three across’ videos on the home page, and to be frank, that’s what I call a “not viable for web deployment” concept.
That the page is developed as tranny means that you’re in transition from 1997 to 1998 – no wonder you were looking at HTML 5 since it seems artfully crafted for the people who never embraced STRICT. The lack of media types on your style embed, language declarations, IE conditional comments for nothing, excessive number of DIV, presentational images in the markup,nonsensical heading orders, javascript I can only assume is broken since it doesn’t do anything, javascript to do CSS’ job, horizontal rules where semantically there should be none, unnecessary classes, presence of IFRAMEs, and pointlessly redundant title attributes means it’s not only got a ways to go, it’s entirely likely these things are part of your legacy IE woes.
Lemme go down a few of those in a bit more detail…
<link href="CSS/connect.css" rel="stylesheet" type="text/css" />
Should probably have media=“screen,projection,tv” on that so you aren’t sending your screen layout to print or less capable handhelds.
<body id="homepage">
While the id on body and id on the menu ‘trick’ is cute, I’d really suggest getting just enough PHP to handle that server side; poor man’s isn’t that hard to do.
<div id="left_header"><a href="index.html"><img src="Images/header_logo.png" class="logo" height="67" width="436" alt="Connect Community logo" border="0" /></a></div>
DIV for nothing, should PROBABLY be your H1 since it’s improper to use H2’s without a H1 before them – and it’s the best candidate since an H1 says that all other headings on the page are SUBSECTIONS of it (which is why the “h1 for the first article header” is utter BS), and that image really has no business in the HTML in the first place.
<div id="nav">
Pointless wrapping DIV, you aren’t doing ANYTHING that couldn’t be done directly to the UL.
<li><a href="index.html" id="homelink" title="Home page link" >Home</a></li><!--title is used for screenreaders and also bring up a dialogue-box with the alt text-->
Comment shows you didn’t grasp the point of TITLE – a screen reader should already be telling them it’s a link… It’s an anchor – it’s a link, you donj’t need to say that again; also, if you need the tooltip to say that an ANCHOR with the text “home” inisde it is a link to the home page, there’s something wrong with the text inside the anchor – which there isn’t.
<div id="slideshow">
<img src="Images/main_content_home.jpg" id="imgrotate" alt="main image - Maurice working in Aravon school" />
</div>
I just have a rabid hatred for stupid pointless space wasting slideshows. YMMV.
<hr class="hrule" />
If you have to put a class on a HR, you’re probably not using them right. Semantically there’s no reason for that to even be there, since the H2 following it basically says that a new subsection is starting, and that’s HR’s job – to say a new subsection is starting when there isn’t a header or after a headerless subsection – you have neither of those situations here.
<div id="aside">
Poor name, probably a holdover from IMPROPER use of the HTML 5 ASIDE tag – an aside if you are bothering with proper semantic markup should NOT mean something that is ‘placed off to the side’ like a sidebar, it should mean a literary aside like a monologue directed at the audience. The content should be relevant to the main topic while not changing the main topics meaning. Several tags in HTML 5 like ‘aside’ I take extreme exception to the abuse of language and reversion to 1990’s style presentational markup.
<h2 class="asideheading">Contact a Job-coach</h2>
You’ve got a perfectly good DIV with an ID around this, what does it need the class for?
<iframe width="300" height="182" class="vid" src="http://www.youtube.com/embed/fajJA3EkJc8" frameborder="0"></iframe>
I didn’t even get the videos on first view because I have iframes blocked. IFRAMES were deprecated for a reason and have no business being on any website made after 1998.
<h3>A Jobcoach's view</h3>
What makes those subsections of “Contact a Job-coach” – that’s what H3 means, subsection of the H2 preceeding it – I’m pretty sure that’s NOT what you meant here.
</div><!--videobox end-->
</div><!--footer end-->
</div><!--wrapper end-->
The comments that end up between sibling-level tags can trip rendering bugs in legacy versions of IE and FF. Also, your comment is a bit redundant since </div> means end – so you don’t need to say end. If you flipped it around and removed the word, and used . or # like you would in the CSS, the result is cleaner, clearer, easier to follow and avoids the possibility of comment related rendering errors. <!-- #video_box –></div>
On the subject of comments and names I always point people at this article on IBM’s Linux developer site – while it’s meant for C programmers, the lessons can be applied to just about any type of coding.
http://www.ibm.com/developerworks/linux/library/l-clear-code/
I’m particularly fond of the “Oh, now we’re done?” part.
<div class="footer_list_left">
Both of these div wrapping the UL are pointless, again much like the one around the main menu you’re not doing anything you couldn’t be doing to the UL. In fact looking at your layout, you aren’t doing anything that would warrant the need for classes on any of these.
<a href="http://www.sunbeam.ie" onmouseover="document.swap.src='Images/footer_shs_logo.png'"
onmouseout="document.swap.src='Images/header_logo.png'" target="_blank"> <img src="Images/header_logo.png" class="footerlogo" name="swap" alt="Connect and Sunbeam logos" border="0" /> </a>
Javascript doing CSS’ job, presentational image in the markup, attributes like TARGET and BORDER that have NO business being used on websites after 1998, name attribute targeting which is no longer considered a valid way to write javascript unless you still care about netscape 4.
Oh, and I’d be using a ICO, not a png, keep it in the root with the other document to avoid 404’s from browsers that just look without checking the LINK, lose the TYPE on said link declaration, and get the keyword ‘shortcut’ in there too.
Now, for all these issues, if this is your first time to the dance you did rather well – I just suspect you are learning from out of date resources, but again if you were looking at HTML 5 that’s kind of a given since it’s sole purpose seems to be to dial back coding practices to the peak of the original browser wars.
To give you an idea what I mean, I did a quick rewrite of the markup of your index.html
<!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"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<meta
name="description"
content="Providing community services such as supported employment for people of varying abilities."
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<link
rel="shortcut icon"
href="favicon.ico"
/>
<title>
Connect Community Homepage - What is supported employment?
</title>
</head><body>
<!--
hyphens inside spans are for non screen.css users, can be retasked
for gilder-levin image replacement as needed, which is also what
any empty spans are for.
-->
<div class="pageWrapper">
<h1>
Connect <span> - </span>
<small>A division of Sunbeam House Services</small>
</h1>
<ul id="mainMenu">
<li><a href="index.html" class="current">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="employers.html">Employers</a></li>
<li><a href="employees.html">Employees</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="links.html">Links</a></li>
</ul>
<hr />
<div id="slideshow"><!-- let the script add ALL the images --></div>
<div id="contentWrapper"><div id="content">
<!-- double wrapping div for content first semi-fluid -->
<h2 class="noBreakBefore">What is Supported Employment?</h2>
<p>
Supported Employment is a simple concept. It is about supporting people with various abilities in obtaining and maintaining work in the open labour market, while at the same time providing whatever supports are required if any to the employer and co-workers.
</p><p>
We place people in work based on their skills and interests. Hiring people with disabilities is not a charity, it is good for business. They are a major untapped resource of well trained people available for work.
</p>
<h2>How does it work?</h2>
<p>
With the support of a staff member from Connect Community (Jobcoach), the individual chooses the type of work most suited to his/her skills. The individual then receives support in sourcing and applying for suitable work.
</p><p>
If required training on the job is provided by the Jobcoach. Once the person is fully trained, the Jobcoach pulls back but is always available to the employer and employee if needed.
</p><p>
Employees are available to work a variety of hours, as required by the employer. Depending on their individual circumstances, some prefer to work a small number of hours each week, while others prefer a bigger time commitment.
</p>
<!-- #content, #contentWrapper --></div></div>
<div class="sideBar">
<h2>Contact a Job-coach</h2>
<ul class="contact">
<li class="phone">
<a href="contact.html">Phone - 01 204 2971</a>
</li>
<li class="mail">
<a href="mailto:info@sunbeam.ie">Email - info@sunbeam.ie</a>
</li>
<li class="fax">
<a href="contact.html">Fax - 01 204 2857</a>
</li>
<li class="twitter">
<a href="https://twitter.com/#!/">Twitter</a>
</li>
</ul>
<!-- #sideBar --></div>
<div id="videoBox">
<div>
<object
type="application/x-shockwave-flash"
data="http://www.youtube.com/v/fajJA3EkJc8?version=3"
>
<param name="movie" value="http://www.youtube.com/v/fajJA3EkJc8?version=3" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object>
<h2>A Jobcoach's view</h2>
<p>
This short video gives you the perspective of one of our job-coaches, Theresa.
</p>
</div>
<div>
<object
type="application/x-shockwave-flash"
data="http://www.youtube.com/embed/6mF-p-TwTKg?version=3"
>
<param name="movie" value="http://www.youtube.com/embed/6mF-p-TwTKg?version=3" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object>
<h2>An employers view</h2>
<p>
This video talks about what supported employment is like from an employee's perspective.
</p>
</div>
<div class="last">
<!-- class is in case we need to negative margin fix float drops -->
<object
type="application/x-shockwave-flash"
data="http://www.youtube.com/embed/aDk6gYnbFL8?version=3"
>
<param name="movie" value="http://www.youtube.com/embed/aDk6gYnbFL8?version=3" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object>
<h2>An employees view</h2>
<p>
This video talks about how employer's feel about supported employment.
</p>
</div>
<!-- #videoBox --></div>
<hr />
<div id="footer">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="employers.html">Employers</a></li>
<li><a href="employees.html">Employees</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
</ul>
<hr />
<ul>
<li>
<a href="gallery.html" >Gallery</a>
</li><li>
<a href="http://www.sunbeam.ie/">
<acronym title="Sunbeam House Services">S.H.S.</acronym>
</a>
</li><li>
<a href="http://www.thecouncil.org/">
<acronym title="Council on Quality and Leadership">C.Q.L.</acronym>
</a>
</li><li>
<a href="http://www.iase.ie/">
<acronym title="Irish Association of Supported Employment">I.A.S.E.</acronym>
</a>
</li><li>
<a href="http://www.hiqa.ie/">
<acronym title="Health Information and Quality Authority">H.I.Q.A.</acronym>
</a>
</li>
</ul>
<hr />
<a class="twitterfooter" href="https://twitter.com/#!/">
Twitter
<span></span>
</a>
<hr />
<a class="footerLogo" href="http://www.sunbeam.ie">
Connect <span> - </span>
<small>A division of Sunbeam Home Services</small>
</a>
<hr />
<div>
© 2012
<a href="mailto:sunbeam.house.media@gmail.com">
Sunbeam Media
</a>.
All rights reserved.
</div>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
<script
type="text/javascript"
src="scripts/slideShow.js"
></script>
</body></html>
Valid STRICT, proper heading orders, uneccessary DOM elements removed, missing bits of semantics added in. The horizontal rules are there to separate headerless sections, NOT for the presentational use of a line across the screen – I’d actually set them to display:none in my screen.css.
Other than the centering that drops to a single column on the embedded videos, you’re not really doing anything that should need a second stylesheet or the conditional comment nonsense, even with supporting all the way back to IE 5.5! Worse though, is you failed to grasp how to use CC’s in that manner, since you basically repeat in that second stylesheet values already set by the first! The entire point of a separate stylesheet with CC’s for IE is to tweak just what needs to be changed to fix it, WITHOUT restating the entire markup all over again.
Your CSS has some issues of it’s own – declaring PX metric fonts on BODY means it’s an inaccessible wreck; sends me for the zoom when I shouldn’t have to – the lack of condensed properties makes it many times larger than it should need to be, and on the whole you got very complex with something simple.
I’ve got a full plate today, but if I have time later I’ll see if I can belt out some CSS to go with the above markup to show you what I mean, and the how/what/why of my approach.
