Border disappears when viewing in IE7/Vista

I'm sure this is something stupid and simple I've overlooked.. So I am hoping that someone here can see what I am missing here..

This only happens on the gallery pages.. The side border disappears when viewing the site in IE7 but ONLY under the Vista OS.. (At home I have IE7 and WinXP and the gallery pages display just fine..)
http://clients.overthehillweb.com/hairisle/index.php?main_page=page&id=2&chapter=0

What the :censored: is different with IE7 and Vista?

Screenshot of what's happening:
http://i25.tinypic.com/2gtq4jr.png

Here, it disappears in IE7, but not in IE8, both under XP.

If you look at the page with the IE Web Developer and select the contentMain div, you'll see 'inline style in the right window, with the background image under it. If you uncheck that, the border reappears. I can't tell where that's coming from, though.

stevesh:

Here, it disappears in IE7, but not in IE8, both under XP.

If you look at the page with the IE Web Developer and select the contentMain div, you'll see 'inline style in the right window, with the background image under it. If you uncheck that, the border reappears. I can't tell where that's coming from, though.Forgive me for being dense.. :smile: can you explain what you mean by the portion I highlighted??

Scratch that last comment.. Perhaps a better question is this.. It appears that my method for applying that border to the center content and nav menu is not working well under IE7 with Vista (and for some XP and IE7). Is there a better way to apply this border to the center content and the nav menu that WILL work with IE7??

If the border you're concerned about is the dark border, missing on the right in your picture of the problem, then I regret to inform you that none of it shows -- not right, left, top, nor bottom -- in Firefox, Opera or Safari, all the latest versions in Mac OS X. And in opera the header disappears after a brief flash to show it's there.

Having a good day? :frusty:

Rob

rstevenson:

If the border you're concerned about is **the dark border, missing on the right in your picture **of the problem, then I regret to inform you that none of it shows -- not right, left, top, nor bottom -- in Firefox, Opera or Safari, all the latest versions in Mac OS X. And in opera the header disappears after a brief flash to show it's there.

Having a good day? :frusty:

Rob
If you are referring to the border around the gallery images themselves (see image below), they are part of the actual gallery images and not something I applied to the images using CSS.

What I am trying to resolve is creating a border on the left and right of the center column. The way I've executed it is by adding this to my stylesheet:

 
#contentMain {
background-image: url(../images/contentBkgShadow.png);
margin: 0;
}

I then added the code for this ID so that the border is applied around the main table on the tpl_main-page.php

The border shows on all other pages except the gallery pages.. :frusty: (see yellow highlighted area has no border)

Yep.. I'm having a GREAT time.. :laugh:

Well whatever this is, it's DEFINITELY something in the DHTMLslideshow CSS that is conflicting with the main stylesheet.. If I remove the slideshow from the EZ page, then all is right with the world.. I hate this slideshow, it's been NOTHING but problems.. I WISH my client would just use a real gallery.. sigh

Ah, right. I see the problem now. That looks like what happens when part of the contents of a box (speaking of CSS calculated boxes now) is wider than the containing box but the containing box doesn't know it's wider. This can happen in two ways ...

1. the z-index of the contained item makes it appear on top of the containing box, or ...
2. the contained item is rendered by the browser after the containing box is rendered.

I suspect the latter in your case. Is there a preference setting for the slide show which can be tweaked?

Rob

rstevenson:

Ah, right. I see the problem now. That looks like what happens when part of the contents of a box (speaking of CSS calculated boxes now) is wider than the containing box but the containing box doesn't know it's wider. This can happen in two ways ...

1. the z-index of the contained item makes it appear on top of the containing box, or ...
2. the contained item is rendered by the browser after the containing box is rendered.

I suspect the latter in your case. Is there a preference setting for the slide show which can be tweaked?

RobRob you are a doll to continue to chime in here!:yes:

Based on the behavior when the pages loads, I would agree that #2 is the likely scenario that describes my issue..

It looks like there is some sort of preference setting in the javascript that goes with this gallery, but I'm not sure is any of these settings will fix the issue.. I am also not sure I know what all of these settings do.. (some are very clear, others I THINK I know what they do..) Of course I could always experiment huh?? :laugh:

Did I mention how much I HATE this slideshow gallery???:laugh:

       
    var displayWaitMessage=true;    // Display a please wait message while images are loading?
      
           
    var activeImage = false;
    var imageGalleryLeftPos = false;
    var imageGalleryWidth = false;
    var imageGalleryObj = false;
    var maxGalleryXPos = false;
    var slideSpeed = 0;
    var imageGalleryCaptions = new Array();
    function startSlide(e)
    {
        if(document.all)e = event;
        var id = this.id;
        this.getElementsByTagName('IMG')[0].src = 'images/' + this.id + '_over.gif';    
        if(this.id=='arrow_right'){
            slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
            slideSpeed = -1*slideSpeedMultiply;
            slideSpeed = Math.max(-10,slideSpeed);
        }else{            
            slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
            slideSpeed = 1*slideSpeedMultiply;
            slideSpeed = Math.min(10,slideSpeed);
            if(slideSpeed<0)slideSpeed=10;
        }
    }
    
    function releaseSlide()
    {
        var id = this.id;
        this.getElementsByTagName('IMG')[0].src = 'images/' + this.id + '.gif';
        slideSpeed=0;
    }
        
    function gallerySlide()
    {
        if(slideSpeed!=0){
            var leftPos = imageGalleryObj.offsetLeft;
            leftPos = leftPos/1 + slideSpeed;
            if(leftPos>maxGalleryXPos){
                leftPos = maxGalleryXPos;
                slideSpeed = 0;
                
            }
            if(leftPos<minGalleryXPos){
                leftPos = minGalleryXPos;
                slideSpeed=0;
            }
            
            imageGalleryObj.style.left = leftPos + 'px';
        }
        setTimeout('gallerySlide()',20);
        
    }
    
    function showImage()
    {
        if(activeImage){
            activeImage.style.filter = 'alpha(opacity=50)';    
            activeImage.style.opacity = 0.5;
        }    
        this.style.filter = 'alpha(opacity=100)';
        this.style.opacity = 1;    
        activeImage = this;    
    }
    
    function initSlideShow()
    {
        document.getElementById('arrow_left').onmousemove = startSlide;
        document.getElementById('arrow_left').onmouseout = releaseSlide;
        document.getElementById('arrow_right').onmousemove = startSlide;
        document.getElementById('arrow_right').onmouseout = releaseSlide;
        
        imageGalleryObj = document.getElementById('theImages');
        imageGalleryLeftPos = imageGalleryObj.offsetLeft;
        imageGalleryWidth = document.getElementById('galleryContainer').offsetWidth - 80;
        maxGalleryXPos = imageGalleryObj.offsetLeft; 
        minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;
        var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
        for(var no=0;no<slideshowImages.length;no++){
            slideshowImages[no].onmouseover = showImage;
        }
        
        var divs = imageGalleryObj.getElementsByTagName('DIV');
        for(var no=0;no<divs.length;no++){
            if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
        }
        gallerySlide();
    }
    
    function showPreview(imagePath,imageIndex){
        var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
        if(subImages.length==0){
            var img = document.createElement('IMG');
            document.getElementById('previewPane').appendChild(img);
        }else img = subImages[0];
        
        if(displayWaitMessage){
            document.getElementById('waitMessage').style.display='inline';
        }
        document.getElementById('largeImageCaption').style.display='none';
        img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
        img.src = imagePath;
        
    }
    function hideWaitMessageAndShowCaption(imageIndex)
    {
        document.getElementById('waitMessage').style.display='none';    
        document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
        document.getElementById('largeImageCaption').style.display='block';
        
    }
    window.onload = initSlideShow;

The border appears fine for me in safari, opera, IE8, IE7 and firefox

Ooba_Scott:

The border appears fine for me in safari, opera, IE8, IE7 and firefoxI may appear fine right now because in search of a possible Plan B, I am experimenting to see if running the gallery through an iframe is an option.. But it's good to know that it's working..:smile:

About half way down in that code, there is this line...

imageGalleryWidth = document.getElementById('galleryContainer').offsetWidth - 80;

I wonder if changing that 80 at the end of the line to something like 100 (at a guess) would cause the width of the slideshow to decrease, since that value is being subtracted from the width of, I think, galleryContainer?

Rob

rstevenson:

About half way down in that code, there is this line...

I wonder if changing that 80 at the end of the line to something like 100 (at a guess) would cause the width of the slideshow to decrease, since that value is being subtracted from the width of, I think, galleryContainer?

RobHey Rob.. You are such a doll to look at this..

So here's the thing.. If I use this in my stylesheet, the border renders correctly in all browsers, BUT it adds a dark "spot/dot" to all of the corners on the site.

#mainWrapper {
    background-color: #ffffff;
    text-align: left;
    width: 969px;
    vertical-align: top;
    margin: auto;
    background-image: url(../images/contentBkgShadow.png);
    background-repeat: repeat-y;
    background-position: center;
    }

See the dark spot in corner I am talking about.. (I know I know it's SLIGHT:laugh:, but it is there and my client noticed..)

So based on your earlier post, I was wondering if explicitly stating the width of the container that I applied the background to would do the trick..

So I tried this:

#contentMainShadow, #contentNavShadow {
    width:969px;
    margin:auto;
    background-image: url(../images/contentBkgShadow.png);
    background-repeat: repeat-y;
    background-position: center;
    }
```And yes the shadow in the corners is gone and the border renders in IE and Firefox, BUT there is a gap between the header and footer and the main content area when the site is viewed with IE..:frusty:

Sooooo.. After some time away from the computer and a glass of Merlot, I decided to live with the slight dark spot in the corner.. :laugh: It's sooooo slight and at this point, I'm feeling that it's worth no more effort to "fix" this.. (Interestingly the dark corner does not appear on the top level home "splash" page of the site -- weird..)

Making a note to self to NOT use this stupid :censored: gallery EVER again!!!:laugh:

Thanks for your help Rob.. :smile:

I can just barely see the dot. But tell your client it's not a bug, it's a feature. The trick is keeping a straight face while you say it.

Rob

rstevenson:

I can just barely see the dot.I know.. I was trying to appease her and provide good customer service.. It's stupid that such a fuss was made over this barely noticeable dot, and I feel stupid to have wasted ANYONE'S time on helping me "fix" it.. :blush: Of course at the time I thought it was a simple thing to "fix" it, and that I was overlooking something obvious...

rstevenson:

But tell your client it's not a bug, it's a feature. The trick is keeping a straight face while you say it.

Rob:laugh::laugh: That I can do!!! Thanks for your help.. I'm exhausted and going to bed.. :smile: