The problem with obtuse triangles and CSS

Obtuse triangles are slightly more complicated, since you can only create acute and right triangles with the CSS shapes method linked above. Therefore I created two triangles: a positive (black) right triangle, and then a negative (white) triangle to emulate an obtuse triangle.

The HTML

<blockquote id="bubble">
    <!-- Black (positive) triangle -->
    <span class="arrow">
        <!-- White (negative) triangle -->
        <span> </span>
    </span>
    Content inside bubble
</blockquote>

Any tag combination will work as long as the CSS shape elements are inline elements.

The CSS

The two key parts of the CSS are the rounded corners (available in major, non-IE browsers) and the arrow that extends from the bubble.

#bubble {
    margin: 8px 0;
    padding: 10px;
    position: relative;
  /* Adjust these to taste */
    width: 175px;
    border: 2px solid #000;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px; /* Opera and Chrome */
}
#bubble .arrow {
    border-bottom: 0px solid #FFF;
    border-right: 20px solid #000;
    border-top: 15px solid #FFF;
    position: absolute;
    left: -20px;
    top: 5px;
    height: 0;
    width: 0;
    line-height: 0;
}
#bubble .arrow span {
    border-bottom: 0px solid transparent;
    border-right: 20px solid #FFF;
    border-top: 8px solid transparent;
    width: 0;
    height: 0;
    line-height: 0;
    position: absolute;
    left: -2px;
    top: -8px;
}

After all this, we have:

I haven’t done so here, but you can can create more interesting elliptical borders with:

    padding: 25px; /* <- increase padding to avoid text overlap of the ellipse */
  /* attribute: width / height */
    -moz-border-radius: 60px / 15px;
    -webkit-border-radius: 60px / 15px;
    border-radius: 60px / 15px;

Note that Opera uses border-radius and that Safari/Chrome does not support percentages. I know this doesn’t look as pretty in IE, but it’s a neat “progressive enhancement”. This might be a great idea for comments, twitter statuses or sub-headings.

There probably is a clever way to inherit a transparent color from a parent element, but I didn’t really take the time to dig into it. If you have improvements, I’d love to hear them.

Related posts:

1. Create a Color Palette Using CSS and MooTools 1.2
2. Use the table-layout CSS property to speed up table rendering
3. About the indirect adjacent combinator (~) in CSS

Using the CSS Indirect Adjacent Combinator

h3 ~ p {
  color: #FFFFFF;
  padding-left: 20px;
  border-left: 3px solid;
}

This would affect each <p> element that is a sibling of a preceding <h3> element. This is different from the Adjacent Sibling Combinator (+) in that it affects all following <p> siblings instead of just the immediate sibling. Let us see an example:

CSS Indirect Adjacent example

Here is the CSS for the above example:

#indirect-example1 h4 + p,
#indirect-example2 h4 ~ p {
    background-color: #CCC; color: #F00;
}

Cool, right? So you see how you can use this instead of the (+) selector to apply styles to the elements you want in basically everything except IE6-! This is a good example of something used for progressive enhancement that should be used to add detail to elements to give your users more information.

Update: Sorry for the name confusion. The latest draft of the CSS3 spec calls this the "General Sibling Combinator" and I didn’t think it had changed from "Indirect Adjacent Combinator" when I first learned of it so I used the latter. My apologies!

Have you ever used this? What was your experience and what ideas do you have for this CSS gem?

Related posts:

1. CSS Adjacent Sibling Selectors
2. Create a Color Palette Using CSS and MooTools 1.2
3. How to highlight search results with JavaScript and CSS

It looks like David Baron is working hard on new CSS support for Firefox 3. His latest blog post tells us that he has finished up support for a bunch of CSS3 selectors, available now in the Firefox nightly build:

We now support :nth-child(), :nth-last-child(), :nth-of-type(), and :nth-last-of-type() (see bug report) and :first-of-type, :last-of-type, and :only-of-type (see bug report)

This will be released with the next major version of ‘fox (probably 3.1). It looks like support for Media Queries is next. Hurrah! Good work David!

Related posts:

1. Early Adopters: Your Firefox 3 chrome tweaks are HERE
2. How to use the DOM Inspector to hack your Firefox UI
3. Cutting Edge: Exclusive Firefox 3 about:config hacks

As you can see from my site’s lack of design (davidwalsh.name), I’m about 90% programmer and 10% designer. As someone that’s not a designer, I’m really grateful for websites like ColourLovers — websites that provide you palettes of colors that look good together. Let’s pretend for a moment that I do have a good design and I want others to know my palette. MooTools 1.2 has made that a reality.

Step 1: The XHTML

<input type="button" id="get-colors" value="Get Colors" class="button" />
<div id="colors-wrapper"></div>

I’ve created two elements to begin with: a DIV that will serve as a wrapper for the color palette and a button that will trigger the color palette’s creation.

Step 2: The CSS

.dcolor { height:40px; }
.dtext {  }
.dwrapper { width:100px; float:left; padding:10px; margin:0 20px 20px 0; border:1px solid #ccc; }

The above CSS simply formats the elements that are needed to create the palette.

Step 3: The Moo 1.2 Javascript

//once the dom is ready
window.addEvent('domready', function() {

	//do it!
	$('get-colors').addEvent('click', function() {
		//starting the colors array
		var colors = [];
		var disallows = ['transparent'];

		//for every element
		$$('*').each(function(el) {
			//record colors!
			colors.include(el.getStyle('color'));
			colors.include(el.getStyle('background-color'));
			el.getStyle('border-color').split(' ').each(function(c) {
				colors.include(c);
			});
		});

		//sort the colors
		colors.sort();

		//empty wrapper
		$('colors-wrapper').empty();

		//for every color...
		colors.each(function(val,i) {

			//if it's good
			if(!disallows.contains(val))
			{
				//create wrapper div
				var wrapper = new Element('div', {
					'class':'dwrapper'
				});

				//create color div, inject
				var colorer = new Element('div', {
					'class':'dcolor',
					'style': 'background:' + val
				});
				colorer.inject(wrapper);

				//alert(val);

				//create text div, inject
				var texter = new Element('div', {
					'class':'dtext',
					'text':val
				});
				texter.inject(wrapper);

				//inject wrapper
				wrapper.inject($('colors-wrapper'));
			}
		});
	});
});

Once the DOM is ready, we start listening for a click on our “Get Colors” button. When the button is clicked, we store every element’s background color, border color, and text color. Once we have every color in our array, we sort the array and clear the wrapper DIV. For every color we’ve found, we create a DIV that displays the color and it’s hex value. That’s it!

The result? A sweet javascript script giving you a color palette of the current page. Click here to build a color palette of my example page!

Note: This script doesn’t accommodate images.

David Walsh is a Senior Web Developer residing in Madison, WI. He spends most of his day getting a monitor tan coding PHP, CSS, MooTools, and XHTML. When not tinkering with the newest version of Moo, David uses soccer, Rock Band, and movies to dull his coding pains.

Related posts:

1. Guest Post: Save Text Size Preference Using MooTools and PHP
2. A CSS-only speech bubble
3. About the indirect adjacent combinator (~) in CSS

/* Set table to 'fixed' (fastest render) layout */
.fixed_table {
    table-layout: fixed;
}

/* Set table to 'auto' (best fit) layout. This is the default */
.auto_table {
    table-layout: auto;
}

Or alternatively in JavaScript:

    $('elementID').style.tableLayout = 'fixed';

When you want to use table-layout: fixed

So how fixed table layout works is that the browser looks at the first row of the table and determines how to render the table based on the table width and the columns but NOT on the content of the columns. This allows large tables to be rendered faster but risks the table not displaying “optimally”. The best place to use table-layout: fixed is on larger tables (probably > 50 rows) and fairly uniform table cells (as in the cells should evenly divide the table). The benefit can be significant when the browser does not have to calculate the optimal width of each table cell.

When you want to keep the default style table-layout: auto

There is almost no benefit to setting a small table totable-layout: fixed. Furthermore, if the cell content varies greatly in length, your table may look really funky and different browsers may display your table in quite odd ways. Let me show you what I mean. Here is a quick example:

So don’t mess with table-layout: auto in these circumstances because it is just too unreliable. The harsh reality here with the automatic table layout is that the:

algorithm is sometimes slow since it needs to access all the content in the table before determining the final layout

This is why nesting or otherwise overusing <table>s is a bad idea.

For those interested, here is the official spec from the W3C. Have you ever used the table-layout CSS property? Was it useful and what was the result? Let’s hear it!

Related posts:

1. Quick Tip: Editing layout in Firebug
2. Javascript: Measure those “em”s for your layout
3. Using aliases and command-line functions for speed

In this post I’ll give you the necessary tools to change the look of Thunderbird and give you some suggestions (and code, of course :) to help you along the way. First, let me give credit to Twister MC’s wonderful post that I will be using as a reference for the label coloring scripts below. OK, let’s get started!

To start off we are going to need to setup our userChrome.css file for Thunderbird. Here are the instructions for that. We just basically need to create a chrome directory in our Thunderbird profile with a userChrome.css file in it. Another note here is that you can create a Stylish script using the Stylish Add-on for Thunderbird and putting these CSS snippets in there. Does Stylish have any limitations here? Let me know in the comments if so.

Right! So open up your userChrome.css file in your favorite text editor (not Microsoft Word, I recommend jEdit) We’ll need to begin the file by defaulting to the XUL namespace:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* set default namespace to XUL */

Then we get to the good stuff. Here are some snippets I have created for you to put in the userChrome.css file:

/* Change menu and dialog font sizes */
menupopup > * {
    font-size: 12px !important
}

/* Change font-size of email list */
.tree-rows {
    font-size: 10px !important;
}

/* Change all fonts to Century Gothic */
* {
    font-family: "Century Gothic", sans-serif !important;
}

/* Hide status bar */
#status-bar {
    display: none !important;
}

/* Get rid of the throbber */
#throbber-box {
    display: none !important;
}

/* Make Sidebar header big and bold */
#folderpane-title {
    font-size: 1.2em !important;
    font-weight: bold !important;
}

/* Hide Menus: menu_File, menu_Edit, menu_View, messageMenu, ltnCalendarMenu, tasksMenu */
#menu_File, #menu_Edit, #menu_View {
    display: none !important;
}

/* Remove disabled toolbar buttons until enabled */
toolbarbutton[disabled="true"] {
    display: none !important;
}

/* Make unread messages blue and italic */
treechildren:-moz-tree-cell-text(unread) {
    color: #CCCCFF !important;
    font-style: italic !important;
}

/* Change background color of unread messages to slightly red */
treechildren::-moz-tree-cell(unread) {
    background-color: #330000 !important;
}
treechildren::-moz-tree-cell(unread,selected) {
    background-color: #660000 !important;
}

/* Change colors of replied messages */
treechildren::-moz-tree-cell(replied) {
    background-color: #003300 !important;
}
treechildren::-moz-tree-cell(replied,selected) {
    background-color: #006600 !important;
}
treechildren::-moz-tree-cell(replied,current) {
    background-color: #009900 !important;
}
treechildren:-moz-tree-cell-text(replied,current) {
    color: #FFFFFF !important;
}

/* Change color of deleted messages */
treechildren::-moz-tree-cell(imapdeleted) {
    background-color: #999999 !important;
}
treechildren:-moz-tree-cell-text(imapdeleted) {
    color: #FFFFFF !important;
text-decoration: line-through !important;
}
treechildren::-moz-tree-cell(imapdeleted,selected) {
    background-color: #333333 !important;
}
treechildren::-moz-tree-cell(imapdeleted,current) {
    background-color: #666666 !important;
}
treechildren:-moz-tree-cell-text(imapdeleted,selected) {
    color: #DDDDFF !important;
}
treechildren:-moz-tree-cell-text(imapdeleted,current) {
    color: #DDDDFF !important;
}
treechildren::-moz-tree-cell-text(imapdeleted, offline) {
    background-color: #DDDDDD !important;
    text-decoration: line-through !important;
}

/* Folder pane(color/text) and Message pane(color) */
treechildren {
    background-color: #2D2D2D !important;
}

/* change Message Pane text */
treechildren:-moz-tree-cell-text(unread) {
    font-size: 10px !important;
    font-family: "Times New Roman" !important;
    font-weight: bold !important;
    color: #D50000 !important
}
treechildren:-moz-tree-cell-text(read) {
    font-size: 10px !important;
    font-family: "Times New Roman" !important;
    font-weight: bold !important;
}

/* Set no-label (default) bottom border */
treechildren::-moz-tree-cell {
    border-bottom: 1px solid #FFFFFF !important;
}

I’ve also created a snippet for pretty labels on GitHub. Enjoy!

You can add to these easily by using the Thunderbird DOM Inspector. I know my brilliant readers have some more of these up their sleeves so let’s see what tweaks you have for Thunderbird in the comments!

Related posts:

1. Jazz up your new Thunderbird tags
2. Early Adopters: Your Firefox 3 chrome tweaks are HERE
3. Tweak chrome for a cleaner Firefox

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2.

The CSS code

h4 + p {
    font-weight: bold;
    color: #000;
}

The text below is a simple example of the above code:

This is normal heading 4 text

This is the <p> after the heading. It should be bold and black.

What’s even better is that this seems to work perfectly in IE 7 (UPDATE: it seems that this does not work in IE6, so it will be a bit before this is usable on any large scale. However, it is still good to understand these obscure CSS selectors because you may come across them as a professional, especially if IE8 successfully puts IE6 out of the top 5 browsers), Firefox, Opera, and Safari. Now I know what you’re thinking. Where in the world am I going to use this?

Perhaps we could use something like this to do something to all rows in a table except the first row? What if we knew the next element after an <img> tag was going to be a custom caption that we wanted to place properly underneath our image? The only problem I see is that this couples the HTML and CSS more than we might like sometimes. However, there are many places that probably would benefit from something this simple. Simplicity rules. Now that you know how to use it I have every confidence you can come up with a brilliant use for it.

What ideas do you have to use this CSS gem? What other selectors have you found useful but don’t often see?

Related posts:

1. About the indirect adjacent combinator (~) in CSS
2. Personalize your Thunderbird by changing it’s chrome
3. How to highlight search results with JavaScript and CSS