Product alignment in IE vs FF

[TraceyHand]

OK, I've searched the forums several times over (honestly, I have) and I've found some references to similar problems but not with a solution I understand!

I've done a trial upgrade from 7.0.7 to 8.5.1 and am gradually tweaking bits and pieces.
When I view my site in Firefox..the product layout (title, image and description) is nicely centred and spread across the centre section of the page.
I always use FF so this is how I've always seen it.

However, while I've been playing with V8, I've been viewing in IE(6) also..and the product layout seems to be squashed into about 2/3 of the available space with a wide gap between that and my right menu.

My WIP site is www.budget-bumps.co.uk/acatalog/test/acatalog and it's obvious on any of the product pages such as http://budget-bumps.co.uk/acatalog/t...g/Nursing.html
(this site is very "work in progress" btw and is something of an experiment right now LOL)
As you can see, if you view in IE and FF..the layout is different.

It's not specific to V8 as I've discovered my current V7 site displays the same, but I'm keen to "fix" it in V8 as that's the one that'll be up and running soon enough.

So, if anyone has time, in laymans terms..what's causing this and how, with my limited (but willing to learn) ability can I fix it?

Many thanks

[jont]

Just uploading a site so can not see everything at the moment but I can tell you that you have the following attached to the page:

6 x actinic.css
6 x theme.css
1 x pop_style.css
1 x collapso-5-Standard.css

.... which is not good

[TraceyHand]

Thanks for looking, especially so late!

To be honest, anything you see is how it's upgraded from V7.
The only thing I have added is the collapso menu so anything else that is there is from V7.
In layman's terms (because I'm very new to V8 and am unfamiliar with css etc) what is bad about it and what *should* there be?
Thanks again

[Duncan Rounding]

Looks like something's got messed with the section layout. Take a look at that and I tthink you will see refernce to actinic.css (at least) which shouldn't be there. css references should only be in the outer layout.

[TraceyHand]

thanks, Duncan,
I'll take a look
Very much appreciated

[TraceyHand]

ok...didn't find any css references in the section layouts but did in the product layouts.
However, removing them didn't make any difference to the layout in IE.

Anywhere else I could be looking?
I assume this is the most likely reason for the alignment problem in IE, is it?
Thanks again

[Duncan Rounding]

Not sure about your layout problem Tracey but I use CallingID on my browser and your site incorrectly shows as high risk which may put some people off. One of the reasons being that the domain name contains the letters 'mps'. I don't know how many people use CallingID but it might be worth you checking this out.

You can report this misclassification here:
http://callingid.com/InternetFraud/misclass.aspx

[pinbrook]

If you take a peek at the css at rannochsmokery.co.uk

you may findthe css I use to centre the products, at the mo I can't remember (and I'm off out to lunch!)

see this page is IE rannochsmokery.co.uk/acatalog/poultry-game.html to check the centreing is as you want it.

Claveat: the css may be messy, its the first v8 site is did, I'm just about to embark on a tart up to get the site ready for Xmas.

[EDIT] got a feeling i had to revert to using a tabled product design, so i could centre the table - so this may not help, what layouts are you using for section list layout? [/EDIT]

[ackerman]

I haven't used v8 yet, but I do know that CSS can be very difficult to get right in both browsers. This is more to do with Explorer being a bit quirky and not following the correct rules. You always need to test out sites in both browsers.

Explorer does not respect auto values for margins (for example) if you want to centre a page, so you need to add "text-align: center:" to the body selector. You also have to specifically set margin, padding and border values. This is because different browsers have different default values.

I prefer to fix the width of pages to 770 pixels. This then fits on a 15" flat screen without the need for scroll bars. If you fix the width you have much better control over what the page will look like on any computer.

From a quick look at your test site, I immediately see that different pages have different widths (probably using different css files). This is very confusing. I hate sites where you have to scroll sideways all the time.

The good news is that it should be easy to fix in css, as uniformity is its major benefit. Not sure yet though how easy Actinic makes this, as I have zero experience with V8.

Brian
www.ackermanmusic.co.uk

[TraceyHand]

Brian,
Your reference to horizontal scrolling may have just given me an answer of sorts.

My screen set up is 1280x800 and, in IE, I see a space between the product information and the right hand (green) sidebar.
However, if I set my screen to a lower resolution, it looks just as it does in FF.

Also, testing it at 1024x768, I can see the scrolling you mentioned in the section lists..I'll take another look at that
This is probably why I had my sections set in 2 columns (designed on PC set at 1024x768) and, in V8, I have just changed them to 3 thinking there was plenty of room.

It's given me something to think about though, thanks

[TraceyHand]

Duncan,
If you get a minute..could you check my site with CallingID again, please?
I submitted a misclassification ticket and they tell me it's sorted but obviously, I have no way of knowing that.
Much appreciated

[TraceyHand]

OK, I've spent considerable time on this trying to get the layout to look ok in IE and FF AND trying to solve the horizontal scrolling issue with 1024x768 which I understand is still the most common resolution in use.

I *think* I've sorted the scrolling but only by reducing my section pages back down from 3 columns to 2 again. The problem with that, of course, is that it looks "gappy" in my 1280x800 resolution but I can't have the best of both worlds.
I may source or produce some larger images to use instead of my standard section image which will fill in the gaps slightly, and add in some descriptive text for every section (even though, from the shoppers POV, it's not really necessary)

As for the alignment, well, I appear to have solved the problem by much experimentation
There are a few pages I still need to look at but it's looking better (I think?)

Thanks to everyone who helped

[Duncan Rounding]

...could you check my site with CallingID again...

I re-checked and it looks the same - however I'm not sure how the data filters through or even if it is cached on my machine. I also reported your site as verified ok. Perhaps it takes time.

You can download and try the free CallingID toobar for yourself if you want from here:
http://www.callingid.com/Download.aspx

[TraceyHand]

ok, cheers Duncan

I might download that a have a look over the next few days just to check.
Many thanks

[ackerman]

Tracy,
Yes your site is looking much better now. I still think you should look at the lowest resolution of 800px, but your current site does look much better.

I am just wondering if you might be better starting with a clean css layout, and taking it from there. Presumably this would get rid of all your surplus code and you can start again, just keeping your products. I am sure the code would then look much cleaner.

Just keep a backup, in case it all goes horribly wrong. If you look at my site done in V6, it should be centred and be the same in any browser. OK, it might not fill the screen on your particular computer, but I do have control over what the layout will be, no matter what the screen size or browser.
regards,
Brian
www.ackermanmusic.co.uk