IE6 and IE7 Css Hacks?

[HairyHun]

I'm working on a site redesign. I picked a full CSS design, as it seemed to be the current best way of doing it.

However, older IE versions are driving me crazy. Even IE7 is having issue. IE6 is totally bust.

Been researching solutions since yesterday. There are individual hacks for this and that here and there but its still too confusing.

Do you have guys have a proven way of dealing with this? maybe a generic css file with all the common hacks? or do you redesign the site completely for the other version and have the browser version screened for each visitor?

Argh! :hitit_sml:

HH

 

[Xrproto]

*{margin:0;padding:0}

Put that in the very first line of your CSS file, that will help a ton with alignment issues cross-browser.

Also, this is a great resource CSS Help Pile Directory: Scribble View - Artypapers

 

[HairyHun]

*{margin:0;padding:0}

Put that in the very first line of your CSS file, that will help a ton with alignment issues cross-browser.

Also, this is a great resource CSS Help Pile Directory: Scribble View - Artypapers

That's the first thing i did when i started this redesign

The main problem seems to be with the floats.

I have a 3 column layout for the main part.

3 divs, float left, float right and main (in that order)

In the IE6, they are staggered ( not text to each other )

also, some blocks that i created with <li> (instead of a vertical i column table) also have some minor display issue. (btw, is that the best alternative to tables of that sort?)

here is a link

FF and Safari have no problems. Even IE7 has some minor issues ( which surprised me )


HH

 

[Xrproto]

You can use something like this to mold it to IE

/*Iexplorer*/ *width:1000px; (change the width:900px to whatever element you need to manipulate so it looks good in IE)

 

[Tedel]

I use absolute div positioning and I never have the problems you are mentioning here.

There is also a no-float solution. You can search for it, if you like.

 

[SkyFire]

I use absolute div positioning and I never have the problems you are mentioning here.

Well that's just stupid. Remove the entire site from the flow eh? Nice.

The problem you are having isn't IE, it's the code. Here is an excellent article on a proper 3 column layout. A List Apart: Articles: In Search of the Holy Grail

 

[Xrproto]

Well that's just stupid. Remove the entire site from the flow eh? Nice.

The problem you are having isn't IE, it's the code. Here is an excellent article on a proper 3 column layout. A List Apart: Articles: In Search of the Holy Grail

I agree...stay away from absolutes.

 

[Tedel]

What's wrong with absolute positioning, amigo?

 

[aim]

There's a few things you can do.

1. Use the "." and "_" operators. Let me know if you don't know how to do this.
2. <!--[if lte IE 6]>Load a CSS file<![endif]-->

 

[Xrproto]

What's wrong with absolute positioning, amigo?

There are several issues that occur when coding in all absolute. Overlay issues, different user screen sizes...not fun.

 

[strictnein]

Don't have time to really do a thorough look over, but this screams at me:

.HomePage #container #main {
    background-image: url(../images/images/frame-mid.jpg);
    background-repeat: repeat-y;
    width: 1000px;
    padding-right: 231px;
    padding-left: 231px;
    padding-top: 10px;
}

That div wants to be 1462px wide.

The Box Model - CSS - ILoveJackDaniels.com

Anyways, the way you have the CSS and page setup, that div needs to fit nicely in between the left and right divs, so it needs to be under 1000px - (their combined width).

Putting it at 550px cleans up some issues in IE7 for me.

Also, what's with all the padding around the headers?

.HomePage #container #main h1 {
    padding-bottom: 10px;
    padding-top: 45px;
    padding-left: 30px;
    padding-right: 30px;
}

Cut that back some, especially in IE and drop some of the unnecessary stuff like padding-right. What's it's purpose?

Other random thoughts: since you're going for XHTML, use <br /> instead of <br>.