Basic Webpage runs slow on IE 7

Question

I'm trying to develop a prototype web page for my website. So
far its nearly finished and runs fine on Firefox 2 and Opera 9, but
falls to pieces on IE 6 and earlier and seems to make IE7 overload
most pc's processors. Could someone give me some feedback on the
code found at:
http://www.csmayores.org.uk/csmark2
I've embedded the CSS code within the page's header so you
can easily see it.
This website is aimed at the elderly so all measurements are
done using relative units (em) to allow browsers such as Firefox to
resize the screen content proportional without loss of integrity
(So that the visually impaired can zoom in); could this be causing
the problems?
Thanks in advance
Chopo

Answer 1

It seems the source of the lagging on my system is the shadow
on the background of the main text panel the
“mainPanelBG” div tag. The shadow is a png
(Images/CSM_Shadow.png) with an alpha (transparency) channel. It is
only 10px by 10px large, but I doubt its the image size
that’s the problem but rather the fact that IE7 probably
doesn’t do a very good job of tiling a transparent png
background over another background. If it has to go, I’ll get
rid of it, but it seems a shame, especially as all the
“proper” (ok I’m just kidding don’t slate
me for microfobia) web browsers seem to cope fine with the webpage.
To see the difference the lack of shadow makes try the
following two versions of the website on IE7
http://www.csmayores.org.uk/mark2_Shadow
http://www.csmayores.org.uk/mark2_noShadow
The problem is especially noticeable when scrolling up and
down the webpage.
I admit, some of the images need optimising, but I don't
think this is contributing much to the problems I am experiencing
as I have tested the page without the images. The one on the left
margin is optimised as is the background (sort of, as I originally
made it 2000 pixels long, this is just dumb and I am going to
redesign the bottom and make it just 1000 pixels long. This should
half the file size), the one that needs work on is the yoga session
pic.
Can anyone suggest any shadow workarounds for IE7 otherwise
once I separate the CSS from the main webpage ill resort to using a
different CSS document without the shadow for IE.
One solution I am working on is tiling the shadow on the
Right hand side only along the y-axis. This seems to be working but
it makes it more difficult to offset the shadow downwards as well
as to the right; however this is a miner compromise.
See it at:
http://www.csmayores.org.uk/mark2_Shadow2
Chopo