Problem with OPERA Additional Images Display

[limelites]

In IE7, FF, Chrome and Safari, everything looks great but in Opera the display of the additional images in my product page looks awful.

This is a site that does attract foreign visitors who do use Opera, so it does matter.

Opera Version 9.64
Platform Vista

1.3.8a zen cart

Site URL is www.limelites.co.uk

Any help appreciated... I'm probably missing something from stylesheet but can't figure it out :-)

[limelites]

Screenshot in FF,IE,SAFARI,CHROME, ETC:


Screenshot in OPERA:

[rstevenson]

I had a look at the problem earlier today using Opera 9.64 in Mac OS X. I thought it was an interesting effect.

However, I don't use Opera except to check sites, so I keep it in default condition, with no helper things like Firebug or Developer tools, so I can't diagnose anything using it. And I saw nothing out of the ordinary when I peeked at your code and styles in Firefox.

I wonder if an Opera-specific forum might be the best place to find an answer. They, at least, would be more likely to know about any bugs that might be triggered by your code/styles.

I got to the Opera forums by selecting Community in the Help menu, and then finding the forums button in that page. I've no idea what they're like though.

Rob

[limelites]

Hi there,

I don't use Opera either. It's a nice looking browser but I prefer FF and just used it to check my site.

Thanks for the advice, I'll try on the Opera forums and see if one of those guys would know what's missing from my code :-)

[limelites]

I'm back onto this old chestnut again!

I have figured out that additional_images.php was giving the additional images an in-line style with a width of 100%. I got rid of that and am now trying to line the additional images up in all browsers. Opera is still giving me problems, but I've noticed that this in my stylesheet will spread the images across the page (even in Opera):

#productAdditionalImages {
width:100%;
float:left;
text-align:center;
}

.additionalImages img{
border-left:4px solid #ffffff;
border-right:4px solid #ffffff;
border-top:0px solid #ffffff;
border-bottom:4px solid #ffffff;
} 

The trouble with this though, is that when an ad only has two or three additional images, they're spread evenly across the width of the page instead of nesting closely together.

This is the CSS styling that fits for all browers EXCEPT OPERA:

#productAdditionalImages {
width:auto;
float:left;
text-align:center;
}

.additionalImages img{
border-left:4px solid #ffffff;
border-right:4px solid #ffffff;
border-top:0px solid #ffffff;
border-bottom:4px solid #ffffff;
} 

As soon as I put this back into my stylesheet, the additional images nest nicely in all browsers EXCEPT OPERA...

Maybe this info/discovery would help you come up with a tidier CSS styling to achieve what I'm after for all browsers including OPERA?

[limelites]

I've just noticed that taking out the float:left; to give:

#productAdditionalImages {
width:auto;
text-align:center;
}

has the same effect.... it spreads the images across the page in ALL browsers....

What do you think I could replace float:left; with??

[s_t_e_v_e]

I would try changing includes/modules/CUSTOM/additional_images.php to change all your divs for additional images to a fixed width, rather than a 'computed' number... which is trying to spread your images across the page...

line 102;

    // List Box array generation:
    $list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ' . 'style="width:135px;"',  'text' => "\n      " . $link); 

[limelites]

Steve, I don't think you know how genius you are!?!?! Do you know how many different people have looked at this and on how many forums?? It's been out there for weeks and no one had a clue what was causing it, then, along comes Steve and it's solved in 2 seconds.

I should have asked you ages ago but Steve, thank you thank you thank you.... GENIUS!!!

I had tried something similar with the additional_images.php file. I had tried removing the forced width like this but it wasn't helping:

    // List Box array generation:
    $list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ' . ' ' . '' . '',
    'text' => "\n      " . $link); 

But to actually specify the width like you did is just the ticket:

List Box array generation:
    $list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ' . 'style="width:135px;"',  'text' => "\n      " . $link); 

The thing is, I'd been using the ZC 1.3.8a stock file, so surely I'm not the only one with a ZC store who's additional images overlap in Opera??

[limelites]

hmmm, hang on though.... I've just noticed that it's done something to disable Lightbox. Enlarging the images now pop up in normal browser window, whereas reverting back to previous additional_images.php restores Lightbox functionality.

What could have caused that at all?

[limelites]

As soon as I remove the 135px; from the additional_images.php file, Zen Lightbox kicks in but Opera overlaps images. Weird why specifying this width does that.