IE Popups referencing wrong PrettyURL... FF Works Fine

[sonictrip]

Hi All,

Im having a problem displaying popups from CMSMS v1.2.3 in IE7, it seems to be giving the popup window the wrong URL by adding in "index.php/kitchens-2/" before the image url link. So i just get a page cannot be found error. Full URL thats not working:

cmsms/index.php/kitchens-2/uploads/images/kitchen_features/big/_W2S9974.jpg

The proper URL should read:

cmsms/uploads/images/kitchen_features/big/_W2S9974.jpg

In Firefox it pops up fine with the correct URL:

cmsms/uploads/images/kitchen_features/big/_W2S9974.jpg

Any ideas why IE does this but Firefox doesnt? Need to get this fixed asap please! thanks for any help!

[sonictrip]

Can anyone help me with this IE problem, my site is launching today but we cant really launch it unless these Internet Explorer problems are fixed...

Why would "index.php/kitchens-2/" be getting added to the popup URL?

Thanks.

[alby]

Why would "index.php/kitchens-2/" be getting added to the popup URL?

Have you problem with pretty_url disabled also?

Alby

[sonictrip]

Actually, now that you mention it, the popups work when Pretty URL's are disabled... So what would i need to change in Pretty URL's to get the popups working with IE7

Thanks for the reply!

[sonictrip]

Does anyone know how to solve this problem?

We need to have PrettyURL's turned on for SEO purposes so i really need to find a fix for the popup issue in IE6+

I notice the links that the popup creator uses are relational links so IE6 is sticking index.php/kitchens-2 in front of the relational link when the thumbnail image is clicked. I could use absolute links which might solve the problem until i need to move from the test folder to the live folder in which case all those popup links will need to be changed... so not the ideal solution...

How do i control prettyURL formatting, which php file should i look in and i'll have a mess around...?

[bilbothecat]

Why use pop-ups??? They are ugly and wont work if disabled.  Are you just trying to display an image from a thumbnail or linked text?

Try using CSS - you can get some very elegant results using the display: none; display: block; properties that work on hover so you do not have to close a window either.

Can let you have some examples if this is what you are after.

[sonictrip]

Yes please bilbothecat! I didnt even realise you could do hover popups using CSS, enlighten me please! 

[bilbothecat]

Hi again sonictrip

If you look at http://www.st-mach.com under the photos there is a view enlargement text link.  Just mouse over the link and a full size photo hovers up.

If you are looking for an image link then look at http://www.heartofenglandgroup.co.uk/garden_buildings/garden_buildings_intro.php the small images down the central part of the page all hover up enlargements when you mouse over them.

They are my own tweaks on the brilliant work of http://www.cssplay.co.uk which you should bookmark for lots of inspirational CSS craft.

I embed the css for these below and you can see the implementation from the page source on the above sites.  Obviously you need to play around with the positioning to suit your image size etc. and you can substitute px with ems or %.

Hope they give you the result you are looking for.

Code: Select all

/* hover image from thumb */
/* the background image is the small square in bigger square icon */

.enl {display: block; background-color: #fff; float: left; position: relative; background-image: url(/assets/imgup.gif); background-repeat: no-repeat; background-position: bottom right; padding: 5px 16px 0px 0px; border-right: 3px solid #fff;}

.enl img, .enl img a {width: 75px; height: auto; text-decoration: none; padding: 5px; border: 1px solid #b7b7b7;}

a.ve, a.ve:visited {text-decoration:none; position: relative;}

a.ve b {position: absolute; visibility: hidden; left: 0; bottom: -1px;}

a.ve:hover {text-decoration: none; border: none;}

a.ve:hover b {visibility: visible; height: auto; cursor: pointer; width: 300px; text-decoration: none; position: absolute;}

a.ve:hover b img {padding: 5px; border: 1px solid #b7b7b7; background-color: #fff; text-decoration: none; width: 300px;}

a.ve:active, a.ve:focus {width: 0; height: 0; text-decoration: none;}

/* hover image from text */

.enl {display: block; background-color: transparent; color: #007E3A; float: right; font-size: 0.7em; font-family: Verdana, Arial, Helvetica, sans-serif; position: relative; clear:right; margin-bottom: 10px;}

a.ve, a.ve:visited {text-decoration:underline; position: relative; color: #007E3A;}

a.ve b {position: absolute; visibility: hidden; width: 370px; height: 0; border: none; left: -280px; top: -250px;}

a.ve:hover {text-decoration: none; border: none;}

a.ve:hover b {visibility: visible; height: auto; cursor: pointer;}

a.ve:hover b img {padding: 10px; border: solid 1px #ccc; background-color: #fff;}

a.ve:active, a.ve:focus {width: 0; height: 0;}

[sonictrip]

Hey Bilbo, that is some very sweet popup code you have there! I definitely want to know how to get it working!

I've copied the CSS styles you posted to my stylesheet but nothing seems to be happeing on mouseover, what else do i need to do?

I tried the following code on the html page itself:

Code: Select all

<div class="feature"><img alt="Kitchen Features" src="uploads/images/kitchen_features/kitchen_feature_1.jpg" title="Kitchen Features" /><br /><div class="enl"><a class="ve" href="#nogo">Hover to enlarge<b><img src="uploads/images/kitchen_features/big/_W2S9974.jpg" alt="Corner Units" /></b></a></div></div></td>

It's displaying the normal thumbnail with another smaller thumbnail to the bottom right of it and when i mouseover, nothing is happening, any ideas?

Cheers.

[bilbothecat]

Hi Sonictrip

It looks like you are using the small image with the large image appearing when you mouse over the text "hover to enlarge".

The code here operates on the div class="enl". The div class="feature" is a block for the thumb image which has the class .image_right, and some text but I forgot to give you some starter CSS for that.  This should be:

Code: Select all

.feature { margin: 0px; padding-bottom: 15px; display: block; background-color: #ffffff; color: #666666;  z-index: 400;}
.image_right { display: block; top: 20px; right: 0px;  margin: 0px 0px 10px 10px; z-index: 500; float: right;}
* html .image_right { padding-top: 20px; } /* fixes IE6 bug */
.feature a, .feature a:visited { color: #666666; text-decoration: underline; }
.feature a:hover { color: #666666; text-decoration: none;}

So add that to your stylesheet then give your small image the class "image_right" and your html should read:

Code: Select all

<div class="feature"><img alt="Kitchen Features" src="uploads/images/kitchen_features/kitchen_feature_1.jpg" class="image_right" title="Kitchen Features" /><div class="enl"><a class="ve" href="#nogo">Hover to enlarge<b><img src="uploads/images/kitchen_features/big/_W2S9974.jpg" alt="Corner Units" /></b></a></div></div>

I have removed the br / and /td divs you had in there.

This should now work but you will need to play with the absolute postioning of the large image so it appears where you want.

That will be in this bit of the CSS:

Code: Select all

a.ve b {position: absolute; visibility: hidden; width: 370px; height: 0; border: none; left: -280px; top: -250px;}

The width is the width of the large image so set this to suit and left and top is the absolute position of it relative to the link text "hover to enlarge"

Hope this works for you.  Key thing is to tweak the CSS bit by bit so you know what you are affecting until you get the right result.

[sonictrip]

Wow, im having a really strange problem with this...

It's working on a blank test page with just the small image and the large image on it here:

http://www.cashandcarrykitchens.ie/imagestest.html

But when i put it on the page of the site that i want to use it on, it just looks like 2 thumbnails on the page with no hover functionality or anything:

http://www.cashandcarrykitchens.ie/CMSt ... n-features

(i'll need to remove the above link before search engines index it)

Any ideas what could be wrong on the above page that its not working but yet it is working on the imagestest.html page?

I've attached the stylesheets from the main website to the imagestes.html file and it works fine but not the other one, very strange, hopefully you'll be able to spot something in the source that might be causing it not to work?

Thanks a million for the help, this CSS image enlargement code is excellent, cant wait to see it working on the main site!

[sonictrip]

Wow, im having a really strange problem with this...

It's working on a blank test page with just the small image and the large image on it here:

http://www.cashandcarrykitchens.ie/imagestest.html

But when i put it on the page of the site that i want to use it on, it just looks like 2 thumbnails on the page with no hover functionality or anything:

http://www.cashandcarrykitchens.ie/CMSt ... n-features

(i'll need to remove the above link before search engines index it)

Any ideas what could be wrong on the above page that its not working but yet it is working on the imagestest.html page?

I've attached the stylesheets from the main website to the imagestes.html file and it works fine but not the other one, very strange, hopefully you'll be able to spot something in the source that might be causing it not to work? Maybe i have extra div classes which the enlargement code is nested in or something like that? Coz the imagestest.html page only has the code you gave me on it with nothing else...

Thanks a million for the help, this CSS image enlargement code is excellent, cant wait to see it working on the main site!

[bilbothecat]

Might be the tables??

But to make it easier for you to pick the bones I have put examples in single pages at:

http://www.gmworldwide.co.uk/hoverfromimage.html

and the other is

http://www.gmworldwide.co.uk/hoverfromtext.html

They should make it all crystal clear and also show how you only need one image, not a thumb plus large image.

Cheers