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...

 

 

 

Reply

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.

Reply

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..

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..

Reply

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

Reply

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.



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.

 

 

 

Reply

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...



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



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...



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.



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

Reply

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.

Reply

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.

Reply

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.

Reply

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/

Reply