Guest Posted March 23, 2009 Share Posted March 23, 2009 Something appears to have gone a bit pear-shaped with the adaptive width on my main page. I only discovered this when looking at my site on another computer yesterday as it is very minimal on my screen but quite substantial on a laptop. The problem is that the right column is being pushed off of the right hand side of the screen when at the catalog level (index.php), but on every other page it still automatically adjusts to fit in as it should do. Does anyone know how to solve this please? Thanks Dan Link to comment Share on other sites More sharing options...
morehawes Posted March 23, 2009 Share Posted March 23, 2009 I have had a quick look at your site and can't see what you mean. Can you provide more info / something to look at? Cheers, Joe MacMan strikes again! Always backup first before listening to me! Link to comment Share on other sites More sharing options...
Guest Posted March 23, 2009 Share Posted March 23, 2009 Hi Joe, Thanks for taking a look. On the main front page (with the welcome text etc) the boxes in the right hand column like 'Shopping Cart', 'We Are Secure', 'We Accept' and so on, are slightly slipping off the edge of the screen so you have to scroll slightly to see the right hand edge. This is not hugely obvious on my screen, however, my parents came over for dinner last night and my Mum wanted me to look at something on her laptop for her. When I had a look at my site on it, those boxes were completely off of the screen. If you have a high resolution screen setting you may not be able to see the problem as it is a lot less apparent on my screen which has higher settings than the laptop. However, oscommerce should use adaptive width to automatically fit the screen to any resolution and does so on all of the other pages on my site. Any ideas? Dan Link to comment Share on other sites More sharing options...
morehawes Posted March 23, 2009 Share Posted March 23, 2009 Hi Dan, what screen resolution are they using? If I set my screen to 1024 x 768 then it chops off the entire right sidebar. 1024 x 768 is still a common resolution (around 30% of our visitors) so looks like you might need to root around in your CSS to fix this. It's this exact reason I prefer to use fixed with (a skinny 960px) for OSC (not that it's OSC's fault) because it's a nightmare trying to cater for everyone! Joe MacMan strikes again! Always backup first before listening to me! Link to comment Share on other sites More sharing options...
Guest Posted March 23, 2009 Share Posted March 23, 2009 Cheers, I'll take a look in CSS, however, all of the other pages seem to automatically shift to the correct size even on their laptop, it is only the front page that stretches over, so I'm guessing that there is some auto setting in there somewhere that isn't working properly on the front page. Link to comment Share on other sites More sharing options...
morehawes Posted March 23, 2009 Share Posted March 23, 2009 Hi again, i've had another quick look and it appears that your main image on the home page is stopping the page from shrinking any further and forcing the right sidebar over. This is also happening with the 'Gifts for Kids' catgory (the three images) but not as much. Hope that saves you some time today! :P Joe MacMan strikes again! Always backup first before listening to me! Link to comment Share on other sites More sharing options...
Guest Posted March 23, 2009 Share Posted March 23, 2009 :D I had just figured out that it was the big image on the front page and have made it smaller which just means that it doesn't look quite as good on the higher res. might work as a temp fix until I can figure something else out. Didn't notice it on the gifts for kids page, thanks for pointing that out. Cheers for your help, have saved me a lot of time and also a fair amount of pulling out of hair. Link to comment Share on other sites More sharing options...
morehawes Posted March 23, 2009 Share Posted March 23, 2009 I have run into this situation before - there are a number of things you can do. Detemrning the users browser size using javascript and displaying a image of an appropriate size (you might have say 3 different sizes) is one option. But doing as you have done is a nice no-nonsense solution ;) Joe MacMan strikes again! Always backup first before listening to me! Link to comment Share on other sites More sharing options...
Guest Posted March 23, 2009 Share Posted March 23, 2009 I find that a no-nonsense approach generally works well for me ;) I will take a look at the java based option later though, although I seem to fail miserably with javascript. I was trying to get some to work on that image on the front page that is causing an issue so that it would change to another image on mouse hover, but it just simply won't work. Link to comment Share on other sites More sharing options...
morehawes Posted March 23, 2009 Share Posted March 23, 2009 I know what you mean - but once you get the basic of javascript it's not too hard. For example, the swap image that you mentioned can be done like this: Add this function between your <head> tags (or between existing javascript tags): <script type="text/javascript"> function swap_img(src) { document.getElementById('my_image').src = '/my_image_location/' + src; } </script> Then use this for your image tag: <img id="my_image" src="/my_image_location/1.jpg" onmouseover="swap_img('2.jpg');" onmouseout="swap_img('1.jpg');" /> This is a really quick example and the images must be in the same location - but you should be able to see what needs changing to get it to work on your shop. Hope that helps! Joe MacMan strikes again! Always backup first before listening to me! Link to comment Share on other sites More sharing options...
Guest Posted March 23, 2009 Share Posted March 23, 2009 Thanks Joe, I'll give this one a try. Since posting earlier I had got it working using CSS but won't work properly in IE, only FF. Will have another go at Java, keep your fingers crossed :D Link to comment Share on other sites More sharing options...
morehawes Posted March 23, 2009 Share Posted March 23, 2009 Hi Dan, yeah the CSS method is much lighter and preloads the image and then just slides it out of the way so I would stick with that. Whats the problem in IE? Joe MacMan strikes again! Always backup first before listening to me! Link to comment Share on other sites More sharing options...
Guest Posted March 23, 2009 Share Posted March 23, 2009 In IE the link and consequently the image change only works on the very far left of the picture whereas FF has the whole thing working. Take a look, very strange. The CSS commands that I have: .rollover a { display:block; padding:130px 10px 10px 7px; font: bold 13px sans-serif;; color:#333; background: url("/images/wiv-rollover.gif") 0 0 no-repeat; text-decoration: none; } .rollover a:hover { background-position: 0 -140px; color: #049; } Link to comment Share on other sites More sharing options...
morehawes Posted March 23, 2009 Share Posted March 23, 2009 Try this (I tired it on a 400 x 160px image so you'll need to change this): CSS: .rollover a { display:block; width: 200px; height: 160px; background-image: url("roll.gif"); background-position: top left; background-repeat: no-repeat; } .rollover a:hover { background-position: top right; } Link: <div class="rollover"><a href="#"></a></div> Joe MacMan strikes again! Always backup first before listening to me! Link to comment Share on other sites More sharing options...
Guest Posted March 23, 2009 Share Posted March 23, 2009 You sir are a genius!! That has got it fixed. Thanks very much :D Somehow seems to have fixed the original width-based issue as well :D Link to comment Share on other sites More sharing options...
morehawes Posted March 23, 2009 Share Posted March 23, 2009 Happy to help :) Joe MacMan strikes again! Always backup first before listening to me! Link to comment Share on other sites More sharing options...
New 
Recommended Posts
Archived
This topic is now archived and is closed to further replies.