I just came across an article about how to write CSS only visible to Safari 3.0 and Opera 9. It saved my life so I thought I’d share the love! It was especially useful to me while trying to use ‘display: inline;’ to create a horizonal nav out of an unordered list <ul>. It turns out Safari and Opera would prefer to see ‘display: inline-block;’ instead, which the other browsers don’t like at all. Now before you go test this, I will say that the only reason ‘display: inline;’ wasn’t working for me in Safari/Opera is because I’m trying to throw a background-color behind each list item <li> and pad it so that the color flows around the outside. Safari/Opera wouldn’t let me pad the list items unless they were set to inline-block.

You’ve seen piped navigation before. Typically found in the footer of websites, appearing as a list of links separated by a | (pipe).

There’s a nice way to fake piping using really clean, standards friendly code along with our friend, CSS. I’ve been using this method for years now and am quite happy with it. Basically, you start by creating a typical unordered list containing the list of links.

<ul id="piped">
  <li><a href="first">One</a></li>
  <li><a href="second">Two</a></li>
  <li class="last"><a href="third">Three</a></li>
</ul>

I’ll explain the class=”last” in a minute.

Now in your stylesheet you tell the list to be displayed without any bullets and displayed inline rather than stacked as is the default. You also give each link a nice pad on both the left and right. To fake the pipe, you simply add a border to one side. This is where the class=”last” comes in. You don’t want there to be a border after the last link, so for that class, you can simply set the border to none.

ul#piped li{
  display: inline;
  border-right: 1px solid #000;
  padding-left: 10px;
  padding-right: 7px;
}
ul#piped li.last{
  border-right: none;
}

(Realistically, you could also do border-left and class=”first.”)

The end result:

• One
• Two
• Three

I ran into an interesting problem yesterday while building a simple web page. I needed to cause the main image at the top of the page to do two things: 1) Be centered on a liquid layout page, so that no matter what size the window the image was centered. 2) "Float" above the design on it’s own z-index.

Of course to get the image to be on it’s own layer, it must be set to position:absolute; but once you give it an absolute position it loses all references to being centered.

I thought I had the solution at one point, until I tested it in IE and it was all wrong. After a few hours of struggling, I finally came up with what now seems like a simple solution:

Adding styles to the image itself was my mistake. In this case I had to wrap the image with a div and give it an id. I then applied the following styles to that div in my stylesheet:

#image {
  position:absolute;
  width: 100%;
  text-align: center;
}

The image itself doesn’t need any other styles.