HTML Browser Fallback

[Andrew3]

Hi,

I've been considering something for a while for a website that I'm designing, but I would be interested in what other people think about this.

I've got a website working with either the CSS3 box-shadow, as well as div tags with images. However, the "legacy" image code looks like this for the top navigation:

<div class="ie-navbg" id="site-header-linkbg">
	<div class="ie-navbg" id="site-header-shadow-bottom">
		<div class="ie-navbg" id="site-header-shadow-left">
			<div class="ie-navbg" id="site-header-shadow-right">
				<div class="ie-navbg" id="site-header-corner-bottomleft">
					<div class="ie-navbg" id="site-header-corner-bottomright">
						<div id="site-header">
							<a href="#"><img id="site-logo" src="images/logo.jpg" width="1000" height="140" alt="X-Company Logo" /></a>
							<ul id="site-links">
								<li><a href="#">Home</a></li>
								<li><a href="#">History</a></li>
								<li><a href="#">Link</a></li>
								<li><a href="#">Another Link</a></li>
								<li><a href="#">Yet another link</a></li>
								<li><a href="#">Merchandise</a></li>
								<li><a href="#">About</a></li>
								<li><a href="#">Content</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

The size of the background images is not a problem since there are only 3 images sliced using CSS.

However, the code is horrible.

One approach I was considering using was not having any of the div.ie-navbg tags in the HTML and using Javascript to provide it for legacy browsers... Obviously it wouldn't work in non-Javascript browsers, in which case the page would simply not have the box-shadow.

Not providing a box shadow except for modern browsers is not really an option.

Thoughts?