Neatly Sliced

The next CSS Off contest is April 5. At one minute past midnight (12:01 am), you will have 24 hours to send your entry in.

The winning entrant not only gets to feel really cool, but either receive a cash reward or a doubled cash donation to a charity.

It’s fun. CSS up.

Popularity: 8% [?]

If a design calls for a graphical horizontal rule, often front end developers will stick in an img tag and call it a day. However, an hr tag would be more semantic - and, most rich text editors for content management systems have a button for the horizontal rule.

These styles allow cross-browser image replacement for horizontal rule. In my implementation, the IE rules needed to be embedded, but it may have simply been a style overriding elsewhere in the stylesheet. Try it in a conditional commented stylesheet first.

The modern method uses background-image to replace the hr, which is defined normally by border. IE works some wonky stuff with list-item and you may have to scoot things around to get it to work just so, but it works!

Where can I get HR image assets?

Josiah notes in his comment that he has provided some free images at Siah Design. Leave a comment if you would like to be included in this list.

Popularity: 100% [?]

June was fun, July was fabulous, August we took a nap, and it begins again September 15 at midnight CDT. There's a countdown on the site in case you don't know how that translates to your locality.

Yours truly is now part of seven judges hand selected for our love of all things good and pure. Learn a little more about the judges and then block off a chunk of the fifteenth for some hardcore CSS merriment.

Popularity: 12% [?]

Notes from An Event Apart Chicago:

• Do not hesitate to use a table if the data is tabular
• img: Treat the same as any other element
  • Set background-color for treatment, as even images have a background
  • Create a hover effect by creating a transparent image and use background-color for hover treatment
• Tables
  • Using a properly marked up table, with CSS you can create a bar graph (!)
  • This is the example stemming from Eric’s personal site (http://meyerweb.com/eric/css/edge/bargraph/demo-table.html , but a reworked version as presented will be available soon)
• CSS has no inherent notion of what the html elements are “supposed” to do. Override any behavior and “usurp” it (case in point, table turning into a bar graph)
• Impossible to completely divorce content from presentation. Apply style to an improperly structured or unstructured content is impossible - applying style to a txt file won’t work.
• The table/bar graph example:
  • CSS requires “hooks” (the HTML elements, ids, and classes) to work on.
  • Can do 100% width minus 20px: left: 100%; top: 50%; margin: -2.5em 0 0 5em;
  • The top 50 and negative margin-top is vertical centering
  • Q1,2,3,4 (in the bar graph) using q2:left:25%, q3:left:50%, q4:left:75%, you are creating each q1/q2/etc td defined as a discrete “width”.
  • Lots of pre-computation with the brown/green CSS height. Eric’s vision is to embed CSS and embed the height post-computation on the server-side. Alternatively (a second, not ideal, option) use JavaScript to accomplish the same feat.
  • Uses percentages to maintain scalability. Note: percentages can have decimals, as can rgb color values.
  • Places tick marks in an external div, highly nonsemantic (ack!) but in our own markup, we’re encouraged to use semantic HTML. Some basic CSS to position properly.
  • Swap “Height” to “Width”, “left” to “top”, etc. and you create a horizontal graph with the same dance & pony show.
  • WHY?
    • "It is the most accessible form of this data as possible."
    • Make good use of th - the “scope” attribute associates the th as a column, and a td as a scope=”row”.
    • The point is, the data is tabular, and you’re not limited in your design. You may properly mark it up, display it to make designers happy, and have the accessibility to please our blind users.
• Eric avoids use of “outset” and “inset” borders – he utilizes discrete top, left, right, bottom borders. Browsers (at this time) are far too inconsistent in rendering outset, inset.
• A separate note, this demo table is something we might usually create as an image, but obviously that is not an accessible solution (without the longest, most obtuse alt attribute in the world). Rather than extensive production work, we should analyze the cost/benefit of creating an XSLT to manage user data into accessible bar graphs.
• Reset stylesheets – deep in the browser application files, there are html/forms/etc css files – you can discern the browser defaults! Finally, the location! For example, Firefox2 on Mac: /communications/firefox 2.app/contents/macOS/res/html.css
• Use Eric’s as a guide, but make your own, and through this we have an idea of what elements are included: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
• With CSS: make your head, etc. displayed to the browser. Not useful in average instances, but useful for css test suites, and further proof of concept that any HTML tag can be styled with CSS - even the head tag.

Popularity: 20% [?]

Note: I have updated this post several times since the original publish.

At long last, the July winner is announced. Congrats.

The notes from the judges regarding my entry (I am #12) really did not extend much beyond my own observations.

Tony wrote that my .bug class is superfluous. I wholeheartedly disagree, for if the design were to change to add currently nonexistent divs that are not bugs, it will potentially complicate the code. Those elements will require classes. Then, where do you draw the line? Which divs require a class, and which do not, or should both have classes? I find it applicable to use the .bug class here, and were I to code it again, I would design the markup (for this section) in an identical manner. Plus, it makes more sense semantically when browsing the code.

JD noted that some stylistic elements were off. I know, I know, and I noticed them after I sent it in. I wrote about it in my aforelinked observations. He did not like the placement of the dots. That is a situation where, in coding the layout, I would call the designer to my desk and ask for his or her feedback. It is part of the challenge of this competition: trying to read the mind of the designer. In this practice, I inch toward the betterment of my own design skills. The variances between my mind and JD's were the downfall of this entry, but with his feedback I have a better understanding where I might improve next time.

I will refrain from comment on Ott's winning entry. It renders poorly in my Safari browser (along with the greater number of the entries), so I don't want to pursue the discussion any further, other than to elucidate the obvious problematic elements in Safari:

• The rust border around the search boxes are not flushed. It looks silly, and this is exactly why I refrained from implementing it.
• The dots are a few pixels off from the grey borders, in a highly noticeable manner.
• I would think that CSS Off wrote this entry on spacing with the winning entry in mind. What! Then why did it win? So weird. How does this one win when the judges explicitly write a post highlighting a flaw that the entry bears in full?

Ott's is a nice fluid layout, other than the Safari flaws. There's no hate, Ott, just my browser that never gets any dev love.

I'll still participate in the next contest, for my own CSS practice and article inspiration. In any vein, this contest is good because it gives me a rounded perspective of my front end dev skills, although I cannot refrain from expressing one more time my confusion over the explicit flaws of the winning entries of this competition and the previous. Okay, scratch that - they are not explicit flaws, but just... averages. The winning entries were average, not extraordinary or particulary noteworthy or clean, but just overwhelmingly normal and average. They are entries that I would see get the bronze medal - good, but better around who swoop in for the gold.

I absolutely adore the detailed notes on each entry. From skimming, I noted a few things I will give a second look (see: elastic rounded corner yellow box). I encourage all to peruse the notes.

The following remark by the CSS Off guys struck a particular chord with me:

As web programmers, our job is to translate a design to the web. That means taking into account different monitor dimensions and resolutions. And then designing the site to look good in them. A site loses trust points immediately when the design doesn’t look “finished.”

It is the mindset we ought to have, as sometimes we focus too much on the back end of a site to remember that key fact of good-looking sites reigning. The original point of the statement was to utilize the space of the screen, but I apply it in that we must to have a hand in the design nearly as much as the designer, and must keep a keener eye on our results.

And I got a good chuckle over the judges' references to my namesake (neat!). Thanks for the linklove, judges! Keep up the good work.

Popularity: 12% [?]

A design may call for the header or footer to span 100% width of a page, but the body of a design spread to a set width. Easily implement this by extracting the 100% width item from your main container div.

Easy as sliced cake!

Popularity: 9% [?]

Otherwise titled, "Multiple background images + the bane that is IE6". This explanation is in reference to my July 2007 CSS Off code.

In coding the design for the Early Bird h1 overlay, I implemented two overlapping background images: the pretty bird, and a horizontal grey bar.

Whether I ought to have made it a CSS background-image or an HTML img is irrelevant at this point, as I found an annoying IE6 bug regarding multiple seemingly unrelated CSS background-images.

The bird background-image was hidden by the horizontal top bar. To resolve this, I used IE6 filters to hide the HTML img and display CSS background-image for modern browsers, but to display the HTML img in the case of IE6.

Why does IE6 present the background-image overlap issue? The Early Bird h1 required position:relative. Why? Because IE6 hates me with the fire of a thousand suns. If you discover a better reason, kindly let me know, as I find this animosity between IE6 and myself most unsettling.

Really, semantically, we should not be using a background-image if there was meaning associated with the image. I was torn in this case, as it really is subjective whether the item necessitates semantic meaning or not. The method I implemented in my example really displays how both methods can work: HTML img with the IE6 code, and background-image with modern browsers.

In conclusion: if your background-images are improperly overlapping in IE6, try adding a position declaration on the hidden element.

Popularity: 28% [?]