Portland Web Development™

If you find it impossible to get certain items to lay on top of each other in a predictable way, you can always fall back on creating the element further down in your code and absolutely position it wherever you please. There are a few tricks to use in different design layouts, which I will discuss.

if you are using this in a centered div then automatically you are probably thinking this will not work because you must specify top or bottom and left or right parameters. Wrong! Just absolutely position the element, do not specify top; right; bottom; or left parameters, and instead, specify margins! This way the element will move along with your centered div layout as the window is resized or opened in resolutions different from the developer’s machine.

If you have a left justified web site that does not move when the window is resized then forget the margins and only specify that the element is absolutely positioned. That should bring it right to the top.

If many absolutely positioned elements are on top of each other and you want them arranged in a different order, z-index isn’t always the most reliable (especially in ie6), so all you have to do is move the code for the element further down in the page than the element you want behind it, absolutely position them and set the margins, BAM! Problem solved!

Hopefully this will help you if you are pulling your hair out on cross-browser issues. Enjoy yourself!

When most people want to execute javascript from a piece of text they usually use the tag. But they dont want the link to go anywhere so they use a the number symbol # in the href attribute to specify that nothing happens when it’s clicked. That is what in some web applications you will notice the address bar contains a number symbol # at the end ie. portlandwebdev.com/here.php#. This is the improper use of the anchor functionality and if you have a page that scrolls vertically you will notice some unexpected scrolling or jumping when clicking on links that have number symbol # hrefs specified. Instead of trying to get a pointer using this buggy technique, just use css to force the cursor on mouseover.

This is an extremely common question that is sometimes answered incorrectly.  Some will say to set at least two DIVs with the left-most DIV at a width of 50% and the right-most DIV with a negative margin that equals half of the right-most DIVs width. Though this does work, it is wrong.

Anyway, here’s the correct css code for a div with an id of ‘wrapper’.

Enjoy.

This is an improvement on a blog post by Zoe Gillenwater, so if you would like a more emotional (jk) experience reading as to why this is necessary, please read that.  Simply use this code:

This will place a scroll bar on the left for your entire site, which users are very use to. They will never notice. What they will notice, is the constant shifting when the scroll bar on the right comes and goes with long content pages. Cheers!

First off, if you don’t know, kerning is defining the space between two letters. Tracking is defining the space between all letters in a line. And finally, the em (pronounced as if you were to say the letter ‘m’, I was just saying E M for a while) space measurement is exactly that, it is the space taken up by the letter m in that particular font. It’s a very relative measurement.

Here’s a conversion table to help explain.

Seems like splitting hairs doesn’t it? I’ll explain.

If you have css code that specifies the letter spacing in px. Your letters will always be that many pixels apart from each other.

If you spicify a certain amount of em space, they will expand proportionally as the user makes the text bigger. So in theory, the page and text will look exactly the same no matter how big it is, assuming you are dynamically resizing your divs (or tables).

I personally prefer to use pixel measurements and restrict the user’s ability to re size the text on the page. Nevertheless, when interacting with design folks who are involved in predominantly print media, you’ll run into these and you’ll need to know how to apply them to the web.

If you are trying to set an image to display = ‘block’; or display = ‘none’; in IE when the default setting is none (you set the element to not display when the page loads), you are not going to be able to make it visible again. Wait..? Visible?!  Actually, that’s the answer, use visibility = ‘hidden’; and visibility = ‘visible’; and you will almost always get the effect you were looking for with the display property.

With the name “display”, it is sort of misleading but what the display property is actually doing is specifying to your browser what type of element the selected element is.  There are different kinds of elements, inline, block, etc. and they all have different behaviors and can have different properties applied to them in your browser.  Display can be used to convert elements from one type to another.  An inline element such as a list item <span>, which cannot be absolutely positioned can be converted to a ‘block’ element and positioned as if it were a div though, this is hardly ever necessary unless you are working with javascript effects libraries such as mootools or jQuery.