Close Image not working.

[Bloodyhail]

Hi,

I'm working on implementing highslide to display some videos by calling highslide from flash. So far we implemented the code and seem to work well in all browsers except IE7.

- Here is the url of the website: http://hsd.pixelstg.com/
- You activate the highslide when you click on one of the buttons/menus on the bottom.

any help i will appriciate!

[RoadRash]

Did you fix your problem?
I tested your page in IE 7 and couldnÔÇÖt see any problem. The popups opened and played the flash file inside.

[Bloodyhail]

Hi,

thanks for the reply. Sorry for the miss information the problem occures in ie8. I checked in ie6 and its displaying well there.

thanks again.

[RoadRash]

It seems like style="display:none" for the div containing the anchors for Highslide removes the closing X in IE8.
Try removing style="display:none" and the text links (d1, d2, d3...).

Code: Select all

<div>
		<a id="d1" href="demos/exterior_styling.html" 	 onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 941, height: 475, objectWidth: 941, objectHeight: 475,wrapperClassName: 'draggable-header no-footer',headingText: 'Prius: Estilo exterior'} )"></a>
		<a id="d2" href="demos/hybrid_fundamentals.html" onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 941, height: 475, objectWidth: 941, objectHeight: 475,wrapperClassName: 'draggable-header no-footer',headingText: 'Prius: Fundamentos de un híbrido'} )"></a>
		<a id="d3" href="demos/interior_styling.html" 	 onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 941, height: 475, objectWidth: 941, objectHeight: 475,wrapperClassName: 'draggable-header no-footer',headingText: 'Prius: Estilo interior (Sistema de navegaci├│n no disponible en Puerto Rico)'} )"></a>
		<a id="d4" href="demos/led_headlights.html" 	 onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 941, height: 475, objectWidth: 941, objectHeight: 475,wrapperClassName: 'draggable-header no-footer',headingText: 'Prius: Focos con tecnología LED'} )"></a>
		<a id="d5" href="demos/power_modes.html" 		 onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 941, height: 475, objectWidth: 941, objectHeight: 475,wrapperClassName: 'draggable-header no-footer',headingText: 'Prius: Niveles de poder'} )"></a>
		<a id="d6" href="demos/powertrain.html" 		 onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 941, height: 475, objectWidth: 941, objectHeight: 475,wrapperClassName: 'draggable-header no-footer',headingText: 'Prius: Mejoras al tren delantero'} )"></a>
		<a id="d7" href="demos/safety_features.html" 	 onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 941, height: 475, objectWidth: 941, objectHeight: 475,wrapperClassName: 'draggable-header no-footer',headingText: 'Prius: Seguridad (Sistema de navegaci├│n no disponible en Puerto Rico)'} )"></a>
		<a id="d8" href="demos/solar_roof.html" 		 onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 941, height: 475, objectWidth: 941, objectHeight: 475,wrapperClassName: 'draggable-header no-footer',headingText: 'Prius: Techo solar'} )"></a>
		<a id="d9" href="demos/touch_tracer.html" 		 onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 941, height: 475, objectWidth: 941, objectHeight: 475,wrapperClassName: 'draggable-header no-footer',headingText: 'Prius: Pantalla Tracer (Sistema de navegaci├│n no disponible en Puerto Rico)'} )"></a>
		</div>

[Bloodyhail]

Hi,

thanks for the reply. We tried removing the display:none style from the div and the anchor texts and still the closing image is not appearing.

I dont know what could be causing this.

thanks.

[RoadRash]

Im not sure what causing this either
You could try using full path for the closeX.png in the highslide.css file. I used the built-in Developer tool in IE 8 and added the full path. Then the close graphic appeared.

Code: Select all

.draggable-header .highslide-header .highslide-close a {
	display: block;
	height: 16px;
	width: 16px;
	background-image: url(http://hsd.pixelstg.com/assets/highslide/graphics/closeX.png);
}

2009-09-14_2206.jpg (246.05 KiB) Viewed 5144 times

[Bloodyhail]

Hi,

I tried putting the full path of the closeX.png and still not working. The only thing diferent in this implementation of highslide is that we executing the highslide from within the flash.

I dont know if this is causing this behaviour.

I'm gonna be doing some futher tests today to see if we can fix it.

thanks

[RoadRash]

The only thing diferent in this implementation of highslide is that we executing the highslide from within the flash.

I donÔÇÖt think thatÔÇÖs the reason, because in my flash test page (http://www.roadrash.no/hs-support/flash/) the closing X appears in IE 8 (ajax and iframe link).
It looks like it is a CSS issue, since the close function still works (you can close the popup by clicking in upper right corner). You can try disabling all other CSS than the Highslide CSS.

Or maybe you should try with the mac style close button instead ÔÇô as in this barebones sample page: http://www.highslide.com/examples/no-border.html
Remember to add useOnHtml: true; when using the closebutton on a HTML popup, and remember to include the highslide-ie6.css file.

Code: Select all

hs.registerOverlay({
	html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
	position: 'top right',
	useOnHtml: true;
	fade: 2 // fading the semi-transparent overlay looks bad in IE
});

[Bloodyhail]

Hi,

some status about this post. Apperantly highslide have this behaviour when used along SWFFit (http://swffit.millermedeiros.com/).

When we disable swffit or we add some text to the anchors the highslide close image appears. Is like the close image doesnt load when swffit is enable and when then anchors doesnt have a text.

Adding Text to the anchors: http://hsd.pixelstg.com/test.html
Here if you click first on one of the menu items, you will notice the highslide frame will not show the close image. Now if you click on the top anchor (Estilo exterior) you will notice that the close image will show and after that if you open one of the menu items in the flash you will notice the close image will appear also. (remember to clear cache)

Normal:
http://hsd.pixelstg.com/

we still investigating how to fix this. Any help will be appreciated.

[torstein.honsi]

I think this may be a hasLayout bug. These bugs appear from time to time in IE and make things disappear. They can be very hard to understand. My advice is that you work around it - if you know that a link containing a text will work, then that's the place to start. Try experimenting with giving all links a text, and hiding it by CSS for example. Maybe put a span within the anchor and set display:none to it. It wouldn't hurt your SEO either.