s

Posts Tagged with "xhtml"

Stop! Haml Time!

Nov 23, 2008  -  Comments

Ok, first of all I have to apologize for the title of this post, but I couldn't resist the pun.

Anyway, as the title suggests, I've recently converted all of my erb pages on this site to haml. Haml is a DSL templating language uses to generate well-formed XHTML. The documentation site claims that you can become familiar with the syntax in about 20 minutes. I think, as long as you already know XHTML, you can pick it up in about 10 minutes. The concept is pretty simple. Each tag should be on its own line, and everything contained in that tag should be indented below it. If a tag doesn't have any other tags contained in it, then the content can be on the same line as the tag. Also, div is the default tag, so you can just pass an id or class name to output a div.

%p This is a paragraph tag.
%ul
  %li First list item
  %li Second list item
#id_name Content in div
.class_name Content in div

Will convert to (with beautiful formatting):

<p>This is a paragraph tag.</p>
<ul>
  <li>First list item</li>
  <li>Second list item</li>
</ul>
<div id="id_name">
  Content in div
</div>
<div class="class_name">
  Content in div
</div>

It's really easy to include rails evaluation and output blocks too.

- @posts.each do |post|
  %p
    Written by
    = post.author
  %p= post.date

Notice that there is no need for end when a block is done. When haml sees that the indentation has ended, it automatically ends the block.

You can also pass any attributes to an HTML tag via a ruby hash.

%img{:src => "/images/picture.png", :alt => "Picture", :title => "Picture"}

I think the coolest thing about Haml is how it can assign a class and unique id to an element simply by passing an ActiveRecord object within square brackets.

%div[@post]

Will output:

<div class="post" id="post_18"><div>

If you'd like to learn more, you can take a look at the online documentation, or you can look at the code for my site on Github.

Tagged: rubyxhtmlhamltutorial

Rails inline ERb effects on HTML structure

Mar 31, 2007  -  Comments

When using Ruby on Rails, ERb (embedded Ruby) is used a LOT in the X/HTML. There are two types of ERb,

An evaluation block:

<% some_code %>

And an output block:

<%= @print_this_variable %>

These blocks are necessary when using Rails, and I've noticed that when I do a 'View Source' (via the Web Developer addon for Firefox, of course), I see a lot of funky spacing and line breaking where the ERb's have been evaluated. Probably fine for most people, but it makes reading the outputted HTML code a hassle.

It turns out that there are really three ways to use the evaluation ERb that can affect your spacing and line-breaking.

Firstly, the output block is used just like you'd expect to use it. If your code says this:

<p>
  Text before ERb.
  <%= "code_goes_here" %>
  Text after ERb
</p>

The resulting HTML will look just like this:

<p>
  Text before ERb.
  code_goes_here
  Text after ERb
</p>

Evaluation block use #1: If you just put a block, it will cause a line break after the block in the HTML, so if you had this in your code:

<p>
  Text before ERb.
  <% some_code %>
  Text after ERb
</p>

The resulting HTML code would look like this:

<p>
  Text before ERb.

  Text after ERb
</p>

Evaluation block use #2: If you add a dash(-) at the end of the block, it will prevent it from adding a line break. So, if your code looks like this:

<p>
  Text before ERb.
  <% some_code -%>
  Text after ERb
</p>

The resulting HTML code would look like this:

<p>
  Text before ERb.
    Text after ERb
</p>

The line break is gone, but the space taken by the block is still there. That leads us to. . .

Evaluation block use #3: If you add a dash(-) at the beginning AND end of the block, it will prevent it from adding a line break AND remove the leading space it would have taken up. So, if your code looks like this:

<p>
  Text before ERb.
  <%- some_code -%>
  Text after ERb
</p>

The resulting HTML code would look like this:

<p>
  Text before ERb.
  Text after ERb
</p>

You'd never know there was a code block there! Is this useful? I don't know... maybe.

Tagged: railsxhtmlerb

Using a background image on a table row

Nov 26, 2006  -  Comments

How many times have you had the need to apply a background image to a table row? Chances are, not very often. Before a week or two ago, I'd never even thought about it. I was living in blissful ignorance of the problems that can occur when trying to achieve this. But, of course, things don't go perfectly forever. Recently, Buck handed me a design for a client that incorporated complicated styling for a table that presented information. After the requisite belly-aching, I did what was asked of me. Very simple CSS:

tr.bar { background: url(/images/tr_background.gif) no-repeat 0 0; }

As you'd probably guess, it works perfectly in Firefox, but not Internet Explorer. But surprisingly, it doesn't work in Safari either. So, there must be more to this than just IE and their non-compliance. Having moved on to another project, I didn't have time to research the bug or find a solution. So, I handed it off to Colin, who, after a little experimentation, was able to find an excellent workaround.

The problem with IE and Safari is that they don't allow a background image to be applied to a <tr>. What do they do when you try this? The <td>'s inherit the background. This might not be a huge problem normally, but the reason the <tr> needed the background to begin with is because it had rounded corners on the top-right and top-left. So with the bug, each <td> had a rounded corner on the top-left, which looked a little funny.

Colin found a fix for this, which entailed making a class for the first and last <td>'s and having a separate image for them than the center <td>'s. This would work, but why not use the same image? Colin used the idea of having a class for the first and last <td>, but instead of making new images, he just fiddled with the background-position.

Here's what he came up with:

td.first { background: url(/images/tr_background.gif) no-repeat 0 0; }
td { background: url(/images/tr_background.gif) no-repeat 50% 0; }
td.last { background: url(/images/tr_background.gif) no-repeat 100% 0; }

This way, we use the same image. The first <td> starts the image in the top-right, showing the rounded corner, the middle <td>'s center the image, so you don't see either corner, and the last <td> starts the image in the top-left so you can again see the intended rounded corner. Perfect.

Tagged: xhtmlcss

Multiple CSS classes on a single element

Oct 19, 2006  -  Comments

Do you worry about repeating styles in your CSS? If a lot of your CSS classes use a common style like text-align: center; or color: #CCC:, you can actually create a single class for each of these styles and save a ton (well, not really, maybe one or two KB) of bandwidth on page load. A lot of people don't know about assigning multiple CSS classes to a single element.

Let's say you have a <p> tag that you want to add specific styles such as margin and padding, plus some pretty common(throughout your Web site) styles like text-align: center; and color: #666;. Instead of writing each of these styles for every element that they appear on, you can write a single class for each style, or group of styles that usually appear together, and just add it to the class application on the desired element.

Your stylesheet might look like this:

.specific_style {
  margin: 5px 10px;
  padding: 2px;
}

.center_text { text-align: center; }

.dark_gray { color: #666; }

And then you can add multiple classes to any element by separating them with a space, like so:

<p class="specific_style center_text dark_gray">Lorem ipsum dolor sit amet.</p>

This will apply the specific_style class as well as centering the text and coloring it dark gray. This is a wonderful way to keep your CSS DRY. Be careful though. Don't overuse this method or your elements will have classes a mile long. Very handy when used properly!

Tagged: xhtmlcss

IE double margin float bug

Sep 15, 2006  -  Comments

I'm sure most people have come across this bug once or twice (or a hundred times). You have a div with a set width and it's floated left or right. You also give it a margin on the same side that it's floated to push it away from the edge of the containing area. Works great everywhere . . . EXCEPT IE! Of course. Your CSS might look something like this:

#box {
  width: 200px;
  float: left;
  margin-left: 20px;
}

The problem with IE/Win is that it doubles the margin that's on the same side as the float. Why does it do this, you ask? Because it's IE. If it behaved the way it was supposed to, it would be Firefox.

There's actually a really simply fix for this. All you have to do is add the magical display:inline to your div, so your final code would be:

#box {
  width: 200px;
  float: left;
  margin-left: 20px;
  display: inline;
}

You can find this hack and many more at this great CSS resource Web site.

Tagged: xhtmlcssie sucks