1) If you care about IE, lose the pointless code-bloat HTML 5 crap and even crappier "polyfill" bs. Really HTML 5 offers no legitimate benefits to normal websites and just encourages sloppy non-semantic 1990's style coding.
2) Lose the jQuery bull, it's a fat bloated idiotic library that has no damned business on ANY website.
3) If you have to use that X-UA garbage (which
IS part of what's screwing you up) you probably have done something wrong in your HTML or CSS.
4) The goofy google webfont embed (thought you were trying to make it faster) is also invalid markup.
5) I see you're resorting to single quotes in the output, meaning you're wasting processing time server side with the stupid double quotes. Either that or you have a really crappy copy/paste from Google. (I swear, what the **** is happening to them lately?!?)
6) You have complete gibberish values in the REL attributes on those images. (the ones not showing)
... and that's just the tip of the iceberg; the semantics are gibberish too with "more emphasis" being applied to what looks like it should either be a TABLE or DL, H3 without H2, clearfix like it's still 2001, IE CC's for no good reason around HTML
(I REALLY want to punch Paul Irish in the face for that one! I swear between him, Eric Meyer and Kevin Yank, we need to thin out their numbers a bit), comment placements
(YES, I SAID COMMENTS, those things browsers are supposed to ignore) that could be tripping rendering bugs in some versions of both IE and FF, no media targets for your stylesheet LINK...
Oh, and side note -- nesting menus that deep is navigation hell, and no throwing more JS at it wouldn't be the answer either. I'd REALLY suggest breaking the subsections (2nd level dropdowns) out into a fixed sidebar on the sub-pages, just from a usability standpoint. In fact, because they are such usability GARBAGE I've stopped using dropdown menus altogether on sites, you might want to consider doing same.
If I were writing the same page, retaining the dropdowns, the markup would go something like this:
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"
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="viewport"
content="width=device-width; height=device-height; initial-scale=1.0"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<link
rel="shortcut icon"
href="images/favicon.ico"
/>
<title>
Micromuseum - Display Product
</title>
</head><body>
<div id="top">
<h1>Micro Museum</h1>
<div id="mainMenu">
<a href="#mainMenu" class="showMenuMobile"></a>
<a href="#" class="hideMenuMobile"></a>
<ul>
<li><a href="index.php">Home</a></li>
<li class="current">
<a href="inthe80sand90s.php">In the 80s and 90s</a>
<ul>
<li>
<a href="mycollectioninthe80sand90s.php">My collection in the 80s and 90s</a>
</li><li>
<a href='manufacturers.php'>Manufacturers</a>
<ul>
<li>
<a href='manufacturerlist.php'>In General</a>
</li><li>
<a href='manufacturerlist.php?category=1'>Filtered by Product</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">The Collection</a>
<ul>
<li><a href="#">Everything</a></li>
<li><a href="#">Computers</a></li>
<li><a href="#">Printers</a></li>
</ul>
</li>
<li>
<a href="blogs.php">Blogs</a>
<ul>
<li><a href="restorationblog.php">Restoration Blog</a></li>
<li><a href="acquisitionblog.php">Acquisition Blog</a></li>
<li><a href="pon02s2600s.php">PON02s 2600s</a></li>
</ul>
</li><li>
<a href="#">Odds 'n' Ends</a>
<ul>
<li><a href="sitenews.php">Site News</a></li>
<li><a href="inthepress.php">In the Press</a></li>
<li><a href="connections.php">Connections</a></li>
<li><a href="downloads.php">Downloads</a></li>
</ul>
</li>
</ul>
<!-- #mainMenu --></div>
<!-- #top.widthWrapper --></div>
<div class="mainSectionStart"><div class="widthWrapper">
<h2>
Acorn BBC Model B
</h2>
<!-- .widthWrapper, .mainSectionStart --></div></div>
<div id="content" class="widthWrapper">
<img
src="data/product/0003/photos/0001.jpg"
alt="Acorn BBC Model B"
class="plate"
/>
<h3>Product History</h3>
<p>
Launched in 1981 to coincide with a computer literacy drive by the BBC, the Model B was the more expensive of Acorn's two machines at £399. The machine's high cost was compensated for by very impressive expansion possibilities including disc drives, a second processor and network capabilities (Econet).
</p>
<h3>Specifications</h3>
<dl>
<dd>Produced:</dd>
<dt>Between 1981 and 1994.</dt>
<dd>CPU:</dd>
<dt> MOS Technology 6502 running at 2 Mhz.</dt>
<dd>Co-Processor:</dd>
<dt> Not fitted.</dt>
<dd>ROM:</dd>
<dt> 32 Kb expandable to 128 Kb.</dt>
<dd>RAM:</dd>
<dt> 32 Kb.</dt>
<dd>Display:</dd>
<dt> No internal display.</dt>
<dd>Keyboard:</dd>
<dt> 74 key full action.</dt>
<dd>Integrated Storage:</dd>
<dt> None.</dt>
<dd>Sound:</dd>
<dt>Four independent sound channels (one noise and three melodic) using the Texas Instruments SN76489 sound chip.</dt>
<dd>Text modes (characters):</dd>
<dt>20 x 32, 40 x 25, 40 x 32, 80 x 25, 80 x 32.</dt>
<dd>Graphics modes:</dd>
<dt>160 x 256 (4 colours), 160 x 256 (8 colours), 320 x 200 (2 colours), 320 x 256 (2 colours), 320 x 256 (4 colours), 480 x 500 (8 colours), 640 x 200 (2 colours), 640 x 256 (2 colours).</dt>
</dl>
<h3>Product Photos</h3>
<div class="gallery boxMe">
<a href="data/product/0003/photos/0001.jpg">
<img src="data/product/0003/photos/0001-thumb.jpg" alt="image" />
</a>
</div>
<h3>Adverts</h3>
<div class="gallery boxMe">
<a href="data/product/0003/adverts/0001.jpg">
<img src="data/product/0003/adverts/0001-thumb.jpg" alt="image" />
</a>
<a href="data/product/0003/adverts/0002.jpg">
<img src="data/product/0003/adverts/0002-thumb.jpg" alt="image" />
</a>
<a href="data/product/0003/adverts/0003.jpg">
<img src="data/product/0003/adverts/0003-thumb.jpg" alt="image" />
</a>
<a href="data/product/0003/adverts/0004.jpg">
<img src="data/product/0003/adverts/0004-thumb.jpg" alt="image" />
</a>
<a href="data/product/0003/adverts/0005.jpg">
<img src="data/product/0003/adverts/0005-thumb.jpg" alt="image" />
</a>
</div>
<!-- #content.widthWrapper --></div>
<hr />
<div id="footer"><div class="widthWrapper">
© 2014 Chris Long.
<!-- .widthWrapper, #footer --></div></div>
<!--
IF I had a lightbox implementation it would go here, and it sure as
Shine-ola would't rely on that bloated slow jQuery bull
-->
</body></html>
Providing more than enough semantics and using DIV for what they are for -- hooks for presentation without saying what that presentation IS or changing the meaning of the tags inside them... using numbered headings in a sensible and logical order, etc, etc... EVERYTHING else would be in a single monolithic stylesheet so it would be CACHED.
... I'm probably done for the night, but tomorrow I can put together the CSS that would make that work, and possibly even give you a section by section breakdown of the how/what/why of the HTML and CSS.
It's what I do on most web development forums -- I usually help one person a day with a rewrite and teaching them since I can't just sit here with my thumb up my ass and my brain going to rot, no matter what the doctors are telling me about "working".
