Background Image issues in IE

I have two problems occurring with background issues in ie if anyone could kindly help...

The first is a container div with a background image placed at the bottom-left of the page - as you can see here in ie, the signpost graphic is getting covered by the left-nav (which it shouldn't be), it's fine in other browsers: http://www.inside-guides.co.uk/brentwood/home-and-garden/interior-design.html.

I've only just transferred from a dev domain and it was fine there, but I can't figure out what's gone wrong.

Here's the CSS for the background container, although a lot more CSS comes into play e.g. the left-nav etc, but can be checked on a code inspector if possible:

#shell {width:100%;background:transparent url("/images/Structure/signpost.gif") bottom left no-repeat;}

The second problem is that while I'm using border-radius for the round corner section containers (e.g. right, middle and left-nav sections) for Firefox, Chrome, Opera and Safari, I'm using separate classes for ie with cut-up background images for the top left, right and bottom corners for fluid round corner boxes - a bit of a pain to set up!

As you can see, at the bottom of the top right box on this page http://www.inside-guides.co.uk/brentwood/pages/index.html, the side borders are bleeding below the bottom section - but only s开发者_运维百科ometimes! It's the strangest thing I've come across as it can be fine one minute, then suddenly bleed down! This is also in ie only of course...

I'd be very appreciative of a fresh pair of eyes and opinion!

Have you tried to set a height and/or display:block; for the #shell? The border problem is kind of weird. But could be related or have similar sollution.

I checked in IE7 and IE8 and it and it seems like webpage doesn't display the same information everytime I reload. Sometimes IE7 has the described problem, but you have a JS issue going on.. Both IE7 and IE8 show a Javascript error. My IE7 is configurated to show an alert when JS error occur and ask for confirmation to execute the rest of JS code. When clicking not to continue executing, sign post is visible but "About us, Map, etc" tabs render badly. If I click "Yes", signpost gets hidden and tabs are ok. If I reload after having selected "Yes", IE asks again the same question... but if I reload after clickin "No", IE remembers my choice.

I'm guessing that someone's IE8 may be configurated as my IE7 and have the same issue. I think you should correct the JS issue and then check if webpage renders ok or not.

The other problem you describe that only occurs "sometimes"... I think it's may be because of the same JS error, but again, correct the JS error and then re-test.

On the other hand, Firefox 3.6.16 is not rendering OK, content comes below the navigation bar. I checked it with Firebug and there's a sizing issue: browser calculates "middle" div width as 958px... if i change it to 955px (using the layout tool), everythings goes to its place... so that means that you should check your widths, padding and margins to correct it.

There is an error on line 625 of your page:

Uncaught ReferenceError: MM_preloadImages is not defined

Maybe that is breaking other JavaScript specific to ie?

Did you get everything copied across ok?

The second issue may be related to the fact that IE has (surprise!) an odd bug that I ran into using a similar technique. If the browser was IE, I was inserting 4 divs into the element and positioning them absolute in each of the 4 corners.

It turned out that this only worked when the parent container had even number dimensions. If the height was 20px, it looked fine. If it was 21px, the bottom corners were off by a pixel.

The solution was to first check the rendered height of the parent container via JS. If it was odd, I bumped it up 1px, then added the 4 corner divs.