Code Retard » CSS

Restore Navigation Buttons after Firefox 3 Switch

adm_snackbar — Tue, 24 Jun 2008 15:59:25 +0000

I upgraded to Firefox 3 today and after the switch I found out that I had lost my left and right navigation buttons. After floundering for a bit, I was able to restore them quite easily but at the expense of my current toolbar layout and settings.

If your problem isn’t as severe as mine, it might be as easy as right clicking on the toolbar and selecting “Customize…”

From there it’s as easy as dragging the left and right direction buttons back onto your toolbar. If that doesn’t work you could also try clicking on the “Restore Default Set” button boxed in red below. I must warn you that this will delete your layout and restore state it was at the very first day you ran Firefox.

In my case, neither method worked so I had to take a drastic measure. I closed Firefox and then backed up this file:

C:\Documents and Settings\\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\localstore.rdf

and deleted it from my profile. After starting Firefox again, I got my navigation toolbar back (and tons of other junk I had cleaned out).

But while we’re at it, I’ll show you my current toolbar layout. I use a highly customized setting where I don’t even bother with the navigation and bookmark toolbars since vertical space is a precious commodity. Have a look:

To rid myself of the navigation bar, I simply moved the navigation, home, refresh, and stop buttons to the top toolbar because let’s face it, it’s just a waste of space past “Tools.” I also moved the address bar up there as well. Turns out there’s still quite a bit of usable space if you do this. Then I hid the navigation and bookmark toolbars since I already had everything I needed in the top toolbar.

I also tweaked my chrome\userChrome.css file in my profile to eliminate unnecessary buttons when applicable. What I mean is I don’t get the stop button when there’s nothing to stop, the forward button when there is no page to go forward to and so forth. The code to add in your userChrome.css file is quite simple and the comments describe what each accomplishes:

/* Remove Edit menu (if you already use all the keyboard shortcuts) */ #helpMenu, #edit-menu { display: none !important; }


/* Remove Back button when there's nothing to go Back to */

#back-button[disabled="true"] { display: none; }
/* Remove Forward button when there's nothing to go Forward to */

#forward-button[disabled="true"] { display: none; }
/* Remove Stop button when there's nothing to Stop */

#stop-button[disabled="true"] { display: none; } 
/* Remove Go button from address bar */

#go-button-stack, .search-go-button-stack { display: none !important; }

/* Make the active tab wider */ tab[selected="true"] { min-width: 200px !important; }

I have a tweak to remove the Go button because it really isn’t necessary when all you have to do is hit “Enter.” I also have a tweak to widen the tab I am currently browsing just so I know where I am. These tweaks will allow you to maximize your vertical browsing space and once you get used to it I’m sure you won’t ever go back to the old inefficient layout.

Center Div or Other Objects with CSS

adm_snackbar — Fri, 20 Jun 2008 22:01:44 +0000

CSS is a powerful method to describe the look and layout of a webpage but as versatile as it is, being able to center an object isn’t immediately obvious. Unlike HTML, which has an explicit centering tag, namely

no such mechanism exists in CSS. After a bit of research, I found out how to do it. Simply use the margin-left and margin-right properties. If you set them to the same value, that “centers” your object, be it a div or anything else.

div { margin-left: 50px; margin-right:50px; }

But what if you have a fixed width div object and you want it to vary the left and right margin based on the browser screen size? The answer is simple:

div { margin-left: auto; margin-right:auto; }

will do the trick. With auto, the values are always set to something equal and will automatically be determined based indirectly through the other layout properties you provide.

George Bush Rendered in Pure CSS

adm_snackbar — Mon, 05 May 2008 20:07:00 +0000

Using pure CSS to arrange hundreds of differently sized and colored characters, Roman Cortes has painstakingly drawn the current US President George Bush. It takes an artist’s eye and a CSS master to accomplish something like this, so props to Roman. It’s wonderful to see it being rendered like vector art when the page loads. To truly test if it’s really comprised of a bunch of characters, just highlight the picture on Roman’s page and you should see some familiar characters being highlighted. He’s also done a simpler Homer Simpson. Talk about taking ASCII art to another level.

Useful Quick References

adm_snackbar — Tue, 18 Mar 2008 05:12:39 +0000

Whether you program in C++ or code in HTML, you’ve probably encountered a quick reference (”quickref” for short) at some point in your career. These handy guides aren’t meant to teach newbies how to use the language, but are more like the index at the back of your textbook except condensed and consolidated in a few pages. Today’s post lists a few useful quickrefs that I’ve accumulated over the years. Here they are sorted by category:

For the web:

Web Designer’s HTML Card (credit: VisiBone)
Javascript Quickref v1.03 (credit: explain.th.at)
CSS Quickref (credit: deepx)
PHP Quickref (credit: ilovejackdaniels.com)
MySQL Quickref v4.0.2a (credit: deepx)
JSP Quickref (credit: Allaire)
Ruby Language Quickref
Ruby Library Quickref

For Microsoft:

C# Quickref
MFC Quickref (credit: He)
VB.NET Quickref (credit: Kellerman)

For C/C++:

ANSI C Quickref v1.3 (credit: Silverman)
STL Quickref v1.26 (credit: Medini)

For Configuration Management:

CVS Quickref v0.1 (credit: Ford)
SVN Quickref v28 (credit: Sobaniec)

For Hardware:

Verilog Quickref (credit: Qualis)
SystemC Quickref (credit: Transfer)