New Css Ideology avoid ie hacks

According to this article we should stop hacking our css in a given way, so that future versions of browser agents will always display our sites correctly. Its mainly about IE, older and newer versions.

And, it bassically shows how to 'hack down' the holly hack (A IE only css hack) so that it becomes standard according to the above article, so that our css will work in past versions of IE and the feared IE7.

So i started coding a 'lesser' site (its not a big project, yet i want to start doing the things right) and did what i thought was correct but have broken my head off and can't get it no more, so i decided to drop by and post my question here...

All i want is a 'fake-frame' layout, that looks like if it had a top header frame, and the main content scroll down behind the header, like this site i did, with some help of course, from a couple of websites and some tyssens advice i think (i always end up using tyssens advice =P thanks!).

The above site is pure xhtml strict (except on two form pages, which i switched to transitional for some troubles reggarding the way php manages POST variables sent from the xhtml form), and the styles are built down the 'old philosophy', with hacks for IE like the holly hack and others. Im not planning to re-code this one (at least not right now), but what i had achieved here i can not with the newer site im doing, which basically does the same, but without the main menu, and the footer (which i just may add to the layout, just to see it working).

I have now a mess of my css, i made and unmade all of it trying to get it right, unsuccesfully, and I just got tired of it.

The principles are to fix (position:fixed) the header position for good browsers, and set it 'absolute' for IE, and then get IE (and only IE) with a 19px margin right on the body to emulate the space of the vertical scroll (setting in the div#content the scroll property to auto), and leave all good browsers manage the scroll automatically from the body.

I first saw this on a css driven wordpress template, called 'fake frame theme' or something, and I learnt everything I now know from it (regarding this kind of layout, that is), but as I said above, I'd like to try to stick to this ideology on the way we 'hack' css....

Thanks in advance...

Lozbo,

Have you read this site or seen its demos about frames using css only?

Frameless frames

The author uses straight css (and hacks, of course) to create frames much like yours. Might be a good read for you to overcome some of the problems you have encountered.

I've read the article you posted. But I don't understand what does these hacks do? Basically I think it's just making your pages looked weird and not what you supposed to be.. Well but no one wants their pages to look awkard so I don't think people will bother to use those CSS "hacks" to make their pages look dumb or something.. :huh:Unless you are trying to say that those CSS hacks are able to shutdown or force IE to prompt an exception error or crash the system or something.. That will probably be a good hack..

jlhaslip, thanx for the article, Ill give it a try, but I want to avoid hacks, the above article talks about NOT using hacks, but instead use CORRECT CSS and find workarounds that are VALID CSS, and that will not expire as new BAs come out, to target and fix specific browser issues (which obviously could become a harder work).And Inspiron, by hacks (in the world of CSS) we mean workarounds that take advantage of browser agent errors, the way they read the CSS and this way we can for example, write a css rule that only Internet Explorer will read, and leave intact the good browsers...Its not meant to make the site look weird, but to fix it, i have already achieved that but i now want to use the 'new' methodology...Thanx anyway =D

Edited February 16, 2006 by Lozbo (see edit history)

jlhaslip, thanx for the article, Ill give it a try, but I want to avoid hacks, the above article talks about NOT using hacks, but instead use CORRECT CSS and find workarounds that are VALID CSS, and that will not expire as new BAs come out, to target and fix specific browser issues (which obviously could become a harder work).
Its not meant to make the site look weird, but to fix it, i have already achieved that but i now want to use the 'new' methodology...

Thanx anyway =D

Lozbo,

I understand that you wish to avoid 'hacking' your code. That is a noble objective, BUT (you knew this 'but' was going to be in here) until the Browsers all behave the same, only the most basic pages will render similarly in all browsers.

Internet Explorer 6 is about 5 years old now. Much has changed since it was first released. There have been some fairly aggressive steps taken in the world of web design. Designers are 'pushing the limits' and things are breaking. Even the most compliant Browsers don't handle everything the same. Firefox has its problems and so does Opera, and these are about as close to the Standards as any Browser gets today, so when IE 7 gets released, I suspect that there will be yet another round of hacks coming.

Your goal (and mine) is to create good presentations for serving onto the web so that users can benefit from the information and content we provide. In today's world, and until everyone is using the same Browser, or until they all handle the html and css the same, that means hacks are neccesary to achieve 'similar' presentations. As I said in the last paragraph, even the two most common 'Standards Compliant' Browsers have their differences, so I don't expect that Microsoft's I E 7 Release is going to solve this problem. In fact, it will only get worse, I suspect. I hate to sound negative, but I have not seen anything yet which suggests otherwise. I expect that IE7 will have a degree of 'better' compliance in some regards, but consider that they may also take a 'backwards compatible' approach (as they often do in other products), so the hacks required for IE6 will continue to be required.

Yes, IE6 has the largest Market Share, and it is important to ensure the pages that we produce are seen correctly on that Browser. Because of the differences between the Standards and IE6, some hacking is required if you want to present properly across all of the most popular Browsers. And with the strength of Microsoft's position in the Computer world, eventually, their new Browser will (probably) still be pre-dominant, however, the process of distributing the new IE7 will take some time. Until then, IE6 will continue to be a strong component of the Market, (with Mozilla/Firefox and Opera and Safari and Netscape continuing to be strong as well).

Mathematically, as the number of elements in a population increase, the number of possible combinations of relationships increase exponentially. The point of this comment is that as more Browsers are introduced which are not fully (or nearly) Standards Compliant, the number of required hacks will not only increase, but become more and more complex. Already there are hacks for specific Browsers which must include other hacks to compensate for otherwise compliant Browsers without the first hack. Round and round the circle it goes.

It won't be long before it will be absolutely required that Browser Sniffing and css file switching are required for any degree of cross-browser design. I'm thinking that is going to be the correct solution. Yes, it will be more work, but the complexity of the hacks and the number of them that will be required is nearly as much work already.

That's my take on the New Methodology.

so i decided to drop by and post my question here...

Incidently, where and what, exactly, was the question in your opening post?

Oh! And what is the difference between hacking IE6 with the Star_Html hack and the proposed technique of writting the css for IE6 then using the Child Selector to serve to the real Browsers. If you were to think about what you have done, you've simply replaced one hack with another. The first method hacks one Browser, and the second method hacks all but one. I don't get your point one this being any better than the other.

Furthermore, here is a Frameless CSS-based page that validates strict and the css is valid as well, but it does have Hacks to compensate for a couple of issues in a couple of Browsers, so is the Html and Css any less valid? Valid, semantically correct, and well formed are different things. Don't confuse them.

Yes, i understand everything you say, I already know that...

My question in the first place was, how to achieve the frame like layout without those hacks... I think i didnt write it but that was what i meant... sorry...

they should (1) be valid, (2) target only old/frozen/abandoned user-agents/browsers, and (3) be ugly. Tantek also went on to explain that using a feature of CSS is not a hack.

It was talking about CSS hacks... I dont know how to explain it but i would point out to the first article...

If you were to think about what you have done, you've simply replaced one hack with another. The first method hacks one Browser, and the second method hacks all but one

According to this so cited article, the second way is not actually a 'hack', but a CSS feature. I'm not a css hack designer, i just use what i found here and there, I could not explain it as those designers would, but i get the point...

Valid, semantically correct, and well formed are different things. Don't confuse them.

I have not trouble with those concepts, but id like try this thing as it is proposed, as i have also achieved already a valid strict xhtml and css frame-like layout.

It won't be long before it will be absolutely required that Browser Sniffing and css file switching are required for any degree of cross-browser design. I'm thinking that is going to be the correct solution. Yes, it will be more work, but the complexity of the hacks and the number of them that will be required is nearly as much work already.

I think that is what is all about, leave the css good for future versioning prevention, so when new things come out, your current css will still work, and will need only to fix the newer stuff (and if everything goes well, browsers get more and more attached to standards, there wont be a need to fix anything)...
I am not quite sure if this is the best way to go, but made sense to me right now, and as i say, as i have ALREADY done the other way, i want to give this a try...

Thanks
Edited February 16, 2006 by Lozbo (see edit history)

Lozbo,

 

This is turning into a good discussion and I think we are both enjoying it and learning from it. At least I am, so I would like to make another point in order to get your reaction.

 

When IE7 is released and starts getting used by us Common Folks, do you have any information that says whether or not either of the above methods is going to be more successful than the other? I think we both agree that it would be best if neither of the approaches would be required, but you and I do not have any control over that. We do, however, have control over how we respond to the problem.

 

Ignore the 'preference' issue. Pick a method that you think will work in the future and that will be best in the long run.

 

Then answer this question : Do you know if IE7 will accept the method you have just selected?

 

It could be that a third set of rules will be needed to be implemented in order to style pages for IE7. That is the point I was trying to get across in my reply. If or when it gets to that stage, I believe that sniffing for Browser Type (User Agents) and switching CSS files based on the Browser requesting the page will be the best approach to avoid the hassle of (first) sorting out the problems, (second) finding the hacks and implementing them, and then (third) finding other hacks to work with other Browsers which got messed up by the new hack. That is the 'round and round' part. Rather than chase your tail looking for Hacks, just write a Style Sheet that works in the Browser that you are about to send the page to. That's all it would take. No - hacks - what - so - ever. The search for hacks stops right in its tracks.

 

Of course, then we will have to develop better or faster Sniffing techniques, because Opera, for example, already has an option to disguise itself, so even the task of sniffing the Browser, although it appears to be a simple thing, really isn't if the Browser will be able to conceal itself.

IE7 will ignore the Holly Hack (* html ) but will recognise the child selector (like FF etc.) so it appears there will be no way of targetting IE7 specifically without the use of conditional comments and it also means that hacks intended for <= IE6 could break your layouts in IE7.The author says he 'hopes' that this usage will future-proof designs for IE7, but unfortunately (as of the current beta version), it doesn't.

Although, Opera is capable of disguising itself, it still mentions itself in the end. So, it shouldnt be hard to distinguish Opera from other browsers. All you'd have to do is check for "Opera" in the user_agent when searching for another browser. At least, that's what I think is all that is needed to do.

The author says he 'hopes' that this usage will future-proof designs for IE7, but unfortunately (as of the current beta version), it doesn't.

But I've just come across an article that does propose a hack that will only target IE7: http://www.brothercake.com/site/resources/reference/xxx/

Sorry i havent picked this up, i have been a little bit busy and while i did post in other threads, i was waiting for the moment to have enough time to answer here.. hehe.

jlhaslip

Yes, i have learnt and enjoyed this thread a lot lets begin again...

We cant have any info about IE7 but the one that beta testers generate, and until it comes out we wont have certainty of what will or will not work on it... but yes, you are right, i agree that it would be best if we didnt have to hack anything down, just write a css document for each different browser and forget about weird and crazy patches.

I dont know what you actually meant with the 'preference' issue,

Ignore the 'preference' issue.

But i disagree with this:

Pick a method that you think will work in the future and that will be best in the long run.

I guess that this was what i mainly was arguing about, to pick as many methods as you can, and learn them all... so i was (yes, was, i have dropped this project for a while) trying to get the second method down, as i have already achieved the first one... so:

Then answer this question : Do you know if IE7 will accept the method you have just selected?

As I can not know if IE7 will or not accept it(even when some venture and speculate), i would rather be prepared with most of the tools I can master or at least understand so it will be easier to answer to if I can't get it done with one way, and I'll be ready with the next... (this is my point, even if i am not sure, though it kinda makes sense to me, I better try both things and give the second method a chance...)

If or when it gets to that stage, I believe that sniffing for Browser Type (User Agents) and switching CSS files based on the Browser requesting the page will be the best approach to avoid the hassle of (first) sorting out the problems, (second) finding the hacks and implementing them, and then (third) finding other hacks to work with other Browsers which got messed up by the new hack.

I believe that would be the ultimate solution (at least, the one more pragmatic and closest to reality, because the real ultimate solution would be that each and every browsers displayed the stuff as it is meant to, as the w3c recommends, but i don't think it comes to pass anytime soon).

When I started making web, I knew very little of CSS, but this technology had been around for a while... and as i started digging more and more into css, I never thought it would be so much trouble across browsers to get things done. I jumped kinda quickly from graphic based layouts in tables and fireworks-html to pure xhtml and css driven designs, but it was late for me already, all those things were already there and I didn't know them. I used to have an html class for every element I wanted to customize, i didnt use headings, nor lists, nor anything. Hell, I remember I didnt even have Firefox! But Im glad im begging to understand and to do the things right...
Edited February 28, 2006 by Lozbo (see edit history)

it appears there will be no way of targetting IE7 specifically without the use of conditional comments

The problems with the child selection trick above have already been mentioned (while it's valid css, it's an unsupported feature, and thus still a hack). What Tyssen mentions in passing is really the only way I've found to properly use different css in different browsers (besides the insanity of doing a javascript check.) Internet Explorer includes code that allows its browsers to read comments which are hidden from other browsers. What's even better is you can specify which versions of IE will pay attention to the code. Furthermore, because this is a specifically supported feature, it won't go away with a new release of IE. Conditional comments won't work on any Mac versions of IE, but then again 1) the mac version of IE tends to work a lot closer to the w3 standard and 2) Mac IE is no longer supported either by Microsoft or Apple, so it should be dead shortly.

A good introduction to conditional comments can be found at http://www.quirksmode.org/css/condcom.html

I use it a lot in my websites to include a specific stylesheet for Internet Explorer that has fixes for my normal stylesheet.
Hope this helps.



Edit: Oops, I just realized that this post was a month old. I'm sorry for resurecting it, but I felt that it was important to point out conditional comments. I'm new here, so I'm not quite sure how the forum works about replying to old threads.
Edited April 1, 2006 by WindAndWater (see edit history)

WHOA O_O ive been looking for this kind of info!!