CSS: Blue Border in Ie and Firefox Only

button.launch {background-color: #F9A300;border: none;height: 40px;padding: 5px 15px;color: #ffffff;font-size: 16px;font-weight: 300;margin-top: 10px;margin-right: 10px;}
button.launch:hover {cursor: pointer;background-color: #FABD44;}
button.launch {background-color: #F9A300;border: none;height: 40px;padding: 5px 15px;color: #ffffff;font-size: 16px;font-weight: 300;margin-top: 10px;margin-right: 10px;}
button.launch:hover {cursor: pointer;background-color: #FABD44;}
button.change {background-color: #F88F00;border: none;height: 40px;padding: 5px 15px;color: #ffffff;font-size: 16px;font-weight: 300;margin-top: 10px;margin-right: 10px;}
button.change:hover {cursor: pointer;background-color: #F89900;}
button:active {outline: none;border: none;}
button:focus {outline:0;}

<button class="launch">Launch with these ads</button> <button class="change">Change</button>

How to remove the border highlight on an input text element

Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.

In your case, try:

input.middle:focus {
    outline-width: 0;
}

Or in general, to affect all basic form elements:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

---

In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):

[contenteditable="true"]:focus {
    outline: none;
}

Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:

*:focus {
    outline: none;
}

Remove blue border from printed link images in IE8

Big derp moment for me.

Using:

a img { border: 0; } 

in media="print" sheet worked perfectly.

Firefox shows blue box around image link

I was able to remove the border by setting the anchor color to transparent:

a.hi {
  color: transparent;
}

Crazy CSS Issue in Firefox Only - position fixed and background color

It is layout rendering bug in Firefox. This bug was already reported and as I know it is fixed in next release. Only solution I know is to use opacity:0.9999999. It would render correctly as opacity:1, but fix this annoying bug.

Try #header { opacity:0.9999999; }

Bugzilla : Bug 677095

EDIT: Firefox 8 is not affected with this bug and setting opacity to 0.9999999 will result in weird border around the element, so I prefer not to use it anymore

Border-image and CSS image not lining up in Firefox only

1. I tried the -1px as well but I set the height to 50px. Not exactly what you want but seems to be on the right path.

.compare .item {
    background:#fcfcfc url(bg-compare-item.gif) no-repeat 0 -1px;
    height:50px;

    /* original */
    text-align:left; line-height:29px !important; border:0;
}

2. Another solution is to shift the top line on the image down 1px and completely remove the bottom line. Then have the -1px in the CSS and you'll get the desired results. Looks good in Chome, IE9, and Firefox.

CSS curve border in IE not working

Unfortunately IE6-IE8 do not support rounded borders. Instead you would need to use something like CSS3PIE.

IE9 however DOES understand border-radius

Update further to comment that it 'won't work' - here is a quick step-by-step (this is a very simple, high-level sample.

1. Download CSS3PIE at http://css3pie.com/download-latest
2. Save the .htc file in the root of your site

3. Lets say you have a div with the id of foo:

   <div id="foo">Hello, I'm rounded</div>
   

Your CSS for this could be:

#foo { width: 500px; height: 200px; background: blue; -moz-border-radius: 12px; /* FF1-3.6 */
       -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
       border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */  }

You simply need to add one more rule to the bottom of that CSS, as follows behavior: url(/PIE.htc);

This will cause CSS3 to apply your border-radius rules to IE6-8.

---

Related Topics