css layout issue IE vs Firefox

[LouPhi]

We are transferring a site from version 7 to 9, attempting to keep the look as much the same as possible.

The site can be viewed at: http://trials.actinic.com/trials/trial60210/

Homepage and other non-product pages use a layout with a left hand menu area, a middle area for content, and a right hand menu area. Product pages use another layout with just the left hand menu and a larger content area with no right hand column....

In Firefox (my preferred browser) homepage looks just fine, however linking to any of the product/sections from the left hand menu you can see the main content slips behind the menu area - something to do with widths maybe?

In Internet Explorer (no comment) homepage/non product pages are a different story. Left hand menu sits on the left - great. Centre and right hand content sit BENEATH the left hand menu, left justified.

Also, the entire site should be centred on the screen, regardless of resolution - in Firefox its fine, in IE everything is left justified. The #wrapper DIV has a width of 980px and a margin-left/margin-right of 'auto'.

Anyone got any ideas?

The CSS for the homepage and non-product page layouts is:

#wrapper {
	width: 980px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #FFFFFF;
	padding: 0px;
	text-align: left;
}
#content {
	width: 100%;
	padding-left: 2px;
	padding-right: 2px;
	margin-top: 10px;
}
#content div {
	padding:0px;
	float:left;
}
#content1 {
	width: 160px;
}
#content2 {
	width: 600px;
	margin-left: 10px;
	float: left;
}
#content3 {
	width: 160px;
	margin-left: 10px;
	float: left;
}

The CSS for the product page layouts is:

#wrapper {
	width: 980px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #FFFFFF;
	padding: 0px;
	text-align: left;
}
#content {
	width: 100%;
	padding-left: 2px;
	padding-right: 2px;
	margin-top: 10px;
}
#content div {
	padding:0px;
	float:left;
}
#content1 {
	width: 160px;
}
#content-main {
	width: 800px;
	padding-left: 10px;
	float: left;
}

All help gratefully received... customer is expecting a finished website last Friday (!!)

[Rich Brady]

If you reduce this css:

#homemenu a, #homemenu h2

to:

width=150px

It should solve the FF problem and maybe even the IE one. You column width add up to your overall width, but the left padding is breaking the layout I think.

[LouPhi]

Well sadly thats not helped... the left hand menu doesn't appear to be the problem, and I've checked my overall widths of everything, counting their actual width, and any padding and I'm within the maximum width....

Anybody else got any ideas? Its going to lose me sleep tonight this one!!!!

[leehack]

Don't use margins IMO, IE historically has problems with this, randomly doubling them. Float all containers left and use padding inside to do the spacing away from the edges. Might not be that, but that's the best way i've found over the years. If you firebug the code, you can also see that FF is struggling with the center column, with the containers within wrapping over the right column when inspected. You have more tables in the central area than our local restaurant. Each has different setting on padding, cellspacing, some without anything defined, that can't help either as browsers handle this in their own ways.

I'd expect the above changes to fix things, there's no real gain from doing a CSS layout if you fill the central area up with so many tables. You may as well stick with tables and ensure that you can sleep easy at night.

You do a lot of global div styling, things such as (#content div) will often take chunks out of your backside later down the line in my experience, you end up having to override it too often as the design grows.

[leehack]

It looks like it is the 4th table down in the central area, the one with the padding of "10". It's being told 100% width and 10 padding, i suspect that is the issue in IE as that seems to play ball in FF when amended also.

[LouPhi]

With regard to the amount of tables (haha) the index page was put together by a SEO company so I can't comment no that. However its not just this page which has problems... take a look at http://trials.actinic.com/trials/trial60210/faq.htm which uses standard Actinic fragments.... this has the exact same problem as the index page.

So whilst I'm sure your comments are valid (and are appreciated), I don't think they'd fix the issue

Any other ideas?????!!!!

[leehack]

So whilst I'm sure your comments are valid (and are appreciated), I don't think they'd fix the issue

I'm pretty certain that they would, but if you keep asking for ideas until you come across one that you either like or fancy doing, it could end up a very long process. Your experiences are struggling with this particular problem, that's when you need to take on board ideas from other areas. The very worst thing that can happen is you end up with a better coded website that misbehaves in a similar way, but is better overall. What have you got to lose?

When you say SEO company, do you mean they've been onto the server and made adjustments? If so, that's not the way to do it with actinic, all that work will be scrapped at next upload.

PS: Make sure your 3 widths in site options all tally up and do not conflict, they are also used in the design to set sizes.

[LouPhi]

leehack you're a genius.... your suggestion to firebug the site has shown me exactly what the problem was! Hadn't thought to do this before cos Firefox was behaving itself...

It turns out - - I had put an extra closing </DIV> tag in after the left hand menu, so in Internet Explorer it was doing exactly what it was being told to do, ie, close that <DIV> ..... Ooops!

On another point though, the product layouts are misbehaving in IE - have a look at http://trials.actinic.com/trials/tri.../Bathroom.html and click on waterproof lcd televisions... the first product is aligned as it should be, but the second product is all centred?? No idea why as they're both using the same layout which is a standard Actinic layout and hasn't been altered (Standard with Image on Left)..... any ideas??

[leehack]

Looks like the product layout table has 2 columns, one set to 25% and t'other set to 75%. The 2nd product image is larger than the 1st, so i suspect that it is larger than the 25% width (BOEC 25% of 780 = 195) that you are giving it.

Switch to the standard layout using CSS, much better then, it will react to what it is given to work with, rather than fall apart if you break the rules.

[LouPhi]

Thanks again leehack....

I've applied 'standard layout using css' to all products, but that one page is still doing something very odd.... now the first item appears squashed up on the left, but the second item is now doing what its supposed to.

Somethings definitely not right what that??

[leehack]

LOL, this goes back to one of my previous tips, the global #content div is now chewing on your ass as i suggested it might. Rather than letting the div expand to fill it's container, it's now floating it left and shrinking it. There's method to me madness you know.

Looks like you have a 200px width set on the product list too!

[LouPhi]

Ok point taken - I've removed the #content div and left floated the inner divs.

I've also found the 200px width set on the product_list style, so we're getting somewhere... however that second product down still doesn't want to play ball (in IE at least??)

Looks ok in Firefox, but where the image is floated left the text wraps around... would prefer this to continue down in a straight margin without wrapping underneath the image... but the 'add to cart' button is floated right so I don't think float:right on the product_image would work??

Your help is very much appreciated

[leehack]

As the image is floated left, the text will wrap around it unless the layout is columnised (is that a word?). When you want the columns, you can either do as you did with the previous layout, but you need to give the left column the width in which things will fit, or the better idea is to stick with the CSS layout but have it so that there is a left column and a right column and move the appropriate elements into the correct column, they're all in one at the moment.

Although, given the product and more importantly the price and bearing in mind the web nowadays is pretty standard at 300px x 300px images, why not put a decent size image of the product, which will naturally force the text over to the right as it adds more depth anyway.

[LouPhi]

Product layout - IE ok, Firefox/Safari not ok!

On the following page, the layout looks fine in IE, but not in Firefox or Safari (the product image should sit on the left, with the product options - radio buttons - and infomation to the right). On Firefox and Safari the product options and information are moving beneath the image (left justified on the page).

http://www.plumbingsupplyservices.co...Cylinders.html

I have tried Firebugging on Mozilla but can't see any reason for this.

Any ideas??

[Mr.Prister]

You need to give the divisions a width, with firebug i used 30% for the "prodcont_left" and 70% for "prodcont_right" (removed the middle one because it was empty).

It should work after then.