Problem with OPERA Additional Images Display

[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??