Yet Again CSS Issues - This time IE6

[ackerley1]

About to go back to tables and long scrolling pages!!!!!!

Okay here is the scoop and you can check it out here: www.blueholemedia.com/reef/

In IE7 and FF it works as it should: CSS drop menus, tabbed sections on the Condo and Villas page - lovely.

But in IE6 it looks like absolute crap!!! The menu doesn't stay formated right, the tabbed sections disappear on hover... just aweful!! It uses the <!--[if lte IE 6]> to ref a separate stylesheet for the tabs, and I have played with that and can't seem to get it straight.

CSS validator at W3C hasn't worked in days for me so I haven't been able to troubleshoot that way.

Help me before I go back to tables and long scrolling pages!!!!! ARGGGHHHH!!!

[Dinghus]

Just save yourself the pain and go back to tables. I don't say that lightly either. The headache that is associated with Dynamic Pages is beyond the value of using them. UNLESS you have specific needs that only DHTML will provide.

To use CSS and make it look nice on every platform is almost impossible and when it breaks it breaks bad. Whereas with tables it is quick and easy and looks the same across most platforms.

I know I know. It isn't "best practices". ack phoooey. I used to be a die hard DHTML/CSS person but realized a page that should have taken 15 minutes to layout was taking 15 hours with all the different browsers.

So unless it is unavoidable, stay away from DHTML.

Of course you can use CSS etc for effects and tables just for object placement and general layout.

One day, all the browsers will look at styles the same way. Oh, and frogs will fly too.

[corvettehunt]

Hi there. The thing that always breaks up everything is the padding. The norm says that padding is supposed to be as part of the container, while IE6 and lower treats padding as it should be added to a container.

Example:
Say I want a div 100px wide, but with 10px padding.

On complaint browsers it'll give you a 100px box, with 80px left you can use to put your content in (10px padding on each side).

On IE6 and lower browsers it'll give you a 120px box, with 100px to put your content in (adding 10px padding on each side).

So basically, when in one browser it appears a 100px box, in the other is a 120px box, so everything gets screwed up...

The solution is to kill all your padding and never EVER use it as part of your design. If you need the functionality, add a NEW container inside, and use margins to simulate padding. Nifty trick that makes my websites look 98% the same on different browsers... ;)

[arvana]

Hi ackerley1,

I have to disagree with Dinghus here. There is a tremendous benefit to using an XHTML/CSS layout if it is done correctly, which is that it can make your site much more search engine friendly. I have had websites start getting two and three times the traffic simply by switching them from their old table-based design to a new CSS layout.

However, the only point of doing that is if you set up the HTML with your content first, before all of your header, sidebar and navigation HTML. Looking at your code, it doesn't seem like you will be getting that benefit. Plus, putting all those conditional tables in there is just making everything a lot more complicated than it needs to be.

I would suggest having a browse through www.oswd.org and finding a layout that would work for you, where somebody has already figured out the hard part of making a multi-column layout that is cross-browser compatible. What I do is then move the HTML divs around in the code, using absolute positioning if necessary, so that the main content comes first in the code.

This approach is not for everybody -- CSS can take a lot of time to master -- but if you stick with it then it will be well worth it in the end. If you don't have the time or inclination, then Dinghus is right, a table is usually a lot easier to set up.

If you decide to stick with a CSS layout, feel free to post here again for support!

[ackerley1]

All I thank you for your advise and the open source site is fantastic.

However, what I really need is help fixing this current site. I have used the menu from CSSplay.co.uk, but cannot figure why it is not working properly.

This is where I desperately require the immediate help.

Thanks again.

[jammybiskit]

I tried your site using my IE6 (6.0.2800.1106 SP1) running under W2K and it looked fine. So did the daughter pages.

Maybe you've already applied the fixes to your CSS.

[ackerley1]

Yeah, spent 4 hours after post figuring out the problem... non-dropdowns mess stuff up in IE6 conditionals are not removed.

Thanks for all the help

[topboy]

I had the same type of problem with my design http://www.tophatsolutions.ie, after messing around with the stylesheet i figured out what it was, id recommend doing the same but make a backup first just in case