Mozilla’s latest update to the Firefox web browser (3.5.7) is here, and it mainly prepares users for future updates. It seems that people who don’t run Firefox day in and day out didn’t notice the opportunity to jump from 3.0 to 3.5, because the browser only gave them a subtle background notification. After 3.5.7, major updates will always be presented with a dialog.

3.6 is going to be one of those major updates, but it’s been pushed back to some nebulous time in the first quarter of 2010. In that vein, Mozilla is planning (or at least hoping) to send a release candidate version of 3.6 to volunteer testers this Friday.

It’s critical for Mozilla to get updates rolling out more quickly for Firefox users, especially with Chrome making progress in winning a few progressive hearts and minds. There’s not much else going on in 3.5.7 — just a crash fix and a fix for interacting with servers that support NTLM authorization. Exciting stuff.

[via CNET]

Tags: browser, Firefox, firefox 3, Firefox 3.5, firefox 3.5.7, firefox 3.6, mozilla, software

Go to Source

Go to Source

If you’ve been experiencing autofocus issues with your Motorola Droid the good news that Motorola have now confirmed that that they are to offer an over-the-air update that will serve to fix the Droid’s autofocus issues which is expected to become available soon (various reports hint at next month, but there’s no official word from Motorola at this juncture concerning the actual date of availability).
(…)
Read the rest of Motorola Droid Camera Fix Release Confirmed [Droid Autofocus Fix Pending, Assumed to Hit Next Month as an Over-the-Air Update]

© TFTS – Technology, Gadgets & Curiosities, 2009. |
Permalink |
No comment |
Add to
del.icio.us

Go to Source

Whilst user feedback concerning the Motorola Droid is, on the whole, pretty positive wide ranging reports from end users have highlighted issues with the Droid’s camera, particularly relating to the Droid experiencing autofucus issues. But now one Droid owner appears to have stumbled upon a simple fix that appears, according to feedback, to be solving most user’s autofocus issues – that fix being just to give the Droid’s camera lens a good clean.
(more…)

See: Motorola Droid Autofocus Issues: Possible Fix [Droid Autofocus Issues Fixed by 'a Good Lens Clean'?]

Go to Source

1. Centering a Layout

Centering an element is probably something every web developer has to do while creating a layout. The easiest and most versatile way to center an element is to just add margin: auto; to the relevant element. The above method will take care of centering the element irrespective of the resolution and/or browser width. IE 6 in quirks mode however decides to handle this in the most unfortunate way possible: by not handling it at all.

Consider the Following Code:

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px auto;

}

The output you’d expect:

But what IE actually gives you:

This is mainly due to IE6 in quirks mode and below not recognizing the auto value we set to the margin property. Fortunately, this is easily fixed.

The Fix

The easiest and most reliable way to center content for IE6 and below is to apply text-align: center to the parent element and then apply text-align: left to the element to be centered to make sure the text within it is aligned properly.

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
	text-align: center;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px 0;
    	text-align: left;

}

2. Staircase Effect

Almost every web developer uses lists to create his navigation. Usually, you create the container element, create some links inside and then float the anchors in the direction he wants and calls it a day. Usually. IE though decides to make it a lot more complicated. Peruse through the following code:

    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>

ul {
    list-style: none;
}

ul li a {
   	display: block;
   	width: 130px;
	height: 30px;
   	text-align: center;
   	color: #fff;
   	float: left;
	background: #95CFEF;
	border: solid 1px #36F;
	margin: 30px 5px;
}

A standard compliant browser renders it like so:

And the IE screen shot:

Not a particularly pleasing navigation if you ask me. Fortunately, there are 2 fixes you can try.

Fix #1

The easiest way to combat this is to float the li elements themselves instead of the anchor elements. Just add this and you should be done.

ul li {
	float: left;
}

Fix #2

The second way is to apply display: inline to the enclosing li element. In addition to fixing this bug, it also fixes the double margin bug mentioned below. Purists may not like placing block elements inside inline elements though.

ul li {
	display: inline
}

3. Double Margin on Floated Elements

This bug is probably among the first ones a web developer starting out will run into and is specific to Internet Explorer 6 and below. Triggering it is as simple as floating an element and then applying a margin in the direction it has been floated. And voila! The margin will be doubled in the rendered output. Not really something you’d look forward to while creating a pixel perfect layout.

Consider this code:

#element{
	background: #95CFEF;
	width: 300px;
	height: 100px;
	float: left;
	margin: 30px 0 0 30px;
	border: solid 1px #36F;
}

On standards compliant browsers, this is how it looks:

But here is how IE 6 decides to render it:

The Fix

The fix for this specific bug is to apply display: inline to the floated element and everything works as it is supposed to. Our previous code now changes to:

#element{
	background: #95CFEF;
	width: 300px;
	height: 100px;
	float: left;
	margin: 30px 0 0 30px;
	border: solid 1px #36F;
   	display: inline;
}

4. Inability to Have Elements with Small Heights

As part of creating a layout, you may need to create elements with very small heights as custom borders for elements. Usually, you’ll just have to add height: XXpx to the style’s declarations and you should be done. Or so you thought. Check the page in IE and you’ll probably do a double take.

As an example, look at the following code:

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;
	margin: 30px 0;
}

And the output is just as expected: A 2 px element with a 1 px border.

And in IE:

Fix #1

The cause of this bug is pretty simple: IE simply refuses to size an element smaller than the set font size. Simply setting the font size to 0 lets you have an element as small and short as you like.

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;
	margin: 30px 0;
    	font-size: 0;
}

Fix #2

The next best way to deal with this bug is to apply overflow: hidden to the element so it collapses to the intended height.

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;
	margin: 30px 0;
    	overflow: hidden
}

5. Auto Overflow and Relatively Positioned Items

This bug rears its ugly head when in a layout you set the parent container’s overflow property to auto and place a relatively positioned item inside it. The relatively positioned item violates its parent element’s boundaries and overflows outside. Let me demonstrate. Look the following code:

<div id="element"><div id="anotherelement"></div></div>

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 150px;
	margin: 30px 0;
	overflow: auto;
}

#anotherelement{
	background: #555;
	width: 150px;
	height: 175px;
	position: relative;
	margin: 30px;
}

And the expected output:

And IE’s output:

The Fix

The easiest way to fix this annoying bug is to just position the parent element relatively too.

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 150px;
	margin: 30px 0;
	overflow: auto;
    	position: relative;
}

6. Fixing the Broken Box Model

Internet Explorer’s misinterpretation of the box model is perhaps its unforgivable mistake. IE 6 in semi-standards compliant mode sidesteps this but this issue can still be triggered by quirks mode.

Two div elements. One with the fix applied and one without. The difference in the width and height is the sum of the paddings applied on each side.

The Fix

I am sure the quandary with the box model needs neither explanation nor demonstration so I’ll just give you the fix.

The trick is to set the width normally for all standards compliant browsers, target IE5/6 alone and then feed it the corrected width. This is how you’d usually go on about:

#element{
	width: 400px;
    	height: 150px;
	padding: 50px;
}

This now changes to:

#element {
    width: 400px;
    height: 150px;
   \height: 250px;
   \width: 500px
}

Essentially, you add the padding to the original width and feed it to IE 6. The fix targets IE 6 in quirks mode alone so you need not worry about IE 6 in normal mode messing things up.

7. Setting a Minimum Width and Height

Setting an minimum height to an element is absolutely imperative when trying to convert a beautiful design into a pixel perfect design. Unfortunately, IE completely ignores the min-height property instead taking the height declared as the minimum height.

Fix #1

The fix is a hack created by Dustin Diaz. It utilizes the !important declaration to make it work. The snippet looks like so:

#element {
  min-height:150px;
  height:auto !important;
  height:150px;
}

Fix #2

The second way is to take advantage of the fact that IE can’t parse child selectors.

#element {
    min-height: 150px;
    height: 150px;
}

html>body #element {
	height: auto;
}

8. Floated Layout Misbehaving

One of the important concepts of building table-less layouts using CSS is floating elements. In most cases, IE6 handles this with aplomb but in certain cases it fumbles. When faced with unbreakable content or elements whose width exceeds its parent’s width, it causes havoc with the layouts. Let me show you.

Consider this piece of code:

<div id="container">
	<div id="element">http://net.tutsplus.com/</div>
	<div id="anotherelement"></div>
</div>

#element, #anotherelement{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 100px;
	height: 150px;
	margin: 30px;
	padding: 10px;
	float: left;
}

#container{
	background: #C2DFEF;
	border: solid 1px #36F;
	width: 365px;
	margin: 30px;
	padding: 5px;
	overflow: auto;
}

The expected output as viewed on a standards compliant browser:

In IE:

As you can see, the first div expands itself to fit the content which ultimately breaks the layout.

The Fix

There is no elegant fix for this bug. The only way to save the layout is to apply overflow: hidden to the element but at the cost of clipping the unbreakable content. The layout will be saved but the extra content won’t.

#element{
	background: #C2DFEF;
	border: solid 1px #36F;
	width: 365px;
	margin: 30px;
	padding: 5px;
	overflow: hidden;
}

9. Space Between List Items

IE 6 adds vertical spacing even none is specified in specific cases. Let’s look at the code first.

<ul>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
</ul>

ul {
	margin:0;
	padding:0;
	list-style:none;
}

li a {
	background: #95CFEF;
	display: block;
}

What it should look like:

What IE gives us:

Fortunately, there are a plethora of fixes you could try.

Fix #1

The easiest way out is to just define a width for the anchor tags and voila! everything renders as it should. Declaring a width triggers the element’s IE specific hasLayout property. You could instead define a height if you want to.

li a {
	background: #95CFEF;
	display: block;
    	width: 200px;
}

Fix #2

The next method is to just float the anchor left and then clearing it.

li a {
	background: #95CFEF;
	float: left;
    	clear: left;
}

Fix #3

The third method is to add display: inline to the enclosing li element. This also fixes the double margin bug as noted above.

li {
	display: inline;
}

Conclusion

And there you have it: the nine most common IE rendering bugs, and how to squash them. Hopefully this has saved you some blood, sweat and tears while debugging your next creation. I’ll be watching the comments section frequently; so chime in here if you are having difficulties implementing the fixes noted here.

Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

Go to Source

When I typed in alteredadvice.com/wp-admin all I got was a blank screen. I thought bad plugin or theme right? Well turns out it a whole lot easier of a fix. Basically I looked in my functions.php and found empty spaces at the top and bottom of my code. These spaces at the top or bottom of the functions.php file kill the admin dashboard.

Just thought I’d pass this little note along as one thing that can happen to wait 30 mins of your time.

Found the fix here: WordPress Help

Go to Source

This week in the Friday Fix!

Short Follow Friday list this week, want to be on the list? give us (@dertmobile or @ChadMueller) a reply on Twitter and we will toss you in there for next week.
We have some great web finds from all over and a few awesome submissions from our readers. Have a new site launch or product you want featured on Inspiredology? Just send us an email and we can add you in!

Follow on Twitter

@TheWebbyAwards
@DrewFromTV
@font_face_com

Design Contest – Win $500 – Only a few days left!

@ your library is seeking an original, creative design for its first ever Design a Tote Bag contest. The winning design will illustrate the fundamental spirit and importance of American libraries.

The Grand Prize Winner will receive $500 and a People’s Choice Award Winner will receive $100!
More details can be found here http://www.atyourlibrary.org/design-contest

Web Finds

http://webitect.net Incredible Digital Illustrations by Jerico Santander

http://blog.uprinting.com – 83 Nightclub Flyer Samples for Design Inspiration

http://www.jacksonpollock.org – Create your own Jackson Pollock! …I did (see masterpiece below)

Tutorials

http://www.noupe.com – 55 Adobe Illustrator Icon Design Tutorials

Submissions

Setster Setster
Simple intuitive appointment scheduling.
Install our widget on your website and start booking appointments with your customers today!
Allow your clients access to your availability with an intuitive user interface and give them the instant gratification of booking appointments online

Trademarkia Register your trademarks online easily!

iFee – Design calculator for your iPhone

Twitter Reply Submission

This week’s first responder for a feature in the Friday Fix was @font_face_com
@font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn’t got that font installed. This means that web designers will no longer have to adhere to a particular set of “web safe” fonts that the user has pre-installed on their computer.

Each week either @dertmobile or @chadmueller will be tweeting:
“First Designer / Studio to reply with this #Inspiredology Friday Fix gets a feature in the Friday Fix post on Inspiredology.com”
So be sure to follow us to see when we are calling for entries.

Go to Source

Another Friday Fix, thanks to all your submissions – we are getting more and more submissions per week. Also with the new introduction to the designer/studio Twitter feature we are trying to get more interactive and make the Friday Fix about you. So let us know what you think, and if you have any suggestions to make the Friday Fix better – comment and let’s discuss.

Follow on Twitter

@geminijess

@jQTouch

@RockablePress

@BoxedInDesign

@cssIllustrated

@CreativityGeek

@StandUP4Design

Design Contest – Win $500

@ your library is seeking an original, creative design for its first ever Design a Tote Bag contest. The winning design will illustrate the fundamental spirit and importance of American libraries.

The Grand Prize Winner will receive $500 and a People’s Choice Award Winner will receive $100!
More details can be found here http://www.atyourlibrary.org/design-contest

Web Finds

The CSS Awards – The best of the best in CSS

MeeCSS – A really cool cheap solution to add your new design to CSS galleries.

The Little Friends of Print Making – A really quirky fun website, and illustrations too.

http://strongstuff.net/ – Tom Whalen amazing artists

100 Artworks From The Top 20 Designers in The Middle East and Africa

29 Exquisite New Photoshop Examples

Photography Inspiration Amazing Pictures by Li Wei

77 Inspiring Blog Comment Form Designs

14 Best Online Typography Tools for Web Designers

10 Cutting Edge Folded Paper Artists

Tutorials

20 More Useful Adobe Illustrator Menu Tips – Some really cool tips here for you Illustrator lovers

Super Easy Neon Text in Photoshop

Illustrator Quick Tips #1 – Complex Symbols with Pathfinder

Illustrator ring shape via overlapping crescents effect

Submission

Victoria Blount sent me this really fun music video about SEO.

Interview

Interviewed on BoxedInDesign – I was recently interviewed on BoxedInDesign, it was a great interview so thanks to BoxedIn. If anyone would like to interview me, please just email met at muellerchad[at]gmail.com.

My Grand Canyon Adventure

So as some of you know – I recently hiked the Grand Canyon – I have been working on getting some pictures ready for you guys. I will be posting some Grand Canyon Textures in the upcoming week. As well, I love panoramic images and with the new house – we are printing some of the panoramic shots we have taken from our travels. I just finished two from the Grand Canyon. Let me know what you think – you can also view my Grand Canyon album here too.

Twitter Reply Submission

@DavidKaneda | Blog | jQTouch App

David Kaneda is the creator of jQTouch app – A jQuery plugin for mobile web development on the iPhone, Android, Palm Pre, and other forward-thinking devices. He also runs a blog called 9-bits where he writes about design, technology and business.

Each week either @dertmobile or @chadmueller will be tweeting:
“First Designer / Studio to reply with this #Inspiredology Friday Fix gets a feature in the Friday Fix post on Inspiredology.com”
So be sure to follow us to see when we are calling for entries.

Go to Source

Hey everyone, this week in the Friday Fix we have some web finds, tutorials, a very cool submission and we feature some work from our very own Chad.
Also this week we tried a new feature in the Friday Fix called “Twitter Reply Submission” Check it out!

Follow on Twitter

@MediaMilitia

@designbumped

@DCTH

Web Find

40 Extremely Impressive Examples of Photo Manipulation | http://webdesignledger.com

Tutorials

Coding Apple’s Navigation Bar Using CSS Sprites | http://www.threestyles.com

30+ Tutorials for Creating Stunning 3D Text Effects | http://www.tripwiremagazine.com

Projects

SkyTrax Stainless Steel Bottles – Chad is just wrapping up on this site. The site is built on the WordPress platform, with a lot of cool hacks. The site has a really clean typography and a nice environment for the SkyTrax Bottles.

Article

7 Steps for Systematizing The Design & Build Process | http://www.noupe.com

Submission

Illustrator & artist Rod Hunt has built a reputation for retro tinged illustrations & detailed character filled landscapes. With UK & international clients spanning publishing, design, advertising & new media, he’s created works for everything from book covers to advertising campaigns, theme park maps & even the odd large scale installation too. | http://www.rodhunt.com

You can buy the book here : http://www.amazon.co.uk

Twitter Reply Submission

This week I decided to try something new for the Friday Fix. I ran a brief twitter contest:
“First Designer / Studio to reply gets a feature in tomorrows Friday Fix post on Inspiredology.com”
This week @JoannSondy was the first to reply!
Keep watching your twitter feeds for both me [ @dertmobile ] and Chad [ @chadmueller ] for your chance to get a little feature in next week’s Friday Fix!

Joann Sondy – Graphic Designer | http://www.creativeaces.com

Go to Source

This week on the Friday Fix we are looking for some help with the Friday Fix, sending out a big THANKS, and learn some essential tips for designing a blog.

Web Finds

Tweeeeet Design

Web Design Updates

Lovely Package

Drawn! – Canada’s Cool Illustration Blog takes on Minimalism

The Hype Framework – New Project from Joshua Davis and Brandon Hall | Down The Foxhole

THANKS!

We want to give a shout out and a thanks to Shayne Sanderson ( @shaynesanderson ) for his help the last couple weeks with a few problems we had with the plug-in WP E-commerce by Instinct.
For other people out there that use the WP E-commerce plug-in we HIGHLY recommend the WP Ecommerce Bible, written by Shayne!
You can download this amazing resource here: www.wpecommercebible.com

Shayne also runs a blog that provides assistance with WordPress itself.

Web Articles

30 Examples of Brilliant Logo Design | Web Design Ledger

9 Things You Can’t Forget When Designing a Blog |  Tutorial 9

Tutorials

iPhone-like Sliding Headers | jQuery For Designers

“Active” State in CSS Navigation | Soh Tanaka

Twitter Followers

@shaynesanderson

@whatisblik

@designsoft

@conceptfeedback

@160over90

@freepursuits

Submissions

Stefan Sagmeister New Project

He is seeking contributions from people all over to world asking them to produce images of themselves for inclusion in his forthcoming “Happy” documentary. Each artist is asked to rank themselves on a scale of 1-10 (1 being terribly depressed, and 10 being ecstatic). Sagmeister will be animating the images which are contributed and including them in his documentary.

Inspiredology News

We have been doing the Friday Fix for about 2 months now and we hope that you are enjoying the links that we showcase here… We are always looking for submissions – portfolios, new apps, new start-ups the list goes on… But today we are opening up for something new – we are looking for some writers to write the Friday Fix…

We want to open up the Friday Fix for guest writer’s because we want your opinion on the public views. So please email us and let us know if you are interested. muellerchad[at]gmail.com, dertmobile[at]gmail.com

Go to Source