Layout shows up differently IE/FF

[Goz]

I've been struggling with this for a couple of weeks and I can't figure it out so hopefully someone here can give me a pointer.

I'm building a new site for a client with a bespoke design.

The design (before it was Actinicified) worked perfectly well in all major browsers.

When applied to Actinic, the design fails in FF. The footer is not pushed to the bottom.

example : Eyebrook Tackle Shop

I'm about to redesign unless someone far cleverer than I can point me in the right direction.

TIA

Andy

[leehack]

I'd guess as link not working for me, that your footer needs a clear: both; added to its class.

[Goz]

Thanks Lee..... should have tested the link before posting! Now fixed.

I've got a clear:both in there....but perhaps not in the right place?

[leehack]

You have quite a few extra styles defined in your classes that i never use and never get this problem, so perhaps stripping things back is the best thing to do first.

On the classes for the 3 main columns, remove the height and the display declarations, you only need to define a width and float them left, nothing else.

On the clearboth class just have clear: both; defined in there, don't have anything else.

Remove the text-align: justify; - this is problematic at best cross browser.

You have contradicting body tags in 2 different stylesheets, remove the body tag declaration from your stylesheet and leave actinic's to do the styling.

Once you have done all of that, then apply a different background color to each of the containers in question, this will provide you with a visual presentation of what you are coding, showing you what is not expanding to fit its content, once solved just remove the colors.

This is a pretty common bug, a right PITA actually, but nevertheless a bi-product of CSS use, a div class clear will almost certainly fix it, this will need placing just above the closing tag for the container where the colors are showing you that it is not expanding.

[fergusw]

Goz,
The CSS in there is pretty messy and very complex in terms of the end result. Using floats is the main cause of your problems. If we were given this HTML we'd end up rebuilding it with simpler DIV structure and simpler CSS rather than tackling the problems you are experiencing.

You have a <DIV id="content"> inside a <DIV ID="centralColumn> which semantically seems a bit strange.
Ideally you should be looking to utilise absolute and relative positioning with margins to set left and right columns. This solves the issues you are having with floats in one fell swoop.
If you need to stick to your guns with this HTML then try removing the "content" div and just let the content fill the "centralColumn" div - that may solve one of the problems.

Sorry I can't be a bit more constructive, but as I mentioned, we would tackle this simply by rebuilding the HTML and CSS. Far quicker than troubleshooting floats etc. Have you checked this design in IE6? IE6 is notorious for messing with floats.

[leehack]

I guess the last 2 posts illustrate how confusing it can all get for people. Using absolute and relative positioning would be the last thing i would ever suggest, i can recall using it once in 4 years. I use containers floating left with a width defined and also never have issues.

Yet again proof on the number of methods to skin a cat i guess. It's weird when 2 designers would declare methods totally opposite to each other, both declared problem free when doing so and both have designed many sites.

I wonder if web design is all about better the devil you know, where you know the problems a method brings, but as you know how to overcome them, it becomes your normal and recommended method.

I recall a few years ago now experiencing the right column wrapping underneath in IE6 due to styling, the old 3px jog etc. when in fact it was down to a poorly coded nested table in the actinic cart and checkout pages, which is still in existence today.

It'd be great to set a challenge to design an overall layout to 10 designers, then look at each of them, discuss the merits and differences and see if some collation could be achieved. I'd love to know how Sharkey has no issues with absolute positioning, whereas he may like to know why i get no floating issues. It could be a good exercise if it ever happened.

[fergusw]

I wonder if web design is all about better the devil you know, where you know the problems a method brings, but as you know how to overcome them, it becomes your normal and recommended method.

Couldn't agree more Lee. What ever works, and works best for the designer. I'm sure we could easily trade problems/solutions with one method versus the other and still agree on a preference......

It'd be great to set a challenge to design an overall layout to 10 designers, then look at each of them, discuss the merits and differences and see if some collation could be achieved.

TBH I'm not sure why Actinic has not already done this, either in competition form or even just for publicity for them and for the designers taking part. They could even get new themes out of it (although I recall one such "competition" for V8 which Jo @ pinbrook one?).
There's loads of web design magazines that regularly have a "design-off" which allows people to see different peoples interpretations of a design brief - and they are always differences! The places where ideas converge would be very interesting and valuable!

I'd love to know how Sharkey has no issues with absolute positioning, whereas he may like to know why i get no floating issues. It could be a good exercise if it ever happened.

I'll show you mine if you show me yours!

Back to you Goz: Given your only wanting a fix, rather than an overhaul of any CSS/HTML I'd go along the lines of Lee's recommendations.
Firebug is your friend here

[leehack]

I discussed this with Beppe's brother (Ben) a few weeks ago actually regarding designing templates. My stance is this:

If i am going to create a theme and not give it my all, then why bother at all. However if i do give it my all, why would i want to openly reduce the amount of possible work for my business? We do enough of that already on the forum.

I couldn't get my head round the idea in the end.

Rather than design new ones, we could have a competition to see who could clean up a set actinic theme the most. I can cut around 1000 lines out of the actinic CSS and lose very little on the style front, that would be an interesting challenge to take part in. I think Jonty has managed even more in this area.

[Goz]

Thanks guys..... I have made progress.

I followed Lee's advice given and changed the background colour and I have a workable solution. Thanks - that's great. Firebug is, indeed, a friend!

I've tried absolute positioning before and couldn't really get the hang of it... although Aspak came out OK.

[leehack]

If you remove the height declaration from the middle container, you'll have a full solution i reckon!

[Goz]

You are, as (almost) always, correct.

I shall buy you a beverage of your choice if you're heading down to the Actinic shindig later this year.

thanks for your help Lee.

[leehack]

np Andrew, my pleasure.