Web Relay

X-Ray for Firefox 3!

I was so forlorn when I upgraded to Firefox 3 and lost X-Ray. But thank goodness, X-Ray is here and available...

http://www.designmeme.com/2008/08/14/xray-for-firefox-3/

posted by vwc @ 9:12 AM 1 Comments

Tools I Can't Live Without

Web Developer Toolbar: Indispensable for web development and debugging
http://chrispederick.com/work/web-developer/

Firebug: Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page...
http://www.joehewitt.com/software/firebug/

posted by vwc @ 12:02 AM 0 Comments

Positioning

An absolute element is positioned within the boundaries of the last positioned parent. If there is none, it's the viewport.

posted by vwc @ 11:14 PM 0 Comments

clearfix and clearfloat

Check out: http://www.patriciarees.com/art198/css-bugs.html

posted by vwc @ 11:04 PM 0 Comments

Eric Meyer Reset

It's always nice to start with a clean slate and this reset does just that:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

I've run into a few things that were buggered by this reset such as a CSS image gallery rollover. I had to isolate the a:hover rule and override the border attribute in order to get it to work.
http://www.pasadena.edu/centerforthearts/gallery.html

Another annoyance is that if you didn't want to turn off the bullets on your ul's because the default styles are ok, then you have to style everything since the reset strips out bullets, padding, margin.

posted by vwc @ 10:51 PM 0 Comments

Find & Replace

Find & Replace is so handy. I'm sure I haven't even begun to exploit the power of it such as searching for patterns. Wildcards are another nifty little thing you can use to isolate items.

For example, I would get a text file that had timecode in it and needed to convert this to a plain document to post for accessibility reasons. Timecode is denoted with [ ] but for some reason using the [*] meaning "everything between and including []" didn't work. So I had to replace [ with + and same for ]. Then do a find on +*+ with "use wildcards" checked and presto!, all timecodes were stripped. Careful with stuff enclosed in [] that you don't want to strip like [music].

The next thing I'd do is find ^p (the code for paragraph breaks) and remove all of those.

Finally, I'd go to Format > Change case and select lowercase, then sentence. This is in MS Word.

Find & Replace in Dreamweaver is super cool too. I learned you can search an entire folder and replace code. Very handy if you have a large site and need to update something.

posted by vwc @ 10:35 PM 0 Comments

Faking a second line indent on "li"

Since you really can't indent the second line of a "li", you have to fake it by using a negative indent on the first line. Here's some CSS to get started, courtesy of Pat Rees.
ul {
margin:0px;
padding: 0px;
}
li {
margin: 0px;
padding: 0px;
text-indent: -1.5em;
margin-left: 1.5em;
}

posted by vwc @ 4:38 PM 3 Comments