(saves bandwith, but can also make it easier to identify similar colors)

grep -nE '#([0-9a-f])\1([0-9a-f])\2([0-9a-f])\3' **/*.css

output from a random project:

css/actions.css:19:  color: #000000;
css/actions.css:38:  color: #000000 !important;
css/actions.css:53:  color: #ffffff !important;
css/admin.css:90:	color: #cccccc;
css/admin.css:94:	color: #aaaaaa !important;

The hack makes use of converting the background-image to a list item with an image.

/* Hack, to trick the browser to print another logo
   Unfortunetaly, Firefox on Windows doesn't show logo on print
    — see Mozilla bug 133490 for further details */
#header {
  display: list-item;
  list-style-image: url(../images/logo_print.gif);
  list-style-position: inside;
	margin: 0 !important;
  padding: 0 !important;
	height: 50pt;
}

This way, you don’t have to fall back to inserting an image tag in your HTML for the logo. Instead, just have an a element that contains the corporate logo text, and nothing all.

Unfortunately, the <button> element does not react to text-decoration: underline;

But according to a discussion at the CSS Creator forum, there is a way out:

I was just messing around with it and for some reason this doesn’t work:

input {text-decoration:underline;}

but this does:

input {text-decoration:underline;float:left;}

and

input{text-decoration:underline;display:block;}

and

input{text-decoration:underline;position:absolute;}

Don’t ask me… I can’t explain this one.

Interesting!

I ended up implementing it as

which also works fine. Here is my final rules for styling buttons as links

.clickable, button.tertiary, input.tertiary{
  color: #339;
  text-decoration: underline;
  display: inline-block; /* else underline won't work */
  cursor: pointer;
  border: none;
  background-color: transparent;
  font-size: 1em;
  padding: 0;
}
.clickable:hover, button.tertiary:hover, input.tertiary:hover{
  text-decoration: underline;
  color: #669;
}

/* Watch out for invalid/deprecated HTML in CMS */
b{font-size: x-large; background-color: fuchsia; color: yellow; font-weight: normal;}
i{font-size: x-large; background-color: lime; color: blue; font-style: normal}
font{background-color: aqua; color: red}
b,i,font{text-decoration: blink;}

This was really useful for identifying dirty HTML that was generated from a Microsoft-based CMS.

Coloring and blinking text makes the editors aware that something is wrong. Two major advantages for this approach:

• Instant attention on HTML validation errors (also for non-developers)
• Developers spend less time on hunting down invalid HTML that constantly sneaks into the web application.

These lines may also be useful to you — unless you are able to guard your HTML before it’s inserted in your application (something that was not possible at this project).

Tested with IE7. Has anybody tried this with IE8?

For more info see:

Internet Explorer issue – maximum of 32 CSS @import

PS. Silent ignorance is just about the worst form for ignorance when coding. The least they could do was to display an error in the error console.

Using CSS to Fix Anything: 20+ Common Bugs and Fixes

Good explanations to some of the usual I run into. For instance, the double margin float bug in IE 6

There are also examples of simple round corners (similar to the ones I have described last month), links to good explanations on float theory, and more.

Technorati Tags: css

Before you start, get Firebug for Firefox (if you haven’t got it already).

1. Press F12 and the Firebug window appears below in the browser window
2. Start the HTML inspector and mouse over any element, you want to learn about.
   
3. Now, you can see the HTML, the hierachy,and the CSS rules. For me it has been very useful, that overridden CSS rules are marked with strikethrough text. That’s a very handy information when CSS specificity plays in with a trick or two.
4. Press escape to stop inspector mode, and move mouse down to CSS rules.
5. Mouse over the CSS rules reveal a small icon to toggle the line. See screenshot animation below.

This trick will probably completely replace my use of “edit CSS” in Webdeveloper toolbar, the nifty CSSViewer add-on, and the mouseover DOM inspector bookmarklet.

Related info:

• Justaddwater: Web developer’s collection of browser tool (November 2005)
• Firebug keyboard shortcuts

Technorati Tags: css, debug, debugging, style editor, css view, firefox plugin, firefox add-on, modi2, slayeroffice, firebug, productivity

Now I stopped looking. E-texteditor for windows is very intuitive and easy to use. I highly recommend watching the screencast (a short tour of some of the best features). Although it’s still in beta, it seems so much better than the alternatives.

I’m using it for HTML, CSS, JavaScript, Ruby on Rails editing. And it just works.

One note for avoiding future head-scratching: In order to get the keyboard shortcuts (so-called bundles) to work, I had to delete Cygwin and let E install it automatically. Afterwards I had to add packages manually: Subversion (svn)

Other improvements that would be handy:
In HTML mode there is a shortcut “doctype [tab]“, but there is no shortcut for creating the rest of the HTML document. It’s probably easy to add (but i’m not into doing it yet). Besides, I think an addition like this would be a benefit to everybody, so it should be included in the general bundle.

In Ruby files, when looking on Ruby on Rails, it defaults the files to Ruby (because they are and they end in .rb). However, there is a lot of functionality with regards to Rails, so it would actually work better, if .rb defaulted to Ruby. Here is a workaround to add .rb files to Rails syntax.

I also added a bug report “Block selection should work without the mouse” (guess I’m a usability geek).

The simple cheatsheet for E-texteditor at errtheblog is worth checking out, although it contains only the general shortcuts and not the Rails specific ones. Via: RubyInside.

Technorati Tags: editor, e-texteditor, etexteditor, windows, textmate, html, css, javascript, rails, ruby on rails, ruby, rubyonrails, cygwin

I remember Eric Meyer mentioned this solution back at a workshop in 2005 (before he could actually tell that it was for Technorati — the redesign was unveiled a few days later).

Technique

HTML for the box:

<div class="bloginfo-summary boxc">
  <h2>..</h2>
  <ul>
    <li>..</li>
    ..
  </ul>
  <b class="cn tr"></b>
  <b class="cn br"></b>
  <b class="cn tl"></b>
  <b class="cn bl"></b>
</div>

The HTML is then styled with the following CSS:

div.bloginfo-summary {background:
  url(http://static.technorati.com/static/css/img/bg/fade-lightgreen.png) repeat-x;
  float:left;margin-bottom:20px;padding:10px;width:690px}
/* Large radius image backgrounds */
.boxc {position:relative;}
.boxc b.cn { height: 10px; width: 10px; background:
 url(http://static.technorati.com/static/css/img/corners/white.png) no-repeat;
 position:absolute;
 }
.boxc b.tl {top: -1px; left: -1px; background-position: top left;}
.boxc b.tr {top: -1px; right: -1px; background-position: top right;}
.boxc b.bl {bottom: -1px; left: -1px; background-position: bottom left;}
.boxc b.br {bottom: -1px; right: -1px; background-position: bottom right;}

/* IE Filters */
    * html .boxc b.bl {bottom:-2px}
    * html .boxc b.br {bottom:-2px}
    * html .boxc b.cn {background-image:
       url(http://static.technorati.com/static/css/img/corners/white.gif);
       line-height: 1px;
       font-size: 1px;
      }

So, graphically displayed, the

elements are actually positioned in each corner with no content:

Note that the background-image for the faded box is one thin sliced faded image:

The corners is made with only one image that’s positioned differently depending on which corner it’s in. The image is actually a transparent circle on white background.

shown on dark background for clarity.

So I included the final example on a separate page (because the Wordpress editor doesn’t let me add the HTML code precisely as it’s required)

example page: technorati-style rounded corners

More info
Eric Meyer: Technorati Redesigns (June 2005)
Smileycat: CSS Rounded Corners Roundup

Technorati Tags: web standards, css, html, rounded corners, technorati, tantek celic, eric meyer

Not to crash anyones party, but as far as I know, I actually came up with it first. I was working in San Francisco at Young and Rubicam, a major ad agency. I was part of a division called RPM,

We were in charge of designing for marketing and such. We had Chevron as a client, and they were going to launch an important campaign, it was a car character, like the cars from the Pixar movie last year. This was their new mascot.

We were designing a site for it. I had already gotten pretty good at HTML and worked out the spacer for my design problems, tables didn’t work right, and so many things were not cross browser compatible.

I named it spacer, just a quirky wording I thought appropriate, since it wasn’t actually a space, and if I was doing a text string search, I wanted it to 1. stand out, and 2. not interfere with the word ’space’ itself.

That’s an interesting update to the story, and it also deserves an update in the wikipedia article on Spacer.gif.

I emailed Joe to ask him if any screenshots, pictures, hardcopies were left from that site, and got this reply:

Jesper,

Hey man. Well, if you looked at my website, you will notice that I moved many times in the last 21 years. I was never very good at saving work samples, what I had saved is in France (if it wasn’t trashed) with my ex-wife, I am in Florida now.

So in response, no samples available. It’s all pure thought anyway. It’s about the idea.

For the Chevron project, I found the cars with a quick google search: www.chevroncars.com/meet/

The red, green, white and dirty car were the first ones launched. We made animated gifs with the eyes blinking, actually, I did, but it was my designer friend Michael who lead me to the ‘gif builder’ program.

We also did web work for Diamond Walnuts and Birdseye Frozen food, I made a site called FrancePlanetTours.com. I shared the spacer.gif solution freely with the other artists, I believe in openness– it would be silly to try and own every idea, and ideas can be stolen anyway.

So here it is. The story unveils itself more than ten years after the technique was invented. Actually it’s hard to understand today what all these spacer.gif’s are still doing on websites that don’t follow web standards. But in 1996 there was no such thing as decent CSS (*).

Tables and images had just appeared in recent browsers, so at that time, putting transparent pixels in table cells was the only way to achieve fancy layouts.

(*) Actually the first CSS recommendation was published in December 1996 but it took three years before the first browser with decent css support was released (Internet Explorer 5 for Mac).

Technorati Tags: anti webstandards, anti usability, spacer gif, table based layout, david siegel, transparent gif, transparent pixel, joe kleinberg, wikipedia