Owen's Hack for ie

[quasi-modo]

I dug this up the other day, its called owen's hack. I had some problems with some image positioning on ie5 and 6 on a new css layout I was making, while it worked fine in opera and mozilla. But this thing has been my savior. This is not like the ie5 box model hack though, this sends a different value to ie6 too.

Code Select Expand


img.test { /* ie can see this */
  position:relative;
  top:-30px;
  left:-7px;
}
head:first-child+body img.test { /* ie cant see this, ns can */
  position:relative;
  top:-30px;
  left:-10px;
}

[AssassinRC]

I'm curious how it works, and if possible can I see an example anywhere of it's usage?

[quasi-modo]

On this new layout I am working on
http://quasi-ke.servebeer.com/layout/index.html
here is the css
http://quasi-ke.servebeer.com/layout/layout.css
it works like a charm

[Skywing]

What's the practical application of this?  Nearly all browsers identify themselves to the server before it sends a page, anyway, so assuming you aren't using horribly crippled server software you should be able to make a decision about the page's content based on the user's browser from there.

[Grok]

He thinks by him working for many extra hours to design a page which IE users cannot properly view, that he singlehandedly will cause all IE users to switch to Mozilla or Netscape.  Microsoft is afeared.

[quasi-modo]

He thinks by him working for many extra hours to design a page which IE users cannot properly view, that he singlehandedly will cause all IE users to switch to Mozilla or Netscape.  Microsoft is afeared.

wtf are you talking about, that is not it at all. That makes a site accessable to ie, which would not be accessable before this hack because of ies crappy box model. I design a page with a css layout and this sends another value to ie, which screws up on the one I send to other browsers. IE reads css so badly that to try and make a site work on ie would mean it would not work on any other browser, mainly ns based browsers and opera. By using this I can design a page that works on ns based browsers and opera, then send another value to ie which will make the page display properly on all of them. Go the link next time would you and compare on multible browsers and see that it works before you make some comment that is very far from accurate. http://quasi-ke.servebeer.com/layout/index.html view it on ns or mozila, then ie, then ie5.5. You obvisously did not read my posts. I go for accessability. Also doing a browser detect before hand and it would mean me making 5 different pages instead of just dropping in one hack which makes this accessable to all. Just because I use css and hate ie does not make me anti ms either. I would not use mssql server, asp.net, and many other wonderful ms products if I were anti ms. I just cant stand ie and frontpage. But because I dislike how ie supports css (and objects, and xhtml) does not mean that I would make a site inaccessable to 90% of the internet.

[Skywing]

He thinks by him working for many extra hours to design a page which IE users cannot properly view, that he singlehandedly will cause all IE users to switch to Mozilla or Netscape.  Microsoft is afeared.

wtf are you talking about, that is not it at all. That makes a site accessable to ie, which would not be accessable before this hack because of ies crappy box model. I design a page with a css layout and this sends another value to ie, which screws up on the one I send to other browsers. IE reads css so badly that to try and make a site work on ie would mean it would not work on any other browser, mainly ns based browsers and opera. By using this I can design a page that works on ns based browsers and opera, then send another value to ie which will make the page display properly on all of them. Go the link next time would you and compare on multible browsers and see that it works because you make some comment that is very far from accurate. http://quasi-ke.servebeer.com/layout/index.html view it on ns or mozila, then ie, then ie5.5. You obvisously did not read my posts. I go for accessability. Also doing a browser detect before hand and it would mean me making 5 different pages instead of just dropping in one hack which makes this accessable to all.

I think that a better design would be to create a "global" CSS file and a set of browser-specific CSS files.  Include both the global file in your page, and include a reference to some script or other serverside mechanism that you can use to make a redirection based on the browser's indicated User-Agent.

e.g. global.css and cssredir.cgi, which would send you to ie5.css, ie6.css, ns7.css, and so on based on your browser version.

Your current method relies on guessing the user's browser version based on undocumented behavior - doing a proper selection based on User-Agent eliminates that uncertainty and provides a guaranteed consistant mechanism to customize your site based on the browser a user connects with.

[quasi-modo]

It is not undocumented behavior, by any means. It is very well doccumented. I have been using css for a long time now and I know what I am doing. It is faster and better to use a hack then to realy on a browser detect and using 5 or 6 different files. Also what if the user agent is not ie or mozilla? You have a misc category? I would rather the page just break down like it is supposed to into a text based form when a browser like lynx or ie2 comes along that cannot support css or inline data at that. Doing css properly so that all of the major browsers can read it, even if it requires hacking for ie is a more desireable solution because in the end it is less work.

[Skywing]

It is not undocumented behavior, by any means. It is very well doccumented. I have been using css for a long time now and I know what I am doing. It is faster and better to use a hack then to realy on a browser detect and using 5 or 6 different files. Also what if the user agent is not ie or mozilla? You have a misc category? I would rather the page just break down like it is supposed to into a text based form when a browser like lynx or ie2 comes along that cannot support css or inline data at that.

It's not documented by the vendor, i.e. the entity that could change that behavior and break your site.

Besides, you're relying on every other browser in existance also (mis?)behaving certain ways based on your attempt to exploit a quirk in a particular version of a particular browser program.  I certainly wouldn't use such an unstable method for a mission-critical site.

I don't see how my method is any different than yours re: support of browsers that ignore css.

[quasi-modo]

But your method would only work for 3 or 4 browsers unless you write miles of code for every browser and every platform then for every setting. Doing it flat like this allows for it to break down. It is very well doccumented by many places. If you think that ie and ns are the only powers on the internet you would be sadly mistaken, what about the w3. Certainly they have some  clout and certainly they document things like this. MS has realized that they support css, and the object tags poorly. IE 7 claims to read css much more like ns and scripts about the same, opera ish, if that is the case then I will have no problems because all browsers get one value... then ie and some other noncomplient browser will get another. But the content is accessable for all browser this way.

[Skywing]

But your method would only work for 3 or 4 browsers unless you write miles of code for every browser and every platform then for every setting. Doing it flat like this allows for it to break down. It is very well doccumented by many places. If you think that ie and ns are the only powers on the internet you would be sadly mistaken, what about the w3. Certainly they have some  clout and certainly they document things like this.

No, it wouldn't require much code.  You would do something like this...

Code Select Expand


if(Browser == IE5)
sendfile("ie5.css");
else if(Browser == IE6)
sendfile("ie6.css");
else if(Browser == NS7)
sendfile("ns7.css");
else if(Browser == Opera)
sendfile("opera.css");
else
sendfile("standard.css"); /* assume that it's a standards-compliant browser that can correctly parse standards-compliant CSS */


However, I don't think you should be needing all that much browser-specific CSS if you follow standards.  In any case, simply changing a few dimensions to work around a minor browser issue isn't exactly "miles and miles of code".

[quasi-modo]

Hey you stick with server side if you want. But its not my thing. I chose this method for a reason and posted this hopeing it would help someone else out. But what grok said earlier could not be further from the truth and I was just trying to make that clear. Browser hacks, aka filters, are designed with accessability in mind, not inaccessability. This is not the only hack out there for ie, I can get you a nice chart, it is a lot less work in the long run to do simple hacks for ie and send the other code to the other browsers then useing the user agent. IF I FOLLOW THE STANDARDS, VIEW MY FREAKEN VALIDATION. http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.quasi-ke.servebeer.com/layout/index.html
http://validator.w3.org/check?verbose=1&uri=http%3A//www.quasi-ke.servebeer.com/layout/index.html
http://www.contentquality.com/mynewtester/cynthia.exe?rptmode=-1&runcr=1&url1=http%3A//www.quasi-ke.servebeer.com/layout/index.html

[Skywing]

Here's what I get when I try to validate your page:

Character Encoding mismatch! The character encoding specified in the HTTP header (utf-8) is different from the value in the <meta> element (iso-8859-1). I will use the value from the HTTP header (utf-8) for this validation.
This page is not Valid HTML 4.01 Transitional!
Below are the results of attempting to parse this document with an SGML parser.

Line 6, column 6: end tag for element "HEAD" which is not open (explain...).
 </head>
       ^
Line 7, column 88: document type does not allow element "BODY" here (explain...).
 ...2px ms sans serif, arial, helvetica;">
                                         ^
Line 17, column 59: value of attribute "ID" invalid
 <form name="_ctl0" method="post" action="Default.aspx" id="_ctl0">
                                                            ^
Line 30, column 139: there is no attribute "LANGUAGE" (explain...).
 ...') Page_ClientValidate(); " language="javascript" id="butOK" Type="Submit" st
                                         ^
Line 30, column 168: duplicate specification of attribute "TYPE" (explain...).
 ...anguage="javascript" id="butOK" Type="Submit" style="border:1px solid #008ACA
                                         ^
Line 35, column 107: end tag for element "A" which is not open (explain...).
 ...ums.aspx">My clan's forums</a> :: </a><a href="http://www.clanknights.vze.com
                                         ^
Line 37, column 5: end tag for "FORM" omitted, but its declaration does not permit this (explain...).
 </div>
      ^
Line 17, column 0: start tag was here (explain...).
 <form name="_ctl0" method="post" action="Default.aspx" id="_ctl0">
 ^
Line 63, column 6: end tag for element "FORM" which is not open (explain...).
 </form>

The CSS validated with two warnings.

Since it looks like you're already using server-side scripting, you might as well implement a concrete solution instead of trying to take advantage of browser (mis)behaviors to detect browser versions.  If you're using <link rel...> to import a css clientside, then it should be much simpler and much more maintainable to reference some .aspx which uses the User-Agent information to send the user to the right stylesheet.  No potentially incompatible hacks involved, and not exactly a huge time investment either.

[quasi-modo]

because thats the wrong url. Thats the little page http://quasi-ke.servebeer.com that I made in 5 minuits as a default file for my root dir. Look at the links I posted, they are to http://quasi-le.servebeer.com/layout/index.html
Do not count on me running a server side detection. I have mentioned already I chose this method, and I think doing it server side is the improper way to do it in this case because you have to take into account many more browsers and platforms then just the big 2 or 3, ie mac will run different from ie windows, 5,5.5,6,opera,ns, and so on, and why have 2 css files, when you only have 2 values to change and run an extra script. The hacks are not incompadable, they are taylored this will go to incompliant browsers, which is ie in this case, this will go to compliant. It is a simple madder of being able to read css.

[Skywing]

because thats the wrong url. Thats the little page http://quasi-ke.servebeer.com that I made in 5 minuits as a default file for my root dir. Look at the links I posted, they are to http://quasi-le.servebeer.com/layout/index.html
Do not count on me running a server side detection. I have mentioned already I chose this method, and I think doing it server side is the improper way to do it in this case because you have to take into account many more browsers then just the big 2 or 3, and why have 2 css files, when you only have 2 values to change and run an extra script.

If you have only one or two things to change between different browser versions, it would probably be more maintainable to split it into two files - a general one that is compatible with all of your target browsers, and then browser-specific stylesheets that provide whatever fixups are necessary to address specific problems with certain target browsers.