An Accumulation of Pixels

IE8 CSS Hack

2009-05-22T15:45:00.003-04:00

So the quick hack I found last night does indeed work. Here is the breakdown of IE hacks:

div {
   color: black; /* works for all browsers */
   color: red\9; /* works for IE8 and below */
   *color: green; /* works for IE7 and below */
   _color: blue; /* works for IE6 and below */
}

Browser Review: Internet Explorer 8

2009-05-21T21:23:00.003-04:00

Internet Explorer 8 has been out for a little while now, so I wanted to share some thoughts. Firefox is my main browser, so I haven't really played around with IE8's features, just used it for testing. Here are my observations so far:

They did a good job a fixing some display issues that were broken in IE6 and IE7. For the most part, I have been able to find myself not worrying about how things look in IE8. Unfortunately, there are a few quirks - things I've found that work fine in IE6/7, but not 8. I mean, what the heck? Why do they fix some things, then break others? It just adds to the endless frustration that is Internet Explorer.

For those differences I found in IE6/7 vs. FF, I was just able to use the star and underscore hacks. (properties like "*width: 500px" will only display for IE7 and below, while "_width: 500px" will display for IE6 and below). At this point, I have not yet found a simple hack that will work with IE8. (A quick web search just now proved otherwise, but I have not tested it yet. I will write a new post if it does work.)

One thing I have found helpful in IE8 is its "Compatibility Mode". It allows you to view a website as IE7 would see it. I have found it's not perfect - it does not always display things the same way standalone IE7 would, but it is much better than using MultipleIE (which is not perfect, either).

So overall, IE8 isn't bad, but I still look forward to the day we will no longer have to fix our code just so it will look all right in outdated and incompetent browsers.

Using Variables in jQuery

2009-04-29T08:51:00.002-04:00

I occasionally use variables and for loops with jQuery in order to change certain items on a page. A good example of this would be my obfuscation script, modified to work for any number of obfuscated e-mails on a page.

jq(".replaceAt").replaceWith("@");

obfnum = jq(".obfuscate").length;

for(i = 0; i < obfnum; i++) {
jq(".obfuscate").eq(i).attr("href", "mailto:"+jq('.obfuscate').eq(i).text());
}

Notice the use of .eq(i). I have never had a problem with this, but the same method does not work if I were to do jq(".obfuscate:eq(i)"), which is quite necessary at times I want to change something inside of .obfuscate, and not .obfuscate itself. A quick Google search helped me find the solution:

jq(".obfuscate:eq("+i+")")

Fun Backgrounds

2009-04-08T13:06:00.002-04:00

I have seen a few sites recently that use this nifty effect: movement of certain images when you resize your browser window. It's hard to explain, so here are some examples:

http://css-tricks.com/examples/StarryNight/
http://silverbackapp.com/
https://www.redbrickhealth.com/

Pretty spiffy and super easy. They use multiple background images with attachment: scroll and various position percentages. Can't wait to try it out on a site.

IE Image Scaling Quick Fix

2009-03-17T13:05:00.002-04:00

I never knew this existed, but just came across this article.

To make Internet Explorer properly scale images, add this into your CSS:

img { -ms-interpolation-mode: bicubic; }

nice and easy :)

Firefox Extensions

2009-02-07T13:46:00.003-05:00

There are a ton of Firefox Extensions available to help web developers do their job. Here are the ones I use:

Web Developer: I don't use this one very often, but it has a ton of useful options. I mostly use it to turn off Javascript and CSS, or to resize my browser to a certain width.

Firebug: It would be a bit harder for me to do my job without this extension. Firebug allows you to manipulate the code of a page and see the changes directly on your screen. None of these changes are saved anywhere , they will go away when you refresh the page. I like to use it for testing CSS code before writing it into my CSS file (saves time from writing, saving, uploading, refreshing and fixing). It is also a helpful tool for debugging Javascript or jQuery. One important thing to know about the HTML code it shows you: this is the generated code, which is different from the normal source code. So if you have some Javascript written to change an item on hover, you can see the changes that are made in the code as you hover on and off the element.

ColorZilla: A color picker for your browser. Very helpful when creating images that need to match the colors in your site.

MeasureIt: A tool for measuring width and/or height of areas on a website.

Pixel Perfect: Requires Firebug. Overlays an image (like a design comp) on top of your site so you can check how close you are to the design.

Simple Rounded Corners

2009-02-02T19:30:00.004-05:00

CSS3 is still a ways out into the future. Sure, you can use some of its features, but if your sites need to be compatible for all modern browsers, you're stuck with CSS2 for the time being.

My most recent project uses a few rounded corners. Since I am using CSS2 and don't want any complicated code, I am using images for these curvy angles. If you read my previous post, you'll know that I'm trying to make my images as small in size as possible.

One solution is to use the sliding doors method. My problem with this is that in some cases, your one image is unnecessarily large, and in other cases, your image may not be large enough (you never know, especially if you work with dynamic content!)

My current project (immsersive-training.net) has boxes that fall into two categories: set height with unknown width, or set width with unknown height. For the boxes with set height, I made two images:

Obviously, the top and bottom of the box. For the middle of the box, I just used CSS. It has a set width and a border on the left and right. Pretty simple. My html code looks like this:

<div>
  <div class="header"></div>
  <div class="middle"></div>
  <div class="footer"></div>
</div>

The images are set as the background for the header and footer, and the CSS for the middle section is pretty simple:

.middle {
  border-right: 1px solid #999999;
  border-left: 1px solid #999999;
  width: 196px;
  padding: 8px 15px;
}

This also easily works for background colors other than white.

If your border is a little bit more complicated, then for the middle part I suggest using just a sliver image, and setting it to repeat-y.

Final Product:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Images - When and What to Use

2009-01-29T20:49:00.003-05:00

Other than photographs, images are used in websites for things such as logos, gradients, and rounded corners. The three main image types are jpg, gif, and png.

For photographs, jpgs are the best way to go. They can be saved at different qualities, so you can use a lower quality if you need a smaller file size. The problem with this is that with certain images, it is very obvious that the photo has a low quality. Pngs can also be used for images, but they have a much larger file size.

Png's greatest strength in web use is transparency. This can be helpful if you want to see the background behind a non-square image around the edges, or if the image is not completely opaque. The one downside to this is that Internet Explorer 6 does not support the transparency. The image will still display, but will be on top of a grey box. However, there is a trick for getting around this in some cases.

The png needs to be set as a background image, so all you need in the HTML is a block level element such as a div (block because we need to set the width and height). The width and height of the element needs to be the same as the image. So if transparent.png is 20x30px, here is what you put in the CSS:

.imageDiv {
width: 20px;
height: 30px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/transparent.png',sizingMethod='scale');
}

html>body .imageDiv {
background: url(&dtml-portal_url;/transparent.png);
}

The "filter" property is only recognized by IE, and IE6 ignores the > selector in the second part, so this background declaration is passed over. As you can see, this method has some limitations (can't use a repeat), but it can be quite useful.

Finally, we come to gif. I haven't used gifs much in the past, but lately have been trying to use them more. Gifs are not good for photos, because they tend to be very grainy. Gifs can do transparency, but not very well. Gifs are great, however, for things like logos, illustrated images, or rounded corners. Not only do they come out looking very clean, but they also have a smaller file size than a high-quality jpg. Or if you're wanting to build a mid-90's style website, gifs do support animation.

Book Review: CSS Pocket Reference

2009-01-07T13:11:00.003-05:00

A couple weeks ago I decided I needed a good CSS book. I walked into Barnes & Noble fully expecting to pay at least $40-50. I sat down in the Web Design section and started looking through all the thick books. What I was interested in finding was a book that could teach me something I did not already know about CSS. But all those thick books seemed to be more for beginner - intermediate users. They all had plenty of examples and pictures, but none of them had just what I was wanted.

Then I picked up the CSS Pocket Reference by Eric Meyer. This tiny book had exactly what I was looking for: a straight-forward list of all the CSS properties and their available values. For each property it lists things such as the initial value, what elements it applies to, a description, an example, and browser support. Not only is it a great quick reference, I was also able to learn a few things just from reading through the beginning of each entry.

My main complaint of this book is the language used in the descriptions. Some of them are actually too descriptive and wordy. For example, here is one of the rules of a floating element:

"A left (or right) floating element that has another floating element to its left (right) may not have its right outer edge to the right (left) of its containing block's right (left) edge."

This could have just been: "Multiple floating elements will wrap instead of pushing outside of their parent container." But if you don't want to read through all the wordiness, you can just play with the CSS and see what happens.

Final Rating: A-, definitely worth the $10

Image Cropping with CSS

2008-12-27T16:43:00.007-05:00

Part 1

Here is a quick, easy way to create a gallery by making all of your images squares. For simplicity's sake, in this example, all the images are 160x240px, both landscape and portrait. We'll make our squares 150px. In the HTML, wrap each image in a div, and give the div the following values:

div {
  width: 150px;
  height: 150px;
  overflow: hidden;
  float: left;
  margin: 0 10px 10px 0;
}

This sets up our square, and hides any part of the image that goes outside of that sqaure. Additionally, it adds a float and puts some space between each image.

Part 2

This gives us a good start to the gallery. My only compliant is that the images aren't centered within the div, we are only seeing the top left corner. So I wrote some jQuery that does this.

$(document).ready(function(){
  function centerImage(ele, w, h, pw, ph) {

      var heightdiff = -((h - ph) / 2);
      var widthdiff = -((w - pw) / 2);

      $(ele).css("margin-left", widthdiff);
      $(ele).css("margin-top", heightdiff);
  }

  $("div > img").load(function () {
      centerImage($(this), $(this).width(), $(this).height(), $(this).parent().width(), $(this).parent().height());
  });
});

See all this in action here.

From here, you can add more styles, link the images to a larger version, or anything else you can think of.

Inline List Items

2008-12-23T17:16:00.005-05:00

When putting together a list with the li set to display: inline, the list will display some extra space in between each item. This space can be quite annoying. To fix it, put a float on the list items.

Letting Things Go

2008-12-20T20:33:00.002-05:00

This post is going to be more of a rant than anything...

For the last 2.5 years, my husband was a youth pastor for a church in Indiana. Being the pastor's wife, I took on a few responsibilities, one of which being the church's websites. I took the time to design, implement, and maintain both the church's website and youth group website for free.

My husband was let go last month, so I quit updating the websites. I'm the type that hates to leave things undone, so I found a couple people that were willing to take over the updates, and spent some time teaching them how to do it.

I hopped on one of the sites today to grab some information, and found the site had been completely redone, but not by either person I had spent time with. Apparently someone else had been brought in to redo the whole website. My biggest complaint - it is now all in Flash (I have several other complaints as well, but I'm not going into those).

This is a static, informational site. There is no reason for it to use Flash. Flash should only be used for splash pages, videos, and games. They don't even have any special animation that would require Flash. Plus, a lot of nifty "animations" can be now be easily done with jQuery.

So this now brings me to my point. At times in your web designing life, you are going to quit working on projects and hand them off to the next person. At that point, it is no longer in your control, so whatever happens from then on is not your responsibility. But at the point of the hand-off: make sure to keep a copy of the code for your portfolio. I did this, and am glad I did since I can no longer refer to these websites. I'm thinking about rebuilding a couple pages to put up as samples on my personal website.

</rant>

How CSS Works

2008-12-09T21:24:00.004-05:00

I have encountered a couple situations recently in working with clients that are writing their own CSS. By looking at their code, I can see that they don't completely understand how CSS works, because they are writing too much code. So I decided a blog post on this topic was necessary.

The beauty of Cascading Style Sheets is their ability to cascade. Basically, when you have several style sheets, the last one to be read into the page is going to have the most importance, but all files will still be read. Certain parts of the less important files are just overridden.

So let's say in one CSS file you have the following attributes set for paragraph text:

p {
color: #000000;
font-size: 12px;
line-height: 16px;
}

This file is called into your document by putting this code in the <head>:

<style type="text/css" media="all">@import url("first.css");</style>

Now you have a second file you want to import, and it has these attributes for your paragraphs:

p {
color: #4c4c4c
margin: 0;
padding: 0 0 15px 0;
font-weight: normal;
}

And this second file is now added to your list of imported stylesheets:

<style type="text/css" media="all">@import url("first.css");</style>
<style type="text/css" media="all">@import url("second.css");</style>

All attributes will be read in from first.css, then second.css. Color is listed in both, so since second.css is listed last, it's going to take the #4c4c4c value, overriding #000000. All other values listed in first.css will still apply to the paragraphs. There is no need to duplicate the attributes listed in first.css into second.css.

To go into this a little bit further -- let's add a class called "bodyText" to that paragraph. Since it's still a paragraph, all the CSS listed above will apply. But now you can add more CSS that is specific to your bodyText:

.bodyText {
font-weight: bold;
border: 1px solid #123456;
}

Once again, the styles that have already been declared for paragraphs do not need to be duplicated.

Why?

Now why would you ever use multiple stylesheets? I'll give a simple example. Let's say you have a fairly large website, with three or four separate sections. You have one CSS file that will apply to the entire site. This will set things like page width and font. But now you want each section to have its own set of colors. This is where you can write a specific CSS file for each section. Each section will import the site-wide CSS, then that section's css.

A Matter of !Importance

Final note, I promise. If you were to go back to first.css and add !important next to the color (color: #000000 !important;), it is going to take precedence (unless, of course, second.css also had !important next to its color). I try to use this sparingly, especially since IE6 tends to ignore it.

E-mail Obfuscation with jQuery

2008-11-05T20:34:00.003-05:00

I recently was given the task to obfuscate e-mail addresses. I looked at a few options, and decided I wanted a method that followed some certain criteria:
   1. easy to implement
   2. effective
   3. linked
   4. selectable text

I found a blog where this guy put nine different obfuscation methods on one web page, and let it sit for a year and a half. This graph shows the effectiveness of each method. Using all of this data, I decided Javascript was the way I wanted to go. For extra simplicity, I went with jQuery

<a class="obfuscate">example<span class="replaceAt">-AT-</span>gmail.com</a>

<script type="text/javascript" charset="utf-8">
$(".replaceAt").replaceWith("@");
$(".obfuscate").attr("href", "mailto:"+$('.obfuscate').text());
</script>

The first line replaces the whole .replaceAt span (including tags) with an @, then the second line takes the constructed e-mail and sticks it into the href of the <a>. Those without Javascript installed will see example-AT-gmail.com.

Dynamic Text in a Limited Amount of Space

2008-10-29T22:25:00.002-04:00

A common problem I've seen when working with dynamic text is you sometimes don't know how much text the end user is going to enter, and this can be a problem when you have a limited amount of space. Generally, you set the container to overflow:hidden and be done with it. The problem with this is that sometimes your text gets cut off in the middle of the line so only the tops of the letters can be seen. It's especially a pain when you are never 100% sure that your users are going to have the correct font.

One solution is to limit the amount of characters, but this isn't always very consistent with the varying sizes of words - you can end up with more or less space available than desired. I decided I wanted to limit the amount of lines, and was able to achieve this with just CSS:

.box {
width: 50px;
height: 50px;
}

.box span {
display: block;
font-size: 10px;
line-height: 14px;
height: 42px;
overflow: hidden;
}

<div class="box">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</span>
</div>

The line-height here is important, and then setting the height to 42px limits our text to 3 lines (14 x 3 = 42). A "read more" link can then be added after the span, if desired.

Quick Border Fix

2008-10-16T15:36:00.003-04:00

Ever have a problem with borders mysteriously disappearing/reappearing from some of your items in IE? Give the item "position: relative;"

Cellspacing and Cellpadding With CSS

2008-09-29T09:52:00.005-04:00

In HTML, a <table> can have a couple attributes added to it: cellspacing and cellpadding, and these attributes are valid code. Unfortunately, these have default values so that writing

<table>

is basically the same as

<table cellpadding="1" cellspacing="2">

This becomes a problem when you do not want this additional space and cannot change the HTML, as cellpadding and cellspacing are not CSS attributes. There is still a way to get around this in CSS with the following code:

table {
border-collapse: collapse;
}

table td {
padding: 0
}

Always Learning

2008-09-11T10:17:00.003-04:00

It seems funny to me, that because of the way I learned CSS there are still lots of things I don't know.

For instance, a couple weeks ago I was in a Barnes & Noble and picked up a CSS book. After flipping to random page, I found a CSS property I didn't know existed: outline. When used in this way:

a { outline: none; }

the outline you see after clicking on a link no longer displays.

This is particularly helpful in Firefox, because for absolutely positioned links, the outline often stretches to the far left side of the page, which drove our QA person nuts. Previously, I was fixing this behavior by using overflow:hidden, but this doesn't always work depending on how your links are set up. I personally don't like the outline, so I plan on setting it to none on all of my sites now.

IE6 Disappearing Images Solution

2008-09-05T16:43:00.007-04:00

After a bit of testing on my issue with the sprites disappearing on hover, I came up with a temporary solution. I still wasn't satisfied with it, and did some more searching on Google. That lead me to a nice script that fixes the problem. Here are the two solutions:

Temporary Fix:
Take the images being used for each link, and set them as the background of the ul or table you are using for the navigation. I made a quick attempt to set the image as the background of the li that contains the anchor, but that still flashed. It seemed to work fine putting it in the background of the ul. This solution does not fix the disappearing images, just makes it less noticeable.

Script Fix:
Doing a Google search led me to this script:

<script type="text/javascript">
document.execCommand("BackgroundImageCache",false,true);
</script>

and that seemed to fix the problem just fine. I have more testing to do, but hopefully this will be my final solution.

IE6 and Dropdown Navs

2008-09-03T22:27:00.000-04:00

So I have run into this certain issue lately involving dropdown navigation menus and IE6. It doesn't happen all the time, but with certain sites I have noticed the background on menu items disappearing when you hover over them to display the dropdown. It doesn't always only cause the hovered item's background to disappear, but sometimes also the background of the items continuing to the right of the hovered item.

I am pretty sure this is being caused by the Javascript that was written for the dropdowns to work, specifically for IE6. The dropdowns do appear in other browsers without the use of the Javascript. The JS in question simply changes the name of the class applied to your hovered item. I tried to use JQuery instead, and got the same result.

Upon further inspection today, I found that this is only happening when your main nav items are using background images, instead of pure CSS colors. The images I am using are even sprites, so there is no apparent reason for their disappearance. One site I am seeing this behavior on is our own, so that can easily be changed to not use images. The other, unfortunately, is a client site. The designer has designed the site in such a way that images are necessary, and as we recently discovered, the client is using IE6.

So much for ignoring the obsolete.