Stretch bar no longer working in IE

HTML & CSS
1

Hi,

I have a site originally designed as a static site http://www.aaro.ca. Recently the customer wanted me to turn the site into a CMS. I have used Wordpress and developed a template similar to their static site, for the moment this site is http://test.liviam.ca

If you go to http://www.aaro.ca then you can see the blue gradient bar beneath the main menu. The relevant css to get the 2px graphic that is stretched to create the bar is:

.stretchbg {
    position:relative;
    display: block;
    height: 52px;
    margin-top: -41px;
    width: 100%;
    z-index:3;
}

.stretchbg img {
    height: 52px;
    margin: 0;
    padding: 0;
    z-index:3;
    display:block;
}

if using I.E. 8 you look at the same bar on the http://test.liviam.ca then the blue bar does not stretch correctly. However on the static site the http://www.aaro.ca site does render correctly on I.E. 8.

In Wordpress, the plugins and so forth use inline css and load css styles on their own that could effect the way this is rendering. However using Firebug the styles that are being applied don’t differ between the two sites yet the Wordpress bar looks like it was vertically divided?

Do you think this is CSS related?

Regards,
Steve

2

I’ve had a look and I can’t see a difference between ie8 for both sites and Firefox.

I must be looking at the wrong thing :slight_smile: Do you have a screenshot of the problem as the menu background seems to extend ok in IE8. You do need a min-width on the menu bar to stop the white gap when you scroll at narrow widths.

3

Hi Paul

This is what I see on the Wordpress site:

and on the static site render on the same browser/computer as the screen capture above, it is correct:

Is that not the way you see it as I tested it by remoting into Windows machine outside our network and it looked the same?

Thank you about the tipe for min-height!

Regards,
Steve

4

IE8 looks fine to me and browsercam seems to confirm its ok in xp.

IE7 is showing the half bar though but I assumed you weren’t supporting IE7.

5

Hi Paul,

Thanks, I am not sure why it is rendering that way on my network? The only thing I can think about is that our firewall is caching and not serving the graphic correctly? Thanks for checking it out.

Actually with I.E. 7 I have a conditional comment that renders just a blue bar for I.E. 7 but this CSS is not active in the Wordpress site yet.

Regards,
Steve

6

Is your server adding code above the doctype as that will cause IE to go into quirks mode?

Vista IE8 is also looking good according to browsercam.