I can’t seem to figure this out for the life of me…
My Basket - Core Learning Resources
This page won’t show anything in IE7’s Print Preview, but for IE8 and IE9 both work? It has also been tested in Firefox 3.6, Firefox 4, Safari 5 and Chrome 11, they all work great for printing that page in PC and OSX.
Any ideas?
Thanks,
OK, I have determined that it’s the dropshadow across the top, right, bottom and left of the Content div which is causing this. Still trying to find a fix…
I don’t have a real IE7 to test but iestester’s ie7 doesn’t show a blank page in print preview.
Just remember to remove all floats and heights on main containers etc and things like overflow:hidden.
You’re using HTML 5 and CSS3… and wondering why IE7 has problems?
Do yourself a favor, throw that away, and use one of the RECOMMENDATION HTML’s (4 strict or X1.0 strict) with CSS properties that actually exist if you care about supporting legacy IE.
If nothing else, STRICT would make the validation MEANINFUL instead of the sloppy loose 3.2 in HTML 5’s clothing.
You may also wish to consider you have what is BLATANTLY tabular content – rows related, columns related… so it may in fact be semantically correct to use a table on those… It would certainly be less code than the DIV and class hell you’ve got going on now. Likewise all that inlined presentation and style definately needs an axe swung at it, and some proper use of heading tags wouldn’t hurt either. Similarly this is 2011 not 2001, you don’t need clearing DIV anymore, you should probably switch to a sans-serif font for legibility sake since serif fonts are difficult to read on screen…
… and even your comment placement could be causing rendering bugs in both legacy IE and some builds of Gecko based browsers (like FF 3.6) especially since you are building a table using floats and DIV.
Of course, the HTML 5 doctype is even more of a head scratcher given the total lack of HTML 5… making it LITERALLY HTML 3.2 with a more recent doctype slapped on it.
MUCH of your problems also likely stems from rather than using HTML and CSS that works everywhere, you’ve resorted to IE conditional comments to throw targeted code at each version of IE. (and I mean EACH version!) – waste of space in your markup and completely unnecessary given how simple the page layout is.
I also would advise against the fixed background as it makes scrolling slow/painful for lesser machines… though the uber nest nest nest and nest some more method of building your corner shadows is as you said a likely culprit. This is one of the few cases where I’d actually be tempted to say “go ahead, use CSS3’s shadow and forget the images” – IE8 and lower users don’t get the drop shadow, big deal.
Really though, there’s a reason you don’t see drop shadows over textured backgrounds a whole lot online… usually it’s when you have to kick the graphic artist square between the legs when they cry “but I can do it in photoshop”
I mean, you’ve got 81k of markup for 5.7k of content – even allocating 100 bytes per form element there’s no excuse for that to be using much more than 20k of markup, I could probably bring it in under 15k… Which is to say more than 75% of your HTML is unnecessary bloat. Though I suspect all those “hidden inputs for nothing” just to avoid sending deletions via getdata (which you could actually manage to still do by just using input[submit] with a value attribute on the submit.
Oh, you’ve even got some really strange/nonsensical stuff – like:
class=“Adventures of Rabbit and Bear Paws: Vol.3 True Hearts”
I think you meant those to be ALT… not Class.