How to remove black border around input buttons in IE 7?

Here I am sharing a bullet proof working solution to remove ugly black border around IE 7 input buttons.

Problem

The problem is there when a submit button is inside the form element. Click outside the form, form focus is gone,thus black border is gone. But form is focused when page loads so the problem exists there.

IE7 Black border around input buttons

Not working solution

Every one suggest to add outline:none to fix this problem, since outline property is not supported by IE7, I say that this is a not working solution.

Bullet proof Solution

Just one property is required to get rid of this black border. Open you reset css file and add the these lines:

input[type=submit],
input[type=reset],
input[type=button]
{
       filter:chroma(color=#000000);
}

Why in reset css file?

Because the problem is for all buttons in IE 7, since adding this fix in reset.css will fix our problem in entire site.

That’s it. All black border is gone now. The fix is tried/tested against IE 7.

Result

Fixed IE7 Black border around input buttons

Better if you put this fix in IE7-CSS file.

Similar IE 7 Quick Trick

How that sound to you? Isn’t it helpful :).

Free HTML5/CSS3 WordPress Theme – Clin-UPress

After long time we are today releasing a very useful freebie – its a HTML5/CSS3 WordPress theme. Initially I coded this theme for my current blog, (where you’re now) but I came to create another minimal theme which is used now. So the theme was ready and without use in my HD – the reason I came to give it for you.

Theme is best suited for running personal blogs, community blogs, tech blogs etc. Having excellent typography ensures visitors will enjoy reading. There is Bebas for main headline and secondary headlines are on Arial, rest of the copy is in ‘Sansatin Regular’. I grabbed both fonts from FontSquirrel.

PSD

There is no PSD of this theme, I directly coded it in HTML.

Mark up

Theme is coded in HTML5/CSS3 on base of HTML5 Boilerplate. Its just a HTML Template, isn’t coded in PHP yet. Currently theme has following pages

1.) Home page

Clin-UPress Home Page

2.) Single post page

Clin-UPress Single Post Page

3.) Full width post page
4.) Contact page

Browser compatibility:

Since theme is coded in HTML5 and CSS3 – I have tried to use much less images as I can. This theme is compatible with standard browsers and falls gracefully in IE.

Copyright

You can use this template for any kinds of usage – in your personal blog page or may be in commercial projects, but you can not remove the footer link for original theme location.

Also I am gonna release its working WordPress theme which will be coded in PHP, subscribe our RSS feed or follow me in twitter to get updates.

Futher, what you can not do is you can not publish its version template in your blog. Let me know if you’re interested to code it in php & release it through this blog.

Check it out, demo of HTML Theme
Demo

You can grab all theme files in a ZIP, for free:
Download

If you find it really useful, share it.

Iconic Navigation Menu bar PSD

Today we have got something better freebie for you. Its a sliky, high contrast navingation bar with icon + texts for menu items.

Preview (Click on image to enlarge)

Silky Navigation PSD Freebie

There are Icons used in PSD, I find those icons on my collection, which I had downloaded long time ago, plz remind me who is the icon designer, if you remember.

All the layered psd is available here to download.
Enjoy downloading psd.

Download

More PSD Freebies

Resources to write better resumes and cover letters.

Write Better Resumes

Firstly a good Cover letter and secondly a better resume – the main weapons for all candidates who is seeking for a good job. This is where you’ve got a change to prove yourself that you’re the best fit for required position among others. It makes sense, having a good resume, but having a better resumes makes more sense and helps you better stand out from the crowd.

How are you doing on creating a effective resume? Here I have listed some of the best & proven to work resources that is definitely going to help you get most of it. Write a better resume, you got to read these guide lines.

Oxford Career Guide

Visit page

“A CV (curriculum vitae, or résumé in the US) is a summary of your academic, extra-curricular and work experience. It should be a brief document that illustrates you skills, achievements and interests.”


Google Student Guidelines for preparting resumes

Visit page

“To make it easier for us to determine where you might best fit within our organization, you can take a few simple steps to help us understand your qualifications.”


Target Jobs Career Advice

“Graduate CVs and job applications: they can take as much planning and preparation as an essay or project write up. Here we cover the basics of how to tackle online applications, structure a graduate CV and put together a covering letter.”


Harvard Business School’s Career Development

Visit page

“The resume is an opportunity to market yourself to a prospective employer. It should be succinct, target an employer’s needs, and distinguish you from your competitors.”


FreelanceSwitch Resume Basics

Visit page

“Many freelancers may think that a resume is a thing of the past—something only used to get a corporate job. So if you’re done climbing the corporate ladder, why would you need a resume?”


Monster.com’s Career advice

Visit page

“In a competitive job market, we have to do everything we can to make our resumes more attractive to hiring managers. This can be difficult for older workers, who fear that even if there’s no bias (subconscious or conscious) against job seekers on the mature side of 40, a resume may make them look overqualified for the positions they want.  ”


businessballs.com’s -> how to write a cv

Visit page

“While the basic rules of a good CV remain constant, the world of work and business changes quickly. This especially impacts on how managers and graduates can best show themselves to be outstanding candidates.”


oDesk blog

Visit page

“A wise freelance writer will not only be computer literate, but will also have a few other tech tricks up his/her sleeve. If you aren’t bringing in the freelance writing gigs you want, it may be time to sign up for a class or teach yourself one of the following writer-friendly tech skills.”


Smashing Magazines’s tips

Visit page

“Ah, the dreaded cover letter. Boring to write, difficult to get right, and you’re usually preoccupied by other things (such as the portfolio and resume, which are also really important).  Unfortunately, your cover letter is a company’s first exposure to you, and it determines whether your application is trashed or fast-tracked to the company’s to-hire list.”

Till here, you came so far, write a better resume & get a better dream job – best of luck.

How to remove links dotted border in IE7?

Is your head spinning trying a:focus{outline:none;} to remove the dotted outlines in active links in IE7? Well mine was. After a long research and trying a lot test, I came to face a good, well worked trick to remove those ugly dotted borders.

The myth

Try out Googling on this topic and you ll find everyone is saying use this:

	a:focus, *:focus {outline:none;}

A never working fix for IE7.

But hey, is that property supported in IE7? Simplest and fair answer is “No”. CSS ‘outline’ is not supported in IE7.

Here you will find a quick trick how you can remove active links dotted outlines from IE7. (Sorry for recommending to use CSS expression, but this is the only solution for IE7.)

The Solution

Nothing more, just one lines in needed in your CSS, but its a CSS expression.

a:focus, *:focus {
	noFocusLine: expression(this.onFocus=this.blur());
}

Fix Dotted Borders in IE7


Thats it. All those ugly dotted lines are gone. Its tested against IE7 only.

Do you have another css trick on this? Share with me – comment it down.

A blog about internet!