Hotmail Full Version Incompatible With Firefox 3
An anonymous reader notes that Hotmail’s full version doesn’t work with Firefox 3. Users get the following message when they try to log in: You are temporarily on the classic version of Windows Live Hotmail due to an error encountered during login. Before trying again, please clear your cache and cookies. (Clearing cache and cookies doesn’t fix it.) At least 8 other bug reports have been duped to this one. The fault apparently lies with the Hotmail site, not Mozilla — maintainer Dave Garrett assigned the bug to Tech Evangelism, explaining: “I’ll… move this over to TE, as my guess is this [is] the site’s fault (just bad user agent sniffing?).”
Mozilla Experiments With Site Security Policy
An anonymous reader writes “Mozilla has opened comments for an new experimental browser security policy, dubbed Site Security Policy (SSP), designed to protect against XSS, CSRF, and malware-laced IFRAME attacks which infected over 1.5 million pages Web earlier this year. Security experts and developers are excited because SSP extends control over Web 2.0 applications that allow users to upload/include potentially harmful HTML/JavaScript such as on iGoogle, eBay Auction Listings, Roxer Pages, Windows Live, MySpace / Facebook Widgets, and so on. Banner ads from CDNs have had similar problems with JavaScript malware on social networks. The prototype Firefox SSP add-on aims to provide website owners with granular control over what the third-party content they include is allowed to do and where its supposed to originate. No word if Internet Explorer or Opera will support the initiative.”
Customize Your IE 7 Theme for Firefox
I’ve always been amused at how a lot of people like to make their
browser look look like another another browser. I’ve seen a countless
number of Firefox users who have a theme that looks remarkably like IE
7, and I thought I would show off some tricks to make Firefox even more
like IE 7.
What you see above is Firefox 2 running with the myFireFox theme
installed. That theme gives you all of the buttons and tab
customizations that you need to give the browser a true IE 7 feel. You
can take it another step further by installing the myFireFox & Vista-aero Modifier extension.
You must have the myFireFox theme installed for this extension to work,
and as you can see in the screenshot above it offers several different
options for making Firefox look more like IE 7.
One of my favorite features is that it lets you alter the toolbar
background color when Firefox is minimized. IE 7 does this as well, and
it’s a nice touch to the theme.
You should definitely give this duo a shot if you use Firefox, but
prefer the look of IE 7. Personally I think I’ll stick with the Firefox
theme, but it might be fun to fool some friends with this, too.
Especially those who are too stubborn to try out Firefox.
MidnightFoxy – Dark Firefox Theme
I have a feeling I am not the only one who is wondering about this
one. What will happen to all the current Firefox themes once Firefox 3
goes final? It seems like a handful of theme designers are having
issues with getting their themes to look right with the new Firefox 3
interface. Will they all have to start from scratch again?
The above screen shot was taken from TwisterMc – who is describing his own issues getting the iPox theme to work correctly.
Top 11 Firefox themes
Top 11 Mozilla Firefox themes
There’s also a lot of crap. Luckily for you, I’ve waded through the morass and found what I consider to be the best themes for Mozilla Firefox. Of course, one of the greatest strengths of Firefox is the ability for every user to customize the browser as he or she sees fit. If you’ve got a favorite theme that I left off the list, tell me about it in the comments.
For a better look at the themes featured in this article, be sure to check out the related Download.com gallery.
11. Modern Modoki
Modern Moloki theme
Minimalism lives, and quite naturally with this stone-gray theme that’s perfect for the Web surfer or developer who wants his or her browser to fade into nonexistence. It’s clean, it’s clear, hey…it’s Netscape 8! Or is it 6? It’s both: The look of 8 with the color scheme of versions 6 and 7. Its nigh invisibility makes it a solid choice for the mysterious 11th spot.
Most importantly, of course, it works with most major Firefox extensions with interface-altering features such as the pictured two-paned bookmarks and All-in-One Sidebar.
10. NASA Night Launch
NASA Night Launch theme
What an appropriate Firefox theme to start off the Top 10 countdown! It’s not kicking off the list, but it’s blasting off anyway. The only thing that really distinguishes this theme from other polished dark Firefox themes is the shuttle image that “launches off” when a page is loading. See, you’re traveling to another planet on the World Wide Web universe!
Snark aside, the shuttle imagery throughout the browser looks fantastic, and it’s compatible with a long list of extensions. It’s also a nice tribute to the STS-116 mission.
9. MidnightFox
MidnightFox
If you’re gonna go dark, do it with style. I’m usually not much of a fan of black-background Firefox themes, but MidnightFox is a rare exception. The colorful buttons look great on the textured black interface, but unfortunately it didn’t work very well with All-in-One Sidebar, one of my favorite extensions. It still surprised me enough with its fancy look to make it on the list.
8. Super Mario Bros. 3
Super Mario Bros. 3 theme
For the Mario fanboy in everyone, live the dream with tunnels for toolbar icons and pipes for scrolling. A recognizable little penny spins and spins as your Web pages load, but there’s not much sign of the big man himself, and not a whole lot of polish.
All I can say is: needs more Yoshi.
7. extero
extero theme
I like the brand-new theme extero because it’s not afraid to take chances–like black drop-down menus on a near-white interface. Some of the menu icons, such as “Print,” are a little cryptic, but its Apple-esque style should prove popular.
The main reason it makes the list, however, is its “throbber,” or the icon that animates while a Web page is loading. extero’s is the coolest throbber I’ve seen this year…maybe the coolest ever.
6. HiVisGnome Jumbo
HiVisGnome Jumbo theme
If you’re gonna go big, you might as well go all the way. This helpful Firefox theme, developed as part of the Access Firefox project for users with vision problems, is the biggest theme I’ve ever seen. Some of the options icons look straight out of 1994, but it’s hard to beat for customizing an interface that’s as easy to see and use.
5. Miint
Miint Firefox theme
Ah, mint chocolate-chip ice cream. I’m personally not the biggest fan, but I send a shout out to my mom and everyone else who loves the stuff with Miint, a Firefox theme full of frosty green and dark chocolate goodness. There’s nothing to scream about, but it has its own cool style.
4. Redshift V2
RedShift V2 theme
Take a slide into the darker side, with this black-and-red Firefox theme that could appeal to both goths and 2 Fast 2 Furious racing types. A side bonus: the red highlights throughout the interface may convince coworkers that you bite.
The unique look wasn’t enough to keep me around long, however. As pictured, I made much use of the Theme Switcher feature enabled by the MR Tech Local Install extension during my trip into the world of themes.
3. Tinseltown
Tinseltown theme
If you’re one of those Christmas-loving maniacs who decorates every inch of your desktop with yuletide icons and loves to torment your coworkers with your holiday cheer, congratulations. Your Firefox theme awaits.
Confusing green and red Christmas lights denote back and forward navigation, respectively; red-nosed Rudolph refreshes your browser (huh?); and Santa’s hat means stop. Oh, it’s the initials! Hmm. Too bad it does nothing to my “Closed Tabs” taskbar icon (available via TabMixPlus). I was hoping for reindeer dung.
Aside from the seasonal appropriateness, what merits Tinseltown’s lofty status in my favorite Firefox themes list are the candy canes that replace your scroll and progress bars. Snazzy!
It’s for use during the holiday season only, unless you’re “that guy.”
2. TrafficFox
TrafficFox theme
Go. Stop. Spin yourself crazy circling an inescapable roundabout. Vous n’avez pas la priorite! TrafficFox is the perfect Firefox theme for anyone who loves the term “information superhighway.” Non?
Its sleek style–with traffic icons for navigation functions–and minimally intrusive yet informative interfaces transform Web surfing from a pedestrian experience to a joyride in a fancy European sports car. Really? Well, no. But the design does look slick.
1. Littlefox for Firefox
Littlefox for Firefox theme
There are a number of great “mini” themes out there. The goal is to maximize screen space, making it ideal for viewing large pictures or videos with your browser. I’m sticking to the one that I use the most: Littlefox for Firefox by Alfred Kayser.
One of my favorite touches are the gear icons for my little bookmarklets like ZAP. It’s clever like a Littlefox, and I’m sticking with it…for now.
3 Ugliest Firefox Themes
Why are so many of the Firefox themes out there on the popular list
so darn ugly? Here are just a few examples of some of the “most
popular” themes out there. So ugly you might want to slap your mama and
go back to Microsoft. Now that is ugly.
BloodFire
What is red, black and kinda hard to use? This Firefox theme! Now I
do not meant to hurt feelings here but I kinda like to be able to have
a peaceful and calm Firefox experience. This one makes me feel like I
need to sit in a dark empty cellar and write this by candle light.
OldFactory Black
With all the rustic switches and knobs, this one has the “hey this
looks cool” part of the theme down – but when it is all said and done,
it is really hard to use. The old-fashioned theme for a modern browser….. I always thought that was the title for all those Internet Explorer themes out there.
Red Cats (blue flavor)
I hate cats – they freak me out. Didn’t you ever watch or read Stephen King’s Cat’s
Eye story. They just give me the creeps… My deepest apologies to the
cat people out there I just can’t give this theme any love. The fact
that it is cute isn’t winning any points with me either.
This all leaves me with this thought, maybe I should do a countdown
or review before the end of the year of the real best looking themes
that are out there. Then again, I guess best and popular don’t always
fit together all that well.
4 Firefox Extensions for Website Designer
Most Firefox users download different kind of extensions
(plugin/add-ons) for certain purpose. Just name the purpose: Social
Networking, RSS readers, Mail Notifier, Bookmarking, Downloading,
Chatting, and many more. I bet you ~as a firefox user, and if you aren’t, quickly join us)~
are confused to choose which extensions is suited for your needs. You
should know the pros and cons of every extension as they weren’t
created by Gods. You can’t just stumble all the extensions to your
Firefox because it will decrease the performance (I won’t run a browser
which make me wait 2 minutes to open a new window). Thus, you need to
search for other’s opinion regarding the best extensions for different
occasions.
Well, here’s my review of Firefox extensions which related to web designing:
Web Developer
This is the must have tools that web designers should have. You can
view a web page and edit it at the same time. It’s a very good tool to
evaluate your own website, and to take a peek at other people’s work. I
wanted to make a detailed review about this extension, but Six Revisions already listed their 9 Practical Ways to enhance this tool.
Fire FTP
A powerful, less bugg, FTP application. Manage your account to
upload websites in simple steps. Easy to configure and use, as easy as
click and drag. Linux’s site is featuring this extension in one of their post. Why bother using dedicated FTP client while you can do it from your own browser?
NewsFox
An RSS Reader inside a browser will make you spend lesser time from
switching applications. I know that most of modern browser will include
their own RSS Reader. Even Firefox already have LiveBookmark. However,
NewsFox can manage your RSS Feeds neatly. It’s quite shame that they
don’t have the search feature for those feeds. I personally subscribed
50 RSS feeds and will keep growing, because more and more well designed
websites are featured each days. How to use? Simply add the feed you
are going t read, check the feed, and refresh the feed so that it can
retrieve updates from the site. Since I have many feeds to read every
day, I often categorized all the feeds. Every Friday I look for new
websites in Designsnack from their feed and use the following extension
to make a snapshot:
ScreenGrab
As a designer, you can’t always rely on your own work to get
inspiration. Try looking at others’ websites and see their layout
combinations. Sometimes if my sense of color harmony is not right, I
browse on my snapshot collections to choose on which website’s color I
can follow on. You can take a snapshot of the whole site, part of the
site’s frame, or only their visible portion.
FirePHP
FirePHP – Firebug Extension for AJAX Development
About FirePHP
FirePHP enables you to print to your Firebug Console using a simple PHP function call.
What makes FirePHP different?
All data is sent via a set of X-FirePHP-Data response
headers. This means that the debugging data will not interfere with the
content on your page. Thus FirePHP is ideally suited for AJAX
development where clean JSON or XML responses are required.
Two Hidden Features New in Firefox 3
Soft Hyphens
Tucked away in the list of CSS improvements in Firefox 3 is this innocuous-looking feature: “HTML soft hyphens (­) are now supported.”
Soft hyphens are one of those obscure gems that HTML has always supported on paper,
but that no one has taken any notice of because browser support has
been spotty. With the imminent release of Firefox 3, however, soft
hyphens will be supported by all major browsers including Internet Explorer, Safari, and Opera.
So, what is a soft hyphen, anyway?
A soft hyphen is a character of text that is usually invisible. It
signals a spot in the text (usually in the middle of a long word) where
it would be acceptable to break the line with a hyphen.
When a browser that supports soft hyphens encounters a long word or
other long piece of text with no obvious wrap point that doesn’t fit
horizontally inside a block on the page, it will look for a soft hyphen
within the text and display it as a normal hyphen followed by a line
break.
Take a look at this code sample:
| 1 | <div style=”width: 10em; border: 1px solid red;”> |
| 2 | Supercalifragilisticexpialidocious |
| 3 | </div> |
Display this in any browser, and the long word will protrude from the side of the div.
This situation arises all the time in real-world web design. Say
you’ve got a navigation menu that occupies 25% of the width of the
page. At small enough browser window sizes, a particularly long word in
one of your menu items will either protrude messily from your menu into
another part of the page, or force the menu to increase its width,
possibly breaking your page layout.
Soft hyphens to the rescue!
| 1 | <div style=”width: 10em; border: 1px solid red;”> |
| 2 | Supercalifragilistic­expialidocious |
| 3 | </div> |
Firefox 3 will be the last major browser to add support for soft
hyphens, but you don’t have to wait for it to be released to start
using them! Firefox 2 simply ignores the character, leaving it
invisible (and leaving your text protruding from its box). Not bad as a
fallback, especially compared to Safari, which used to display it as a
normal hyphen! Thankfully, Safari 2 or later gets it right.
Depending on how you edit your HTML, you may simply want to insert
the soft hyphen character itself rather than the HTML character entity
reference (­). It’ll save a few bytes, and good code editors (jEdit,
for example) will display soft hyphens as normal hyphens, so you can
see them in your code. Some are even smart enough to ignore soft
hyphens when checking your spelling!
You can type a soft hyphen in Windows by holding down the Alt key
and then typing either 0173 on the number pad, or the plus key on the
number pad followed by 00AD, before releasing Alt. If you can’t
remember that (I sure can’t), or if you’re on a Mac, you can find the
soft hyphen in the Character Map (the Character Palette in Mac OS X).
If you do decide to use actual soft hyphen characters in your code, make sure you know your character encodings,
because unlike most Latin-1 characters, soft hyphens are encoded
differently in UTF-8, so you need to save your code with the right
encoding for the soft hyphens to work.
Inline Blocks
Another obscure-but-useful new feature making its way into Firefox 3
after all the other major browsers support it (mostly) is the inline
block. When assigned to an element, a display type of inline-block causes the element to be positioned inline (like a span), but the element’s contents are laid out as if the element were a block.
This feature will come in handy in a number of situations in which the float
property is currently being used for lack of a better option. Consider,
for example, a thumbnail gallery layout based on this HTML code:
| 1 | <ul class=”gallery”> |
| 2 | <li> |
| 3 | <div class=”caption”>A short caption</div> |
| 4 | <div class=”thumb”><img src=”thumb1.jpg”/></div> |
| 5 | </li> |
| 6 | <li> |
| 7 | <div class=”caption”>A short caption</div> |
| 8 | <div class=”thumb”><img src=”thumb2.jpg”/></div> |
| 9 | </li> |
| 10 | … |
| 11 | </ul> |
Using a technique familiar to many designers, we can lay out the list items (li) in a grid by giving them all a specific width and floating them to the left:
| 1 | .gallery li { |
| 2 | float: left; |
| 3 | width: 100px; |
| 4 | } |
The list items are stacked horizontally against the left-hand
margin, and when the available page width is consumed, the browser
moves the next list item down until there is room for it. This produces
the neat grid layout shown here:
Now, that’s all well and good as long as the image captions are all
the same length. As soon as we factor in the real-world need for
captions of varying lengths, this technique runs into problems:
As shown, if one of the list items is taller than the others, it can
disrupt the grid layout. Since the browser will only move a list item
down the page as far as is necessary to find room for it, list items
can end up stacking against earlier list items that stick out from the
bottom of the row.
To solve this problem while still using floats is messy at best. You could set the clear
property on the list item at the start of each row of the grid to force
it clear of the preceding list items. Not only is this messy to code,
but it assumes you know which list item will start each row. One of the
nice features of this grid-like layout is that it automatically
arranges the list items into rows based on the available space—which
can change in a stretchy page layout.
display: inline-block is what’s needed here. Like
floated blocks, inline blocks stack horizontally across the page.
Unlike floats, however, inline blocks are neatly arranged into
horizontal lines—not stacked wherever they’ll fit.
Here’s what the code looks like:
| 1 | .gallery li { |
| 2 | display: inline-block; |
| 3 | width: 100px; |
| 4 | } |
| 5 | |
| 6 | /* In an IE-only style sheet */ |
| 7 | .gallery li { |
| 8 | display: inline; |
| 9 | } |
The second rule is necessary due to a bug in IE7 and earlier. Setting display: inline-block
correctly causes the contents of the list items to behave as if the
list items are blocks, but to get the list items to behave as inline
elements you must subsequently (and in a different rule) set display: inline. Since doing this would remove the inline-block display mode in other browsers, the second rule must be placed in an IE-only style sheet (or targeted with a CSS hack).
We must also make a slight tweak to the markup. Since the list items
will now be treated as inline elements, the whitespace between them
will become significant, and add extra space between the list items on
the page. This can be avoided simply by getting rid of the whitespace:
| 1 | <ul class=”gallery”> |
| 2 | <li> |
| 3 | <div class=”caption”>A short caption</div> |
| 4 | <div class=”thumb”><img src=”thumb1.jpg”/></div> |
| 5 | </li><li> |
| 6 | <div class=”caption”>A short caption</div> |
| 7 | <div class=”thumb”><img src=”thumb2.jpg”/></div> |
| 8 | </li><li> |
| 9 | … |
| 10 | </ul> |
And here is the result, with the invisible line boxes shown as dotted outlines:
Not bad, eh? The one difference that sticks out is that the list
items are aligned against the bottom of each line box, so that their
bottom edges line up. This actually works well in this example, since
the captions are above the images, but if the captions were below the
images it would look pretty ugly.
It turns out this is a feature, not a bug. You can control the alignment of inline blocks within a line using the vertical-align property. Simply set vertical-align: top on your list items, and you can get something like this:
Try it yourself
As you can see, inline blocks provide a much neater and more
flexible alternative to floats in many situations. With Firefox 3
likely to see rapid uptake amongst existing Firefox users, and with the
other major browsers all having decent support for display: inline-block, you’ll be able to use techniques like this in production in just a few months’ time!
Monitor Websites that don’t have RSS Feeds
Not so long ago I got an email from one of the readers asking if
there is a way to be notified about site updates when the site doesn’t
offer RSS feeds. And since there are plenty of popular sites that don’t
provide any feeds I thought it may be a good idea to write about it. So
if you’re interested here are some free tools that can do the job.
Monitor Webpages for Changes
If you’re a Firefox user then you can try Update Scanner.
It’s an extension that lets you monitor webpages for changes. You have
an option to choose how often the website should be checked for
changes, and whether it should ignore the minor ones, such as the
changes to numbers.
When the page changes it shows a notification alert. If you monitor
multiple webpages then you can get a quick overview of pages using the
arrow button located at the right bottom corner of the screen. Web
pages that have been updated will be shown in bold with an arrow next
to them.
If you don’t use Firefox then you can try ChangeNotes or ChangeDetection. Both of these websites can monitor requested webpages and will send you an email when something changes.
Monitor Error Pages
Mr. Uptime is a bit
different but serves a similar purpose. It’s another Firefox extension
that comes in handy when you come across a website that’s experiencing
down time. With Mr.Uptime you are able to add such a website to the
watchlist and get notified as soon as the website is back online. The
following image sums up the whole idea pretty well:
There is also an option to specify the interval at which the page should be monitored. Check out Mr. Uptime video screencast here.
-
Recent
- How Dell Is Making Ubuntu Linux More Attractive
- Amazon Explains Why S3 Went Down
- More Skype Back Door Speculation.
- San Francisco DA Discloses City’s Passwords
- SF Not an Exception In Giving IT Too Much Control
- Programmer’s File Editor With Change Tracking?
- Patch DNS Servers Faster
- Comparison of Windows XP and Linux/Sugar On the OLPC XO
- Atheros Releases Free Linux Driver For Its 802.11n Devices
- Tweaking Solid State Drive Performance On Linux
- Delivering 8K VFX Shots For the Dark Knight
- Thirst For Coltan Fueling African Conflict
-
Links
-
Archives
-
Categories
-
RSS
Entries RSS
Comments RSS
