473,230 Members | 1,523 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,230 software developers and data experts.

Problem with OPERA CSS Float:left;

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
Zen Cart 1.3.8a

Site URL is www.limelites.co.uk

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



Screenshot in OPERA:



I've noticed that this in my stylesheet will spread the images across the page (even in Opera):
Expand|Select|Wrap|Line Numbers
  1. #productAdditionalImages {
  2. width:100%;
  3. float:left;
  4. text-align:center;
  5. }
  6.  
  7. .additionalImages img{
  8. border-left:4px solid #ffffff;
  9. border-right:4px solid #ffffff;
  10. border-top:0px solid #ffffff;
  11. border-bottom:4px solid #ffffff;
  12. }  
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:
Expand|Select|Wrap|Line Numbers
  1. #productAdditionalImages {
  2. width:auto;
  3. float:left;
  4. text-align:center;
  5. }
  6.  
  7. .additionalImages img{
  8. border-left:4px solid #ffffff;
  9. border-right:4px solid #ffffff;
  10. border-top:0px solid #ffffff;
  11. border-bottom:4px solid #ffffff;
  12. }  
As soon as I put this back into my stylesheet, the additional images nest nicely in all browsers EXCEPT OPERA.......

I've also noticed that taking out the float:left; to give:
Expand|Select|Wrap|Line Numbers
  1. #productAdditionalImages {
  2. width:auto;
  3. text-align:center;
  4. }
has the same effect.... it spreads the images across the page in ALL browsers....

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

Any help appreciated... I'm probably missing something from stylesheet but can't figure it out :-)
Apr 16 '09 #1
13 7885
drhowarddrfine
7,435 Expert 4TB
With Opera, you need to specify a height or width to the containing element or the images, forgot which will do it.
Apr 16 '09 #2
I see that specifying width does spread the images out, but some of my ads have 2 additional images, some have 6 and others have 3, 4 or 5 additional images.

The problem with specifying width is that it's not consistent with the ads.

All other browsers accept width:auto; but Opera doesn't seem to like that.

If I specify width:765px; then it's good for the 6 extra pics but ads with 2 extra pics have the images spread out with a huge space between them.

Any ideas on how to remedy this would be greatly appreciated.
Apr 17 '09 #3
drhowarddrfine
7,435 Expert 4TB
Yes, I know. If the individual images are the same width or height, and they appear to be, set one or both of those and it should fix it. It's a known bug in Opera (assuming it is a bug, not sure).

You could try giving the images a border and see if that fixes it without setting the height/width. You could try that with the enclosing element, too, just to see what happpens.
Apr 17 '09 #4
@drhowarddrfine
What do you mean by, "set one or both".... What would you change about the css below?

Expand|Select|Wrap|Line Numbers
  1.  
  2.    1. #productAdditionalImages {
  3.    2. width:auto;
  4.    3. float:left;
  5.    4. text-align:center;
  6.    5. }
  7.    6.  
  8.    7. .additionalImages img{
  9.    8. border-left:4px solid #ffffff;
  10.    9. border-right:4px solid #ffffff;
  11.   10. border-top:0px solid #ffffff;
  12.   11. border-bottom:4px solid #ffffff;
  13.   12. }  
  14.  
  15.  
Apr 17 '09 #5
drhowarddrfine
7,435 Expert 4TB
Set the height or the width or both to some px. I don't think you wanted to do that in #productAdditionalImages so try it in .additionalImages img. Even if you can't do that, it would be interesting to find out if that fixes it.

It would be interesting to find out if adding a border to #productAdditionalImages fixes the problem, too.
Apr 17 '09 #6
Setting the width to some px; does fix it, but the effect is no good to me because if there are 2 images the width would need to be 250px whereas if there are 4 images then the width would need to be 500px. So, that's why I am using width:auto; which works in every other browser, just not Opera.

Adding width to .additionalImages img has no effect at all on the images because this line refers to the little 'click to enlarge' images underneath those.

I added a border to #productAdditionalImages to test but again, this does nothing to help :-(

I wonder what the problem is here?
Apr 17 '09 #7
drhowarddrfine
7,435 Expert 4TB
@limelites
No, no. I meant to the images themselves, not their container.
I wonder what the problem is here?
It's a known issue with Opera. I talk to 4 devs who work there but I don't know if I can reach them over the weekend to ask them about this.
Apr 17 '09 #8
changing the width of the actual images is not a viable option I'm afraid since I use Image Handler to manage image sizes across the site. Besides, I already have hundred and hundreds of images uploaded and can't imagine having to resize them all.

If you can remember to ask your friends who work there then I'd really appreciate it. I bet they would know immediately how to tackle this :-) Thank you for this!
Apr 17 '09 #9
drhowarddrfine
7,435 Expert 4TB
I try not to ask them such questions because, obviously, if everyone did, they'd get deluged with such things and wouldn't talk to me anymore. Let's see if one of them responds with help, or just to yell at me. :)

I'm not saying you have to resize the images. I'm saying just set the CSS for the images to some height and/or width. So just add something like this:
Expand|Select|Wrap|Line Numbers
  1. .additionalImages img{
  2. width:100px;
  3. }
  4.  
Apr 18 '09 #10
adding width to .additionalImages img{ just affects the 'click to enlarge' image:

From this:



To this:



It has no effect in OPERA... at least not on the main, additional images.
Apr 18 '09 #11
drhowarddrfine
7,435 Expert 4TB
That girl is going to drive me crazy.

But setting the width does expand the images rather than overlapping, right?
Apr 18 '09 #12
This is now solved!! It wasn't the CSS that was to blame, it was the PHP.

Specifying the width in the array has cured it and OPERA now displays the additional images exactly the same as all other browsers:
Expand|Select|Wrap|Line Numbers
  1. List Box array generation:
  2.     $list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ' . 'style="width:135px;"',  'text' => "\n      " . $link);  
Thank you for helping me with this.
Apr 18 '09 #13
drhowarddrfine
7,435 Expert 4TB
So, can you get me a date with that model?
Apr 18 '09 #14

Sign in to post your reply or Sign up for a free account.

Similar topics

11
by: Jeff Thies | last post by:
I have a series of blocks that are float left that I need centered on the page. <div class="center" align="center"> <div style="width: 100 px;float: left">thumbnail 1</div> <div style="width:...
6
by: Herman Kuiper | last post by:
Hi, The HTML at the end of this message will render erroneously on IE (at least 5.0) and prperly on Mozilla (as I've been told). That does not surprise me, but I *would* like to find some...
2
by: patrick h. | last post by:
Greetings, I am encountering some issues regarding using float while desiring to set the height to 100%. This is likely due to my own misunderstanding of the way things actually function -- any...
6
by: TJ | last post by:
I've got a calendar that is based on the concept of lots of blocks that are spans with float:left. I would like to be able to have a detail section on the right side of the screen, so that when...
4
by: Chris Sharman | last post by:
I've a very simple page (intranet, but moved to http://services.ccagroup.co.uk/dtest.html for you - so the links are all broken). essentially it's just a list of links. I've split it into two...
1
by: RJ | last post by:
Hello! I am trying to lay out a left navigation column with a background image, where the left nav column runs the entire scrolled height/length of the page. The float:left column layout works...
0
by: McGeeky | last post by:
Hi. I am using DIVs for lay outs rather than tables but cannot resolve a catch 22. I need to use the float: left so that I can get DIVs to line up in rows however, float : left does not respect the...
4
by: erikirl | last post by:
http://www.hardwareforfree.com/ I'm trying to get the Consumer Gift Network image to be in the top right corner of the 800px area in the header. I have searched for hours and tried a lot of...
5
by: Gozil | last post by:
Hey, Is it possible to change line on a float object? For example let say I have one <b> tag, one <p> tag and one <img> tag: I want the <img> to have float right and the <b> to have float left...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.