Hello, Our website looks great on all major browsers, except for IE. For instance, on Mozilla/Chrome, it renders nicely, on IE the main content area goes on top of the footer. Link to an example: http://www.desklance.net/weblog Any suggestions on how to prevent this and fix it? Thank you.
Without checking it closer, I'd recommend adding an "overflow: hidden;" property to div.exchange and a "clear: both;" property to div.footer to see if that makes a difference in your IE browser.
I am referring to the <div class="footer"></div> that wraps the footer copyright note and links at the bottom of this page.
Could you post a screenshot dislaying the error that you're seeing in IE? I am unable to replicate that in any of the browsers I have installed on my computer. I should probably mention that my IE8 crashes if I don't give the page enough time to load and try using the scrollers for instance. My guessing is that the problem is because of the amount of javascript effects on the page that IE doesn't seem to be able to handle smoothly.
Here's a screenprint, IE8: http://www.desklance.net/document/screenprint/digitalpoint/2010-04-08-190800.png
No, on a PC. I was checking around and it seems that it loads pretty well to everyone else, so I am assuming it's a IE8 misconfiguration or bug I must have. Does the page takes you too long to load?
If you haven't yet, Google "ie css issues haslayout" IE has a 'haslayout' property that causes problems when using DIV layers as your site structure instead of tables. My understanding is that if your Div layers don't have a CSS 'Display' set, then IE assumes that is does not have 'layout' or something like that. Here's one site: http://www.satzansatz.de/cssd/onhavinglayout.html Here's another: http://reference.sitepoint.com/css/haslayout BTW - the reason your flash player shows up is because flash content sits on top of every other type of element on the page no matter what. No Z-index or anything will stop that. Hope this may help. Randy Mullins
Sorry forgot to mention - I did load your page in IE8 on my XP PC and got your same error. I'm not saying that the issue is definitely a HasLayout issue, but if you haven't yet I'd investigate it. I've had problems with it before.
Well that's painful as hell to watch load - 178 handshakes? Fixed metric fonts? 154 validation errors meaning it's not HTML, it's gibberish? Endless nested DIV's for no fathomable reason, invalid heading orders, missing headings, tons of javascript that doesn't even look like it's doing anything CSS couldn't handle, spans for what should be heading tags... Two minutes in and it's still trying to load the page, and I'm on a 22mbps connection. Looking at the HTML alone is enough for me to kneejerk into "throw it out and start over from scratch" mode, as it's the traditional laundry list of "how not to build a website" - that it renders properly in ANY browser is nothing short of a miracle - though I'm seeing four different appearances in four different browser engines so...
22mbps connection we would have issues too. Here (Portugal) we are using a 100Mb's connection, so site loads quite fast. All divs we have hold the layout in place, which ones do you think we should rearrange? Javascript, just jQuery and some extras required to run for instance, the Meebo bar on footer and extra effects, we have just added what's necessary.
With 178 handshakes unless your ping time to the server is 20ms, that's still real world over a MINUTE of handshaking with the server. (assuming a more realistic 400ms overhead per request) irregardless of connection speed. You'd go nuts fifty miles north of me where 33.6kbps as a long distance phone call is a good day. It's not a simple matter of removing some elements - you have a 44k HTML file delivering 4k of plaintext - there is little good excuse for that site to be more than 15k of markup, and a full proper rewrite would probably hover around the 10k mark. That's 3/4 of your markup as dead weight. You've got a javascripted menu for something that shouldn't be scripted except to give IE6 a hand, some goofy onload script that's makign the pageload hang unneccessarily in opera (and wouldn't be needed if you got rid of 90% of the "gee ain't it neat" bull)... but then, I'd never put a meebo bar on a website, or any of those 'extra effects' - since to me 140k is the upper limit I would EVER make a single page on a site, and I get twitchy when I break the 70k mark. Though being that it's joomla - the outdated/broken markup, complete accessibility /FAIL/ in terms of semantics and font-sizes, and hundreds of coding errors are hardly a surprise... I'll give you just a few small examples of changes - first, throw away ALL the meta tags that aren't doing anything you should need done... keep keywords, description, content-language, content-type, **** the rest as unnecessary bloat. Lose the IE conditional comment bullshit as also unnecessary since a few simple haslayout triggers and other simple fixes in the CSS combined with valid semantic markup would probably fix those issues you are hacking around with that bloat. Get rid of all the inlined scripted crap as a complete waste of time. "gee ain't it neat" isn't worth it when you end up with a two minute pageload on 22mbps - especially when most of the world is still on 768kbps or SLOWER. That means take a giant axe to that "starting" crap which bloats out the page and just makes it take longer to load - for no good reason. Saying "loading" just to make it take longer? What the **** is that even FOR!?! I've got no idea what this "leaderboard" crap is, it's not showing in my browser.... but you take this train wreck of DIV's... <div id="toolbar"> <div class="toolbar"> <div class="left"> <ul> <li><a href="/store/customer/account/">my account</a></li> <li><a href="/store/wishlist/">my wishlist</a></li> <li><a href="/store/checkout/cart/">my cart</a></li> <li><a href="/store/checkout/">checkout</a></li> </ul> </div> <div class="right"> <ul class="contact"> <li><a rel="nofollow" href="skype:desklance?call">call us</a></li> <li><script type="text/javascript" charset="utf-8" src="https://www.desklance.net/live/image.php?v=PGEgaHJlZj1cImphdmFzY3JpcHQ6dm9pZCh3aW5kb3cub3BlbignaHR0cHM6Ly93d3cuZGVza2xhbmNlLm5ldC9saXZlL2xpdmV6aWxsYS5waHAnLCcnLCd3aWR0aD01OTAsaGVpZ2h0PTU1MCxsZWZ0PTAsdG9wPTAscmVzaXphYmxlPXllcyxtZW51YmFyPW5vLGxvY2F0aW9uPXllcyxzdGF0dXM9eWVzLHNjcm9sbGJhcnM9eWVzJykpXCIgPCEtLWNsYXNzLS0-PjwhLS10ZXh0LS0-PC9hPjwhPkxpdmUgQXNzaXN0YW5jZSAoU3RhcnQgQ2hhdCk8IT5MaXZlIEFzc2lzdGFuY2UgKExlYXZlIE1lc3NhZ2UpPCE-"></script> <noscript><a href="/live/livezilla.php" target="_blank">live assistance</a></noscript></li> <li class="last"><a href="/store/contacts/">contact</a></li> <div id="livezilla_tracking" style="display:none"></div> <script type="text/javascript" charset="utf-8"> /* <![CDATA[ */ var script = document.createElement("script");script.type="text/javascript";var src = "/live/server.php?request=track&output=jcrpt&nse="+Math.random();setTimeout("script.src=src;document.getElementById('livezilla_tracking').appendChild(script)",1); /* ]]> */ </script> </ul> </div> </div> </div> <div id="header"> <div class="header"> <div class="logotype"><a href="/weblog/./"><img src="/image/header/logotype/blue/desklance-net.png"/></a></div> <script type="text/javascript" charset="utf-8" src="/js/body/blue/menu.js"></script> <div id="leaderboard"> <div class="leaderboard"> <script type="text/javascript" charset="utf-8"> <!--//<![CDATA[ var m3_u = (location.protocol=='https:'?'/advertising/www/delivery/ajs.php':'/advertising/www/delivery/ajs.php'); var m3_r = Math.floor(Math.random()*99999999999); if (!document.MAX_used) document.MAX_used = ','; document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u); document.write ("?zoneid=3&target=_blank"); document.write ('&cb=' + m3_r); if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used); document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : '')); document.write ("&loc=" + escape(window.location)); if (document.referrer) document.write ("&referer=" + escape(document.referrer)); if (document.context) document.write ("&context=" + escape(document.context)); if (document.mmm_fo) document.write ("&mmm_fo=1"); document.write ("'><\/scr"+"ipt>"); //]]>--> </script> <noscript> <a href="/weblog/t/advertising/www/delivery/ck.php?n=a0d6954a&cb=8922a63a5ba0b48e6e3f655e7ec64442" target="_blank"><img src="/advertising/www/delivery/avw.php?zoneid=3&cb=8922a63a5ba0b48e6e3f655e7ec64442&n=a0d6954a" border="0"/></a> </noscript> </div> </div> Code (markup): The div INSIDE the UL (invalid, only thing that can go between </li> and </ul> is whitespace!), EVERY one of those div should be unneccessary, #logotype probably should be a H1 with gilder-levin image replacement, Scripted menu that breaks scripting off - I mean, looking at that and then looking at what's actually rendering here - NONE of those scripts are even executing even with .js enabled (since #leaderboard and the advert after aren't even showing) meaning there's no legitimate excuse for any of that to be more than: <ul id="toolbar"> <li><a href="/store/customer/account/">my account</a></li> <li><a href="/store/wishlist/">my wishlist</a></li> <li><a href="/store/checkout/cart/">my cart</a></li> <li><a href="/store/checkout/">checkout</a></li> </ul> <ul class="contact"> <li><a href="skype:desklance?call">call us</a></li> <li><a href="/live/livezilla.php">live assistance</a></li> <li class="last"><a href="/store/contacts/">contact</a></li> </ul> <h1> DESK[l]ANCE Weblog<br /> <small>Makes it Simple</small> <span></span> </h1> Code (markup): At least in terms of what's actually showing for content here in FF and Opera. Lemme put it this way, this image ALONE: http://www.desklance.net/image/design/theme/header/background.png at 2 megabytes is 14 times the upper limit I would allow for an entire PAGE of a website - that's HTML + CSS + IMAGES + SCRIPTING. That's what a bloated train wreck from HELL you have there. I have to append my previous statement as apparantly your site makes the "document info" in the FF web developer toolbar blow up; your site is a TEN MEGABYTE DOWNLOAD. Whoever thought that was a good idea should be contemplating seppuku. There is NOTHING on that entire page even worth TRYING to save - it's that bad.
Leaderboard calls both background area and OpenX Ad Server banner. It's a grid that shows only with background, if banner exists. Like you said, it's Joomla, so we need to break things apart, like the header. If we disable the module, it desables the grid too, this way, removing it, and making the site look better without images breakouts. Why the banner does not shows to you, I don't know, but it should. Menu wise, we tried a few, not none fitted that good on the site. I agree that a CSS menu would be better, yes, but we havent found any that good. Meebo is an extra we added to make the site social, we just love it. We haven't noticed any provider with a Meebo bar either. It also allows the staff to logon into MSN, MySpace, AIM, etc... and get chat's via the bar. We'll remove the "loading" for now and see how it goes.
I have not looked at your site yet, but IE renders padding and some other elements of CSS differently than other browsers. One other person said the code looks like "gibberish". I would fix that, then look at the horizontal padding next. Good luck.