I took a quick look, and didn't see anything obvous - but I don't have a copy of IE9 to hand at the moment to check things with.
One comment I would make is that your page is coded rather like an old-fashioned table-based layout, with all the <td>s changed to <div>s. It'll work (once you've got IE9 to behave), but it's rather missing the point.
What you should aim for, in my view, is a much cleaner HTML without all that <div class="image-left"> stuff. So your HTML body would be something like this:
Code:
<body>
<div id="header>
<h1>Rick Duley's Home Page<h1>
<ul id="menu">
<li class="current">Home</li>
<li><a href="wherever.htm">About Rick</a></li>
<li><a href="wherever.htm">Family Ties</a></li>
<li><a href="wherever.htm">Interests</a></li>
</ul>
<ul id="breadcrumbs">
<li>Home</li>
</ul>
</div>
<div id="main">
<div id="left-sidebar">
<h2>This is a<br><i>'No-Frills'</i><br>Zone</h1>
<p>I don't know about you...</p>
</div>
<div id="right-sidebar">
<h2><a href="currentSurvey.html">Current Survey</a></h1>
<p>Considerable effort went into...</p>
</div>
<div id="content">
<h2>While you are here ...</h2>
<p>... come in and have a look around ...</p>
</div>
<div id="endbox">
<h2>Ask Any Aussie ...</h2>
<p>And I mean ANY Aussie!</p>
</div>
</div>
<div id="footer">
<img src="./img/valid-html401-blue.gif" width="71" height="25" alt="Valid HTML 4.01">
<img src="./img/valid-css-blue.gif" width="71" height="25" alt="Valid CSS">
</div>
</body>
You might need the odd extra <div or <span> to hang a background image on, and you might need to juggle the order of the content and sidebar divs, but the principle is the same - structure your HTML solely according to what it
is, and leave everything about what it
looks like to sit in the CSS.
How do you convert a <ul> into a line of tabs? There's a technique for that called "sliding doors" that's been around for 10 years - Google for "CSS sliding doors" and you'll find plenty of advice.
How do you get rounded corners on your divs? Plenty of ways to do that using background images - especially easy when the boxes are of fixed width. Take a look at how I do the borders on the sidebar boxes at
for example.
But actually, I'd recommend not going with any image-based rounded corner solution and just use CSS3's [tt]border-radius[/tt]. It'll be ignored by IE versions earlier than 9 - meaning they get square borders instead - but all other modern browsers will understand it, making it very simple to implement. It depends how important rounded corners are to you. Anyhow - Google for "CSS rounded corners" and you'll find plenty of advice.
Hope you find this advice useful, even if it isn't what you asked for!
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
