Css Snippets » FireFox

Toon altijd FireFox scrollbar

Mark — Sat, 14 Nov 2009 06:19:33 +0000

De verticale scrollbar in Firefox wordt in tegenstelling tot Internet Explorer niet getoond indien niet nodig vanwege te weinig inhoud, Opera en Safari tonen de scrollbar ook enkel als nodig blijkt.

Soms kan dat in websites tot een “jump” (verspringen) leiden van je inhoud, wens je dit te voorkomen kun je voor Firefox de verticale scrollbar altijd tonen:

CSS

html {overflow:-moz-scrollbars-vertical;}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Toon scrollbar in Firefox altijd

Mark — Thu, 10 Sep 2009 09:05:18 +0000

In Firefox wordt de scrollbar niet getoond als de content niet lang genoeg is, dit kan tot een “jump” van je content zorgen moest de inhoud plots langer word door bijvoorbeeld een div die open klapt door javascript. Dit kan je vermijden door de scrollbar altijd te tonen:

CSS

html{
overflow:-moz-scrollbars-vertical;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Formulier velden en line-height in FireFox probleem

Mark — Mon, 31 Aug 2009 17:58:41 +0000

FireFox is de neige browser die een probleem heeft als er line-height gebruikt word in formulier velden, en is altijd een offset van 2px aan de bovenkant, elke ander browser (zelfs IE6) rendert dit correct af.
Je kunt dit probleem oplossen door de FireFox 3 only hack te gebruiken:

Standaard CSS

CSS

#search-theme-form .form-text {
width: 124px;
height: 19px;
border: 1px solid;
border-color: #717171 #b4b4b4 #dadada #b4b4b4;
padding: 0 0 0 3px;
background: url(../images/search-bkg.gif) no-repeat top right;
line-height: 19px;
color: #9c9c9c;
font-size: 1.2em;
}

FireFox CSS

Volgende regel zet je het best direct nadien:

CSS

html>/**/body #search-theme-form .form-text,
x:-moz-any-link,
x:default {
height: 17px;
padding-top: 2px;
} /* Only FireFox 3 */

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Geen border op links in FireFox

Mark — Mon, 02 Mar 2009 20:07:49 +0000

FireFox heeft de neiging om een puntjes rand rond actieve links te zetten, door toevoeging van deze korte snippet kan je dit ongewenst euvel behelpen.

CSS

a:focus, a:active {
outline: 0 none;
-moz-outline: 0 none;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

CSS opacity

Mark — Mon, 02 Feb 2009 17:24:27 +0000

Crossbrowser opacity, het is mogelijk, maar momenteel moeten we nog steeds elke browser apart aanspreken.

HTML


 Pellentesque habitant morbi tristique senectus et netus et

CSS

.my-opacity {
    border: 1px solid #000;
    margin: 0 auto;
}
.my-opacity p {
    filter:alpha(opacity=30); /* msie */
    -moz-opacity: 0.30; /* firefox 1.0 */
    -khtml-opacity: 0.30; /* webkit */
    opacity: 0.30; /* css 3 */
    background-color: #000;
    color: #fff;
    margin: 0;
    zoom: 1;/* for msie */
    padding: 10px;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon