engfer(s) » CSS http://www.engfers.com » scrumptions blog & code » nothing more, nothing less Tue, 06 Oct 2009 21:52:32 +0000 en hourly 1 http://wordpress.org/?v=3.0 Internet Explorer Doesn’t Evaluate Any More Than 31 Style Elements http://www.engfers.com/2008/10/30/internet-explorer-doesnt-evaluate-any-more-than-31-style-elements/ http://www.engfers.com/2008/10/30/internet-explorer-doesnt-evaluate-any-more-than-31-style-elements/#comments Thu, 30 Oct 2008 18:37:17 +0000 engfer http://www.engfers.com/?p=751

Any version of Microsoft Internet Explorer will not evaluate any more than 31 CSS style elements. I’m not sure if many of you readers have come across this ridiculous bug, but we thought best if you were at least forewarned.

The Bug

The bug itself is described by Microsoft in the article listed below. The funny thing is that they say the number of style elements parsed is 30; however, it’s actually 31.

Normal Circumstances

Under normal circumstances, you would never really run into a situation that would require your page to have 31+ style elements on your web page. However, when one is developing in a portal environment, you would be surprised at how quickly that can happen; JSR-168 portlets and other 3rd party apps can have their own way of styling HTML that you have no control over.

We actually came across this when migrating the BI reporting tool BIRT from v2.2 to v2.3. In v2.3 we noticed that the reports displayed fine in Firefox/etc, but they looked like un-styled garbage in Internet Explorer. It took quite a while to figure out that BIRT v2.3 put all of their CSS properties inside <style/> blocks; BIRT v2.2 the CSS properties were inline attributes on the elements (i.e. style=”bleh…”).

Anyways, when you have a web page that has 31 style elements (either within <head/> or <body/>), everything displays fine in all browsers as you can see in the figure below.

Abnormal Circumstances…

Well, what happens to IE under these abnormal circumstances with web pages with 32 or more <style/> elements?

What does every other browser look like? They look correct.

The Code

Here is the code to see the bug yourself….

<html>
<head>
  <title>Style Element Test</title>

  <style type="text/css">
    .green_me { color: blue; }    /** Style block #1 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #2 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #3 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #4 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #5 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #6 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #7 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #8 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #9 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #10 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #11 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #12 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #13 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #14 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #15 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #16 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #17 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #18 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #19 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #20 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #21 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #22 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #23 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #24 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #25 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #26 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #27 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #28 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #29 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #30 */
  </style>
  <style type="text/css">
    .green_me { color: blue; }    /** Style block #31 */
  </style>
  <style type="text/css">
    .green_me { color: green; }    /** Style block #32 */
  </style>

</head>
<body>
  <h1 class="green_me">I Should Be Green!!!</h1>
</body>
</html>

Workarounds

Well, there aren’t any real “workarounds”.

UPDATE: 2008-11-04: Maybe I’m not making my point. The point here is NOT to condone using <style> tags like crazy and have 30+ on your page; let me say that again; the point here is NOT to condone using <style> tags like crazy!!! The point of this article is to make people aware of the issue and what a quick production hotfix might look like.

I’m sorry my diction sucked and I chose to use “bug” over “limitation“; sue me! Either way, I think Microsoft needs to fix it!

The server-side solutions options are pretty obvious:

  • Condense CSS into less (or a single) <style/> elements (good)
  • Put CSS into an external file and use the <link/> tag (best)
  • Add the correct CSS onto the inline atribute, “style”, on each element. (not as good)

UPDATE: 2008-11-04: Paul Davis mentioned below in the comments the most correct solution. I don’t know why I didn’t mention it. The solution is to have some response filter servlet or class that will condense the style tags for you. By doing this you don’t have to go to your 3rd party vendors and complain because they don’t use external stylesheets.

We all know what the best practices for CSS are; we just need to be aware of the limitations that will affect our judgment and implementation.

The client-side solutions options are non-trivial (and really should NOT be used unless a production hotfix is needed!!):

  • With JavaScript, manually parse the “forgotten” <style/> elements and add them to the last “unforgotten” DOM  stylsheet (document.styleSheets[ document.styleSheets.length ]).
  • With JavaScript, manually parse the “forgotten” <style/> elements and then apply the style to each respective element/selector.

Using jQuery, here is an example of how to temporarily fix this client-side…

$(document).ready(function(){
  // If msie and we have more than the allotted stylsheets...
  if ( $.browser.msie && $('style').length != document.styleSheets.length ) {
    var ssAry = $('style');
    // Loop through the extra stylesheets not read and apply the styles found
    for ( var i = document.styleSheets.length; i < ssAry.length; i++ ) {
      var cssText = ssAry[ i ].innerHTML;
      // Replace newlines and then comments
      cssText = cssText.replace(/[\n\r]/g, "");
      cssText = cssText.replace(/\/\*\**[^\*\/]*\*\//g, "");

      // Loop over all CSS selector groups...
      var regex = new RegExp(/{[^}]*}/);
      for ( var value = regex.exec( cssText ); value; value = regex.exec( cssText ) ) {
        // Split the css grouping into the selector and the CSS properties
        var pair = cssText.substring( 0, regex.lastIndex )
                          .replace(/}/g, "").split(/{/);
        // Add it to the last DOM stylesheet
        document.styleSheets[ document.styleSheets.length - 1 ].addRule(
          pair[ 0 ].replace(/^\s+|\s+$/g, ""),
          pair[ 1 ].replace(/^\s+|\s+$/g, "")
        );
        // Strip off the applied CSS
        cssText = cssText.substring( regex.lastIndex );
      }
    }
  }
});

Make sure you fully understand the above code before you copy/paste it!!!

]]> http://www.engfers.com/2008/10/30/internet-explorer-doesnt-evaluate-any-more-than-31-style-elements/feed/ 12 Google Chrome CSS Selector Speeds Compared http://www.engfers.com/2008/09/15/google-chrome-css-selector-speeds-compared/ http://www.engfers.com/2008/09/15/google-chrome-css-selector-speeds-compared/#comments Mon, 15 Sep 2008 15:45:48 +0000 engfer http://www.engfers.com/?p=386
Google somewhat surprised us all and released it’s web browser on Sept. 2, 2008; most users of the shiny new browser have been extremely impressed with the initial speed and features. I have to say that even I am impressed by this new browser (as long as I’m not behind a corporate firewall).  Since the CNET article came out about the extreme speed of Google Chrome, I immediately wondered how it would perform against other browsers in the mootools.net tool Slickspeed CSS selectors test, so I decided to do some benchmarking of my own.

The Setup

To do some benchmarking I downloaded the “mootools-developed” Slickspeed PHP framework from it’s Google Code hosted location, along with XAMPP to serve up the PHP pages required for the tests.

Hardware

  • 2007 Compac nc8430
  • Intel Dual-Core T2500 @ 2.00GHz
  • 1.00 GB RAM

Software

  • MS Windows XP Professional SP 2
  • XAMPP 1.6.7
  • Slickspeed (svn trunk version)

Browsers

  • Safari 3.1.1
  • Opera 9.5.2
  • Firefox 3.0.1
  • Internet Explorer 7.0.5730
  • Chrome 0.2.149.27

JavaScript Libraries

  • Mootools 1.2
  • jQuery 1.2.6
  • Prototype 1.6.0.2

I only downloaded 3 JS libraries because I thought that was enough to tell the difference between the browsers; this isn’t meant as an exercise at “who has the fastest JS library”.

To generate the results I installed XAMPP, installed slickspeed and set it up with the 3 JS libraries; then I opened each browser one at a time and ran the local copy of the slickspeed test:

This test runs 40 different CSS selector tests with whatever JS libraries you have configured atainst this W3C document. Each test is run separately in separate IFRAME tags as not to interfere with one another and report false data.

Data Collection

Data was collected by running the above slickspeed setup 10 times for each browser. After each time the test was ran, I recorded the final time for that browser.

** I used the final time in the slickspeed test because I was testing for the overall effectiveness & speed of the browsers. If you want to see how it performs on a per test basis, run it yourself!

The Results

Mootools 1.2 Results

Mootools used to be my favorite JS library. It has some cool features that make it pretty nice (like a stab at code organization using the Class object).

Safari operated the best with the Mootools library. Opera started out as a good candidate; however, the longer you kept open the browser and the more times you ran the test, the worse the response time got. Opera will show the same results for other libraries as well.

IE sucks, Firefox is good, Chrome is pretty darn good.

JQuery 1.2.6 Results

What is up Opera? You leaking stuff? No JS garbage collection? I did “hard” refreshes so the caches would be expunged; I just don’t get it.

Chrome and Safari FTW. IE bad, bad, bad.

Prototype 1.6.0.2 Results

Prototype made IE 7 look like the biggest piece of junk in the world; I have since then see the same results in YUI.  The IE results are an order of magnitude greater than the speeds of any of the other browsers combined. Keep in mind that less is better.

This was an extremely disappointing test; moreover, Opera still showed signs of memory leaks and slowly increasing final result times.

Chrome wins this battle; Safari a close second, and almost every other browser is not far behind. Yuck IE!

Final Results

So now we decided to take the average of all 10 tests and put it onto one chart so you can see the important stuff all summed up.

Final result conclusions…

  • Chrome did very well considering it’s a partial mesh of Safari and Firefox components.
  • Safari on a local copy of slickspeed did surprisingly very well.
  • Opera is okay if you view a web page and then restart the browser. Otherwise, JS applications become slower and slower.
  • IE needs a lot of work (but who didn’t know that already)

]]> http://www.engfers.com/2008/09/15/google-chrome-css-selector-speeds-compared/feed/ 14 The Proper Way to Align Images and Icons with Anchor Tags http://www.engfers.com/2008/08/28/the-proper-way-to-align-images-and-icons-with-anchor-tags/ http://www.engfers.com/2008/08/28/the-proper-way-to-align-images-and-icons-with-anchor-tags/#comments Thu, 28 Aug 2008 22:09:37 +0000 engfer http://www.engfers.com/?p=284 How many times have some of you tried to add an icon image to an anchor tag (link: <a>) or make some other random image part of that link and have had one-heck-of-a-time trying to align the text of the link and the image (<img>) tag?

I know that I have (especially when each browser treats the vertical aligning differently)…

Well here is the better way of aligning them that will make your life at least 10 times easier using 0 img tags and 1 anchor tag with CSS styling…

The Problem

Many times (especially in today’s web development) you may want to add icons to your links to make them more readable or bring attention to them.  Moreover, many large sites have adopted this “iconified-links” pattern to make life easier: www.linkedin.com, www.yahoo.com and www.facebook.com to name just 3. Well it would be good to have them aligned to make life easier!

Example: Yahoo! Front Page

On yahoo.com’s front page you can see the main navigation is a set of standard left-navigation links; however, each of those links have a specific icon associated with it.

If you hover over either the link text or the icon, you will see that they are part of the same link.

Moreover, if you inspect the link, you will see that there is no IMG tag.

If you look at the source of the where the image is coming from you will find this image… it’s a giant “sprite” (or collection of images) that represent all of the icons they use.

The Classical (Wrong) Way… :(

Say that you wanted to try and reproduce this type of behavior with a Logout button on your site.  You also want to have some fancy logout icon that you want displayed along with it.

We are going to use the “door_in” icon () from the Silk Icon collection of Mark James’ site famfamfam.com. Mark did a beautiful job constructing the 1000 icon set, and I would recommend to anyone to use his icon set with his permission! (See Below)

So now that we have our logout link and icon, it’s time to align them like Yahoo! has it (exactly centered). Now there are two ways that using the old way of thinking to go about this…

Ok, so Option 1 is completely stupid. Not only do you have to worry about aligning the two elements, you also need to make sure that the link meta-data is the same for both links! So we will automagically rule out Option 1.

Option 2 is a little bit better, so we will work with that. All right, we’ve used it and now its time to display it in our browser…

Ok so we already added a ‘border=”0″‘ attribute onto our image tag because a useless border is added when you stick images inside links, and now we see that the alignment is off for our image.

So, we adjust it to align=”center”… align=”top”… align=”bottom”… “middle”. Still not the results we are looking for, so we adjust the line-height the font-size, etc, etc… and we end up jumping through hoops just to get them align in IE, then we switch over to Firefox. WTH? Firefox doesn’t even align close to what IE shows!

Now you spend the next 3 hours trying to get those to align perfectly in every browser, but now what happens when your link is long and the lines wrap? Ahhhhhhhhhhhhh!

You’ve just lost all sense of indentation and you have a bad solution that can’t be generalized (not only that but any space you put between your text and the img tag leaves a space which gets put into the link as a useless underline ‘_’)!!

Well, read on to stop you from pounding your head against the wall…

The Solution

The Correct Way… :)

When I was staring at Facebook’s “iconified” solution I noticed that there was no image tag used at all; in-fact, there was no image information period!

I then looked a bit deeper and found the secret lines in their CSS code that does the magic for you.

background: transparent url(/images/icon.gif) scroll no-repeat left center;

padding: 2px 0px 2px 20px;

That’s it all-of-a-sudden the alignment works and works in all browsers!!! Even indent information is preserved when the text wraps!!! Yay.

Explained…

First let’s talk about the attributes we define on the CSS background property. It happens to be the shorthand version of about 5 other CSS commands (you should be using the CSS shorthands)

background: [background color] [background image] [background attachment] [background repeat] [background position];

[background color]

This operates the same way as the CSS background-color property; here, you can specify the background color (transparent is a valid color and is good for when your icons have transparency layers in them) that your element will have.

[background image]

This operates the same way as the CSS background-image property; this is where you specify any background images.  Valid entries are url(/path/to/image) and none. **This is where you define your icon image location

[background attachment]

This operates the same way as the CSS background-attachment property; this is where you specify if you want your background to scroll with the page or not. Valid values are scroll and fixed. “Fixed”is rarely used; it represents truly absolutely fixed position items. **We will use “scroll” for our purposes.

[background repeat]

This operates the same way as the CSS background-repeat property; here, you specify if you want your image repeated at all, repeated along the x-axis, repeated along the y-axis or repeated along both the x and y axis.  Valid values are repeat, no-repeat, repeat-x and repeat-y. **For our iconified purpose, we don’t want any repeating so we will use “no-repeat”.

[background position]

This operates the same way as the CSS background-position property. This represents the position that you would like to place the background-image from the top-left-corner of your element.  This can be represented by either two values or one value.

If you use the two valued version, the first value represents the distance from the top left corner along the X-axis.  Likewise, the second value represents the distance from the top left corner along the Y-axis.

If you use the single valued version, the only value represents the distance from the top left corner along both the X and Y axis.

Valid position are: physical distance (3px, 2pt, 1em, 50%, etc) or relative values: top, bottom, center, left, right. **We will use the 2-valued version:”left” as our X position and “center for our Y position

Padding is another short hand and doesn’t really need to be explained that much.

padding: [padding-top] [padding-right] [padding-bottom] [padding-left];

These values all depend on how big our icon images are and how large our text is.

For our example (18px by 18px icon) in normal text, a 2px top and bottom padding and a 20px left padding should do nicely.

Our Example In Use…

So now all we have to do is make a smart CSS class that has background and padding set properly…

Now we can just add class=”iconified” to any element (not just links)

Here is the result!

What happens if it wraps? (well, it works even more funny in IE; you need to add “display: block” to turn your anchor from an inline element to a block element for this to work properly)

Conclusion

There are many uses for combining HTML elements (div, span, td, a, etc) and the CSS background & padding properties besides just fancy icons: fancy bullets, pagination, borders, etc, etc.

Go and experiment with different backgrounds with different positions!

One thing to watch for: png icons have trouble with transparency in IE6 and below and the Twin Helix HTC fix (AlphaImageloader) will need to be applied for elements that use them. My advice is to just save it as a gif and see if the quality is reduced that much.

]]> http://www.engfers.com/2008/08/28/the-proper-way-to-align-images-and-icons-with-anchor-tags/feed/ 6 IE6/IE7 Anchor Y-Axis Border And Padding Fix http://www.engfers.com/2008/08/05/ie6ie7-anchor-y-axis-border-and-padding/ http://www.engfers.com/2008/08/05/ie6ie7-anchor-y-axis-border-and-padding/#comments Tue, 05 Aug 2008 15:40:52 +0000 engfer http://www.engfers.com/?p=146 Problem:

Internet Explorer truncates and does not display any vertical padding nor top and bottom borders on an inline element, such as an anchor, inside of a table cell.  Firefox and Safari display correctly without any problems.

Here is an example situation where we want to style an anchor tag with some padding inside of a table cell…

Well, we expect to see some border on all sides of the anchor tag with some gray background; however, as we open it in IE, we see… WHAT?!?!… the top and bottoms are gone?!?! See below…

Solution:

Add the CSS attribute “position: relative” and it’s fixed; nothing more, nothing less. See below.

Here is what the final result compared looks like…

IE Link Border / Padding Fixed with "position: relative"

Conclusion:

I wish IE didn’t suck so much. Next issue to tackle… why when you do this the padding overflows out of the outer container (just turn on table borders and you’ll see what I mean)…

]]> http://www.engfers.com/2008/08/05/ie6ie7-anchor-y-axis-border-and-padding/feed/ 5