Member Avatar for Cerddaf

I've developing a web page under WordPress. It's got a complictaed header and footer and most pages have 3 cols full of boxes and images.

Runs fine under IE8, Firefox, Chrome, etc, but IE7 under XP runs dead slow.
Links take 10 secs to change colour when the mouse is over them, Spry drop menus take 10 to 15 seconds to appear, scrolling breaks up the entire screen. It is very bad.

Any suggestions? I've found several suggestions what to do if you are the web user, but this is a commercial site and you can't tell customers what web browser to use.

  • 2 Contributors
  • 4 Replies
  • 221 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by drewpark88

Dani AI

Generated

Good debugging from — isolating the inline styles and the page background narrowed the problem — and 's suggestion about script consolidation is on the right track. The note below complements those findings with practical, IE7-specific checks and safe fixes that often remove the last remaining slow bits without changing the site design.

Quick diagnostic checklist:

  • Capture network and asset timing with a proxy (Fiddler) and inspect DOM/CSS with the Internet Explorer Developer Toolbar or Firebug Lite.
  • Reproduce on a clean WP install: switch to a default theme and disable plugins to identify costly plugins or widgets.
  • Create a stripped test page and add parts back one at a time (menus, header, each JS file, background images) to find which component triggers the lag.
  • Temporarily remove heavy visuals (complex backgrounds, filters, opacity) and test with basic styles to confirm rendering vs. script cost.

Practical fixes and small examples (avoid inline styles, reduce reflows, give IE simple fallbacks):

  • Use a body class for user font-size choices instead of many per-element inline styles:
<?php
$size = ($_SESSION['fontsize']=='large') ? 'font-large' : 'font-normal';
?><body class="<?php echo $size; ?>">
body.font-large { font-size: 1.15em; }
body.font-normal { font-size: 1em; }
  • Load non-essential scripts at the end of the document (or use defer) and batch DOM updates (build HTML strings or use documentFragment rather than many single-node inserts).
  • Force hasLayout for flaky elements in IE with a tiny rule:
.selector { zoom: 1; } /* triggers hasLayout in IE */
  • Provide an IE-specific stylesheet via conditional comments to simplify graphics and remove expensive rules just for IE7:
<!--[if lte IE 7]>
<link rel="stylesheet" href="ie7-fixes.css">
<![endif]-->

Notes and cautions: avoid CSS expressions and heavy filters (they run frequently and are costly), give images explicit width/height to reduce reflow, and prefer small repeat tiles or simplified fallbacks for older browsers. Final verification should be performed on an actual Windows XP + IE7 setup since newer browsers' compatibility modes can be misleading.

Recommended Answers

All 4 Replies

Member Avatar for drewpark88

IE7 sometimes fails to handle large amounts of javascript properly. Try to condense your Javascript and lower the amount of HTTP requests if possible. To condense your Javascript visit this website: http://www.brainjar.com/js/crunch/demo.html

If this doesn't work, I am unsure of what else could be causing this. Either way, hope your issue is resolved and happy coding : )

Member Avatar for Cerddaf

Interesting, looks like we're centring in on the same area. Last discovery before giving up and going to bed was that if I remove all inline stylesheet then it goes like greased lightrning.
(I'd used inline stylesheets rather than a separate css because
a) I was still developing it, and it saved having to force a new download of every revision iof the style sheet
b) some of the styles are php dependant, mainly text size where the user can select small, large or normal size text.

So first job today is to see what happens when I move all this into a separate style sheet.

Member Avatar for Cerddaf

Fixed it today.
The other part of the problem was that IE7 is lousy at tiling in a background image.

Member Avatar for drewpark88

Haha, I know what you mean! I usually use this bit of code for my backgrounds. Here is just an example. There are probably better ways : )

body {
	color: white;
	font-family: helvetica, arial, sans-serif;
	background: #97adc2 url(../images/background.jpg) repeat-x;
}

This is good if you cut a small piece of your designs background and tile it on the x-axis and then have a color repeat down the y-axis. You probably already know this, but if not here you go! Hope I helped at least a little : )

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.