Archive for the ‘Browsers’ Category

How to display an icon for broken images in Firefox

Share/Save

The first part is make sure your browser.display.show_image_placeholders variable is set to true in your config file. To do this type about:config in the address bar of the browser, hit enter, and then do a search for this variable. A double click will change the value of the variable.

If you still can’t see the icon despite the fact that browser.display.show_image_placeholders is set to true then you need to follow this steps:

  • Go to the Firefox profile folder.
  • Go into the user folder found there.
  • Go into the chrome. folder
  • Duplicate the file userContent-example.css and save it as userContent.css
  • Open a text editor and paste the following code:
    /*
     * Show image placeholders
     */
    @-moz-document url-prefix(http), url-prefix(file) {
      img:-moz-broken{
        -moz-force-broken-image-icon:1;
        width:24px;
        height:24px;
      }
    }
    
  • Save the file and restart Firefox

On Mac Os X the path to the css file would look something like this:
/Users//Library/Application\ Support/Firefox/Profiles/ /chrome/userContent-example.css

I hope this had solved your problem.

Hide Text from Submit button with CSS

Share/Save

Here is the solution of how to get rid of your submit button’s text with CSS and not only that, we also are going to replace the entire button with an image.

You are not going to believe the hack that I had to used to make it work in IE6… seriously, when the hell is this browser going to die? Another nightmare of morning thanks to it.
(more…)

4095 CSS selectors

Share/Save

You may don’t know but the entire family of IE browser has a limit for the amount of CSS selectors to be swallowed; and when I say entire I mean IE6, IE7, and IE8.

Yes you read right, the “fabulous” new IE8 still is carrying that limitation.

Long story short is that IE stops reading selectors after 4095 ignoring the rest of your CSS code, however this is not happening in other browsers.

You may think this is a big number (I did too) but you will be surprise to see how easily the selectors growth when you are working with a CMS and a big big site.

Google CSS error

Share/Save

CSS is not an easy world and even Google make their errors.

I took this screen-shot today (20/03/2009), don’t you think those buttons are to close to the input box?

google_css_error

Nobody is perfect :D

Remove Safari’s input focus outer glow

Share/Save

It’s actually quiet easy to remove that outer glow when you focus an input element on Safari, a simple outline: none in your CSS code is all that you need.

Check the following examples and screen captures to see how it works:
(more…)

Firefox, hover-flow hidden, and flash

Share/Save

So, you have noticed that Firefox doesn’t handle the “overflow: hidden” very well with flash elements. I know, you maybe have a fancy slideshow that is working perfect with images and other elements, but when you try to add some videos everything goes crazy :( . Well don’t desperate, the solution is easy. (more…)

Firefox and its dots surrouding links

Share/Save

firefox-dots Those dots surrounding the links in the websites have been driving me crazy. You spend hours developing a new design and after you get those ugly dots crossing your entire website.

(more…)