Resizing / Cross Browser Issues

[Guest Big Bill]

Hi,

I've got two problems with a site I'm trying to make, and I suspect they are related to similar problems with my style sheets (possibly some missing option/syntax).

Well, things look fine in IE when the window is maximized. If you resize the window, the right column slides under the middle column (and a few other weird things), and just makes the whole page look crappy.

When you try to view the page in FF, the "boxes" (such as categories or add to email) are all laid out over the top of themselves.

You can take a look at the shop here so you can see the problem for yourself:

www.lovinaonline.com/shop/

Any ideas? Please??? I've tried a lot of things on the style sheets, but nothing seems to work.

Thanks

[markscarts]

For part two, you need to change the height of boxTitle left and right -

Change it from 40px to 30px - I know the image is 40px, but you have to subtract the 10px padding from total height. That's just the way it works.

[markscarts]

As to the first item you mention, well, that is the price you are paying for coding a liquid width skin. The problem is that as the page collapses, it reaches a point where col left + col mid can't reduce anymore, and since the three columns are floating against each other, the right one has to give way and slip beneath the center one.

BTW, your first comment in css - LOL

But the rest of you css is not very interesting reading, like adding overflow: scroll and then later overflow: visible on the same class (colMid) etc.

Good luch with the site, it will have a unique appearance :blink:

[Guest Big Bill]

As to the first item you mention, well, that is the price you are paying for coding a liquid width skin. The problem is that as the page collapses, it reaches a point where col left + col mid can't reduce anymore, and since the three columns are floating against each other, the right one has to give way and slip beneath the center one.

BTW, your first comment in css - LOL

But the rest of you css is not very interesting reading, like adding overflow: scroll and then later overflow: visible on the same class (colMid) etc.

Good luch with the site, it will have a unique appearance

Thank you very much for your comments, I will certainly put them to good use.

Do you know of any way to lock the columns, so that they aren't floating against each other?

Yes, my apologies for some of the bad code - I am aware of this and it's on my list of things to clean up. The problem is that this website is for my mother. We paid a business to create a web page for us. 8 months later, all they had made was a photoshop graphic of what the web page "may look like". So we sacked them, took the graphic and went to somebody else. This somebody else delivered a product to us that was basically a default install of CubeCart (with some very minor changes to images) and then told us that what we wanted done just wasn't possible. I knew that wasn't true, and so I set about making the product my mother wanted. In the process I realised that the people who had done the web page for us had written some bad CSS as well - I guess they didn't figure anybody would read it.

I only really know the basics of CSS. I'm certainly no expert on web design - I program industrial computers for a living!

[Guest Big Bill]

Changing the height of the background picture from 40px to 30px does nothing. Neither does a million other little things I tried last night.

I'm at my wits end here!

[markscarts]

You misunderstood my comment. You should not have changed the height of the image, but of the DIVISION CLASSES,

"you need to change the height of boxTitle left and right"

in the stylesheet.

Sorry my advice is frustrating you. PM sent.

[jerseyjoe]

I'm not a shill for Mark - or anyone - but speaking as someone whose CSS skills are limited, I have found him to be responsive, professional, skillful - and even cheap.

My skills related to CubeCart are in other areas. While I'm good at selling carts to other people and I know something about layouts that sell effectively, I'm not so good at the codes to customize them. When I need help, I turn to Mark and others like him who can be found at www.cubecart.org. At one time or another I've bought code from most of the principal players over there and never once been dissatified.

Now to comment on issues where I think I know what I'm talking about . . .

That 259px-high header is a huge waste of valuable real estate. Putting it atop every page only compounds the problem. Look at it this way - A common 600 by 800 display (there are milllllions of them out there and you want to sell to them, right?) actually offers only about 450 pixels high of unused display space most of the time after you deduct the browser's tool bars and all the crap that people put at the top and bottom of the screen - or was installed for them when they bought the computer and they have no idea how to change.

If you put a 250px-high banner at the top of every page, that means your products are displayed in a mail slot that requires scrolling down on every page just to get to the products. But what's the point of a huge logo? If the person visiting your site doesn't know the name of the store by the time they are there, there's some other issue, such as inadequate IQ or illicit drugs, or too much time on the iPod, going on that not even a 500px-high logo can help.

A logo takes its power from repetition, not from size. Look at how people who really know their web users treat the logo. Look at www.barnesandnoble.com/, www.amazon.com, www.jr.com/, www.cbs.com/, www.gm.com/ and so on.

And by reducing the size of the logo - and height of the banner, look how much more product can be displayed without scrolling down: www.vikolya.com, www.whirlpoolparts.co.uk, or even www.cubecart.com itself!

Good luck with your site.

Regards, Joe

[Guest how2ed55]

I'm having the eact same problem with my site

www.howtoed.com

In other browsers evreything goes all over.

I'm still a newbie at this and with css's. Where exactly do you change the height of the Division Class???

.boxTitleLeft, .boxTitleRight {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 70%;

color: #000000;

background-image: url(../styleImages/backgrounds/boxTitleBg.gif);

width: 175px;

height: 13px;

padding-top: 2px;

padding-left: 5px;

background-repeat: no-repeat;

font-weight: bold;

All I see is changing the size of the image.

any help gratefully appreciated.

Thanks so much for help and patience!!!

K.