Hi I’ve launched a client site http://pacifichydro.com, but in IE 7 the drop-down menus within the main site menu are looking really strange, the font is meant to be Georgia but it looks really pixelated and aliased- which is strange because the top level of the menu’s is picking up the Georgia font. Any ideas?
Just some observations:
-
If you care about IE7 or lower, do NOT believe the lies that some stupid .js shiv is going to let you deploy that fat bloated HTML 5 nonsense that just sets coding practices BACK a decade or more.
-
Lose the jquery bloat and annoying animation on the menu items… overcomplicated == broken.
-
If you have to use that many conditional comments to target IE versions, there’s something fundamentally flawed with how the page is built. (though to put that in perspective, I say that if you use ANY CC’s for CSS)
-
if there’s only one item, it’s probably not a list.
-
if every element (like ‘region’) is getting the same class, they probably don’t need classes.
-
if you are using single quotes in your output, your server side code is probably uselessly complex thanks to double quotes.
-
media targets for CSS – include them.
-
While CSS for images is good when doing things like sprites – when they’re content images put them into IMG tags!
-
16k of HTML for 1k of plaintext is usually an indication SOMETHING is wrong.
But to top all that off, your invalid markup is most likely what’s biting you – you’re closing LI that aren’t open, you’re opening div where div are invalid (between LI), in general the markup for that code is a mess – and as I always say CSS is only as good as the HTML it’s applied to.
For example:
<ul class=‘top’><li class=‘first main’><a href=‘/?language=en’>Home</a></li></li></li>
or:
</li><div class=‘clear_both’></div></ul>
You do that several times – you’re closing too many of them, and you can’t put a DIV there! The 13 validation errors (in HTML 5 no-less where validation is a useless joke) are just the top of a very large iceberg.
I would ballpark estimate that roughly 30% of your HTML should be thrown away… which probably means starting over using a proper coding technique instead of the HTML 5 train wreck (which I would NEVER recommend ANYONE try to build a site with), pitching all the bloated script in the trash for something leaner, and a wee bit simpler a codebase overall – particularly if you care about legacy IE.
If I was writing the same page, the HTML would be gutted down to something more like this:
<!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"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Home - Pacific Hydro
</title>
</head><body>
<div id="pageWrapper">
<h1>
PacificHydro
<span><!-- image replacement --></span>
</h1>
<div id="languageMenu">
<a href="#" >Global / English</a>
<ul>
<li>
Global -
<ul>
<li><a href="/?language=en">English</a></li>
<li><a href="/?language=es">Español</a></li>
<li><a href="/?language=pt">Português</a></li>
</ul>
</li><li>
Australia -
<ul>
<li class="last"><a href="http://www.pacifichydro.com.au/?language=en">English</a></li>
</ul>
</li><li>
Brazil -
<ul>
<li><a href="/?language=pt">Português</a></li>
<li class="last"><a href="/?language=en">English</a></li>
</ul>
</li><li>
Chile -
<ul>
<li><a href="http://pacifichydro.cl/?language=es">Español</a></li>
<li><a href="http://pacifichydro.cl/?language=en">English</a></li>
</ul>
</li>
</ul>
<!-- #languageMenu --></div>
<ul id="mainMenu">
<li>
<a href="/?language=en">Home</a>
</li><li>
<a href="/?page_id=15&language=en">About</a>
<div>
<ul>
<li><a href="/?page_id=159&language=en">About Pacific Hydro</a></li>
<li><a href="/?page_id=83&language=en">Vision, mission & values</a></li>
<li><a href="/?page_id=85&language=en">Facts & figures</a></li>
<li><a href="/?page_id=87&language=en">Our history</a></li>
<li><a href="/?page_id=89&language=en">Our businesses</a></li>
<li><a href="/?page_id=369&language=en"> - Pacific Hydro Australia</a></li>
<li><a href="/?page_id=370&language=en"> - Pacific Hydro Brazil</a></li>
<li><a href="/?page_id=371&language=en"> - Pacific Hydro Chile</a></li>
<li><a href="/?page_id=91&language=en">Our Board</a></li>
</ul><ul>
<li><a href="/?page_id=93&language=en">Our Management Team</a></li>
<li><a href="/?page_id=95&language=en">Contact us</a></li>
</ul>
</div>
</li><li>
<a href="/?page_id=21&language=en">Projects</a>
<ul>
<li><a href="/?page_id=97&language=en">Our global projects</a></li>
<li><a href="/?page_id=99&language=en">Australia</a></li>
<li><a href="/?page_id=103&language=en">Brazil</a></li>
<li><a href="/?page_id=101&language=en">Chile</a></li>
</ul>
</li><li>
<a href="/?page_id=27&language=en">Sustainability</a>
<ul>
<li><a href="/?page_id=105&language=en">Our approach to sustainability</a></li>
<li><a href="/?page_id=109&language=en"> - Communities</a></li>
<li><a href="/?page_id=107&language=en"> - Environment</a></li>
<li><a href="/?page_id=111&language=en"> - Workplace</a></li>
<li><a href="/?page_id=113&language=en"> - Business partners</a></li>
<li><a href="/?page_id=115&language=en">Sustainability Reports</a></li>
</ul>
</li><li>
<a href="/?page_id=33&language=en">Products</a>
<ul>
<li><a href="/?page_id=123&language=en">Solutions to power a cleaner world</a></li>
<li><a href="/?page_id=125&language=en"> - Solutions in Australia</a></li>
<li><a href="/?page_id=127&language=en"> - Solutions in Brazil</a></li>
<li><a href="/?page_id=815&language=en"> - Solutions in Chile</a></li>
</ul>
</li><li>
<a href="/?page_id=42&language=en">Investors</a>
<ul>
<li><a href="/?page_id=131&language=en">Ownership structure</a></li>
<li><a href="/?page_id=133&language=en">Our strategy</a></li>
<li><a href="/?page_id=135&language=en">Our competitive edge</a></li>
<li><a href="/?page_id=137&language=en">Corporate Governance</a></li>
</ul>
</li><li>
<a href="/?page_id=48&language=en">Careers</a>
<ul>
<li><a href="/?page_id=143&language=en">Working with us</a></li>
<li><a href="/?page_id=147&language=en">Current career opportunities</a></li>
</ul>
</li><li>
<a href="/?page_id=54&language=en">News</a>
<ul>
<li><a href="/?page_id=149&language=en">Latest news</a></li>
<li><a href="/?page_id=151&language=en">Archived news</a></li>
<li><a href="/?page_id=153&language=en">Media-kits and images</a></li>
<li><a href="/?page_id=155&language=en">Media contacts</a></li>
</ul>
</li>
</ul>
<form action="http://pacifichydro.com//search-results/" method="get" id="search">
<fieldset>
<input type="text" name="query" id="search" class="search_form" value="" />
<input type="hidden" name="language" value="en" />
</fieldset>
</form>
<ul id="rotatingBanner">
<li style="background-image:url(/wp-content/uploads/2011/08/Globa-hero-1-web2.jpg);">
<div>
<p>Pacific Hydro is a leading renewable energy company, producing clean power from natural resources.<a href="/english/about/about-pacific-hydro/" title="About Pacific Hydro"></a></p>
</div>
</li>
<li style="background-image:url(/wp-content/uploads/2011/08/Globa-hero-2-web.jpg);">
<div>
<p>Powering a cleaner world for nearly 20 years.<a href="/english/about/our-history/" title="Our History"></a></p>
</div>
</li>
<li style="background-image:url(/wp-content/uploads/2011/08/Globa-hero-3-web.jpg);">
<div>
<p>A strong foothold in three of the world’s most rapidly expanding clean energy markets: Australia, Brazil and Chile.<a href="/english/projects/our-global-projects/" title="Our Global Projects"></a></p>
</div>
</li>
<li style="background-image:url( http://pacifichydro.com/wp-content/uploads/2011/08/Sustainability-hero-image.jpg);">
<div>
<p>Delivering renewable energy projects that achieve positive social, environmental and economic outcomes.<a href="/english/sustainability/" title="Sustainability"></a></p>
</div>
</li>
</ul>
<ul class="homePanels">
<li class="projects">
<h2>Projects</h2>
<a href="/english/projects/our-global-projects/">
<img src="/wp-content/uploads/2011/08/Projects2-221x150.jpg"
alt="Our Global Projects"
width="221" height="150"
/>
</a>
</li>
<li class="reports">
<h2>Sustainability Reports</h2>
<a href="/english/sustainability/sustainability-reports/">
<img src="/wp-content/uploads/2011/08/SR2010-221x150px.jpg"
alt="Sustainability Reports"
width="221" height="150"
/>
</a>
</li>
<li class="careers">
<h2>Careers</h2>
<a href="/english/careers/working-with-us/">
<img src="/wp-content/uploads/2011/08/careers-221x150px.jpg"
alt="Working with Us"
width="221" height="150"
/>
</a>
</li>
<li class="news">
<h2>Latest news</h2>
<ul>
<li>
<span>AUG<br />22</span>
<p>
<a href="/?p=539&language=en">
Energy efficiency program one of 25 to share in $90K Sustainable Communities Fund
</a>
</p>
</li><li>
<span>AUG<br />22</span>
<p>
<a href="/?p=537&language=en">
Sustainable Communities Fund Recipients Foster Social Cohesion
</a>
</p>
</li>
</ul>
</li>
</ul>
<div id="homeePageBonusMenus">
<ul>
<li><a href="/?page_id=15&language=en">About</a></li>
<li><a href="/?page_id=159&language=en">About Pacific Hydro</a></li>
<li><a href="/?page_id=83&language=en">Vision, mission & values</a></li>
<li><a href="/?page_id=87&language=en">Our history</a></li>
<li><a href="/?page_id=89&language=en">Our businesses</a></li>
<li><a href="/?page_id=91&language=en">Our Board</a></li>
<li><a href="/?page_id=93&language=en">Our Management Team</a></li>
</ul>
<ul>
<li><a href="/?page_id=21&language=en">Projects</a></li>
<li><a href="/?page_id=97&language=en">Our global projects</a></li>
<li><a href="/?page_id=99&language=en">Australia</a></li>
<li><a href="/?page_id=103&language=en">Brazil</a></li>
<li><a href="/?page_id=101&language=en">Chile</a></li>
<li><a href="/?page_id=27&language=en">Sustainability</a></li>
<li><a href="/?page_id=105&language=en">Our approach to sustainability</a></li>
<li><a href="/?page_id=115&language=en">Sustainability Reports</a></li>
</ul>
<ul>
<li><a href="">Products</a></li>
<li><a href="/?page_id=123&language=en">Solutions to power a cleaner world</a></li>
<li><a href="/?page_id=125&language=en">Solutions in Australia</a></li>
<li><a href="/?page_id=127&language=en">Solutions in Brazil</a></li>
<li><a href="/?page_id=815&language=en">Solutions in Chile</a></li>
<li><a href="/?page_id=42&language=en">Investors</a></li>
<li><a href="/?page_id=131&language=en">Ownership structure</a></li>
<li><a href="/?page_id=137&language=en">Corporate Governance</a></li>
</ul>
<ul>
<li><a href="/?page_id=48&language=en">Careers</a></li>
<li><a href="/?page_id=143&language=en">Working with us</a></li>
<li><a href="/?page_id=147&language=en">Current career opportunities</a></li>
<li><a href="/?page_id=54&language=en">News</a></li>
<li><a href="/?page_id=149&language=en">Latest news</a></li>
<li><a href="/?page_id=155&language=en">Media contacts</a></li>
</ul>
<!-- #homePageBonusMenus --></div>
<!-- #pageWrapper --></div>
<div id="footer">
<ul class="socialLinks">
<li><a href="http://facebook.com" class="facebook"></a></li>
<li><a href="http://twitter.com" class="twitter"></a></li>
<li><a href="http://www.youtube.com/user/pacifichydropl" class="youtube"></a></li>
<li><a href="http://www.linkedin.com/company/pacific-hydro" class="linkedin"></a></li>
</ul><ul>
<li>© Pacific Hydro 2011</li>
<li><a href='/?page_id=1737&language=en'>Privacy & Disclaimer</a></li>
<li><a href='/?page_id=1746&language=en'>Sitemap</a></li>
<li class="last"><a href='/?page_id=95&language=en'>Contact us</a></li>
</ul>
<!-- #footer --></div>
</body></html>
… which guts it down to 10k.
I don’t mean the above to be harsh – but reality is you’ve got lots of issues in there which really means it should be pitched and started over.
Thanks for your thoroughly considered reply.
-
Can you explain why html5 with a shiv.js is nonsense (and point me to some reading on this topic)
-
The animations on the menu aren’t optional. I don’t get to make those decisions.
-
Please explain how conditional comments indicate fundamental flaws.
-
With a dynamically generated list, it’s not worth me writing logic to decided whether to place the item in a list or not.
-
Fair point, if a little minor
-
I disagree
-
Good point
-
If only it was that simple.
-
The HTML is 3.6kb
The closing </li> tags issue that you highlighted are my concern for fixing this menu font issue, thanks for noticing those, I’ll have to address my menu generation logic. I’ll also replace those divs with </ul><ul>'s. Everything else works, so I’ll be leaving it alone, though will keep some of your points in mind for my next site build.
Thanks.
It’s broken when scripting is off, it’s rarely if ever reliable, and HTML 5 on the whole contains a bunch of unnecessary ALLEGEDLY semantic wrapping elements that are redundant, pointless, wasteful… but that’s just the tip of the iceberg since it loosens the coding rules to the point you can mix-and-match coding styles willy-nilly, making any attempt at validation pointless; on the whole HTML 5 seems carefully crafted for the people who for the past decade have been sleazing out HTML 3.2 and slapping a tranny doctype on it instead of writing code PROPERLY. Nothing like being in transition from 1997 to 1998. HTML 5 is the new transitional – that’s not a good thing. I fail to see ANY practical purpose in adopting it for deployment use as yet if ever! It’s a waste of time, resources, and to be brutally frank introduces nothing actually useful so far as markup is concerned.
Ouch. That sucks. I reached the point where I won’t take on coding sites if I can’t axe the flashtard, scripttard and other “gee ain’t it neat” nonsense that does more to annoy users than help. The code for that menu ALONE screams “how does I shot web”…
They are not necessary and typically anything you can do for a layout can be done all the way back to IE 5.5 without them!!! No joke… Haslayout here, the occasional rare ‘zoomfix’, not declaring padding or border the same time as width… Some simple precautions and you don’t have those issues. As I often say I’d rather declare ten lines of extra CSS that will be cached across pages than send three lines of code on EVERY page.
I actually think my comment was based on the invalid markup/opening/closing of the lists – though it was directed at that language list where the outer one really isn’t a list item.
It contributes along with the absolute URL’s for NOTHING to the overall code bloat.
Don’t underestimate it. Double quotes php-side are slower to parse, don’t preserve white-space, and most always result in convoluted hard to maintain code.
It usually is… or should I say is better in the case of your EMPTY anchors that provide no graceful degradation when images are off. (the social networking bar in the footer) – I’d either get text in there and use image replacement, or use IMG tags so that images off the page is useful.
No, the HTML is 16,031 bytes. It’s 3.6k after server side compression. Realistically there’s little reason for it to be more than 10k before compression.
It’s why running it past the validator is so important as it immediately points out mistakes like that. Browsers do NOT handle error correction the same way (even with the new alleged HTML 5 consistency it’s BS) so getting rid of errors in the markup is very important… part of why I still code using XHTML 1.0 Strict as the the more rigid formatting rules of XHTML and the “don’t do that” of STRICT help prevent making mistakes in the first place.
As opposed to that steaming pile of manure HTML 5 which basically says “Go ahead, vomit up the code any old way – we’re all a bunch of sleazeballs who don’t care about the quality of our work anymore.” – It literally exists to sell new books, impress the people who like higher numbers, and to placate the people who never embraced or understood STRICT.
Newer isn’t always better.
It also helps to be able to kick the photoshop junkie in the junk – that way you dont’ end up with narrow fixed widths that lock you into a fixed width layouts, sections that break if you use anything other than px metric fonts, illegible color contrasts between your text and the background it’s over, and the dozen other “not viable for web deployment” elements I’m seeing on the page. If your ‘designer’ handed you light grey text on a light grey background – it’s time to find another designer.
It’s probably an IE7 bug caused by the fade. Google “jquery ie7 cleartype bug” for possible fixes.
Thanks Victorinox, exactly what I was after
DS60, I know you don’t like HTML 5, and jury is out for me. I have seen your posts about it in different areas and you are the first person I have seen be so adamantly against it. After seeing some of your posts I Googled opposition to HTML 5 and cannot find anything reasoned out at length. That surprises me because I think your concerns warrant some consideration. Do you have an article anywhere where you, or anyone else who opposes it, lays out categorically the reasons you/they object? Personally, I think the validation tool is so useful and essential to my workflow that if HTML 5 invalidates validation, that’s a bummer. It would be like having a spell checker that thinks every word is spelled correctly, like “tac” instead of “cat.” What’s the use of that?
However, what do you think about Steve Job’s preference of the canvas element over Flash?
It really bothers me that everyone else seems so blind to it… Here on the forums we have a few non-committal “yeah, I’m not getting it either” or “I’m actually writing 4 Strict and then slapping the 5 header on it” without going into any real detail on it or having the nerve to stand up and say “Yes, it sucks – I’m not going to use it!”… but the lack of opposition really doesn’t surprise me given the lack of true opposition to people sleazing out pages as HTML 4 tranny either. It really seems like some people would rather make more work for themselves by not bothering to learn anything, than to take a few moments to think first to save time later.
Though that’s society as a whole – now, now, now, who cares how badly we shtup things for future generations. When the President of the US is dumb enough to call credit the “lifeblood of the economy”, with the average person being decades in debt by age 30, it’s hardly a shock people wasting time on shiny new toys without thinking about how badly they’re {expletive omitted} over everyone.
Closest I have is a year old blog post. I really should write up a serious breakdown of what I see wrong with it.
While it is not nice to speak ill of the dead, it’s irrational bull. Sync to audio? Low latency audio? Tweening? Maybe, SOMEDAY it will be ready, but it’s like comparing webM to h.264 – it’s cute; but ultimately not even in the same class thanks to a lack of features and support. (case in point my Atom w/ION powered HTPC can handle 1080p H.264 flawless, and struggles to manage 480p as webM.)
I mean, I’ve been doing some fun stuff with canvas to experiment…
http://canvastest.comoj.com/ (It’s on the crappy free host because the traffic to it was killing my dedicated)
http://www.cutcodedown.com/canvasGames/mech/template.html
… and it shows a lot of promise – but until HTML audio catches up and some simple things like point shading and deformations are added, it’s just a toy.
You have enemies? Good. That means you’ve stood up for something, sometime in your life.
– Winston Churchill