Showing a scrollbar only in Firefox

Question 1

Question by Kei Izumi

I’d like to have a scrollbar at the bottom of the div but this CSS works only in Firefox, not Webkit browsers like Safari or Chrome.

div.hoge {
    width: 500px;
    overflow: auto;
}

I googled and found some pages mentioning you should use overflow-x or -webkit-overflow-scrolling but they didn’t work either. Need to use some JSs? Any guesses?

Answer

Answer by Starx

Starx

If you need a scroll bar to appear always then, you can use overflow: scroll
If you need vertical scroller then, overflow-y: scroll
If you need only horizontal scroller then, overflow-x: scroll

As per the questions title: You can write mozilla specific styles like this

@-moz-document url-prefix() {

    div.hoge {
        width: 500px;
        overflow: auto;
    }

}

Question 2

Question by cjmabry

cjmabry

I want to style all of the images on my website to have box-shadows and padding of 10px, so that text isn’t smooshed up against them. However, when I assign any padding to “img” with CSS, the box-shadow is drawn at the edge of the padding, leaving a 10px blank space around the image.

#content img {
    -moz-box-shadow: 0 0 5px 2px #282a2d;
    -webkit-box-shadow: 0 0 5px 2px #282a2d;
    padding:10px
}

This particular image is floated left within the paragraph. here is an example of my problem –

http://imgur.com/kKY0A (I can’t post pictures yet)

Any ideas?

EDIT: I do not want the padding. I just want the box-shadow, and then space, so that text doesn’t mash up right next to the box-shadow. Turns out what I wanted was margin, not padding. Silly mistake.

Answer

Answer by Starx

Starx

Give the background of the same color

#content img {
    -moz-box-shadow: 0 0 5px 2px #282a2d;
    -webkit-box-shadow: 0 0 5px 2px #282a2d;
    background: #282a2d;
    padding:10px;
}

Demo

UPDATE:

As mentioned in comment, OP seems to be OK without padding too. So, I will just complete my answer.

#content img {
    -moz-box-shadow: 0 0 5px 2px #282a2d;
    -webkit-box-shadow: 0 0 5px 2px #282a2d;
    margin:10px
}

Question 3

Question by JaNightmare

JaNightmare

I had a problem with border-radius in webkit browsers and found the solution at the following URL:
How to make CSS3 rounded corners hide overflow in Chrome/Opera

but iam using a another element with position: absolute; inside this
now I need to make the caption with rounded border too, but do not know how

note: i can’t use another border-radius in caption, because this will have an animation

see the code with:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Problem</title>  
    <style type="text/css"> 
    img {
        border: 0;  
    }

    a {
        text-decoration: none;  
    }

    .wrap-events {
        float: left;
        position: relative;
        width: 500px;
        height: 250px;
    }

    .events {
        overflow: hidden;

        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
    }

    .caption {
        position: absolute;
        width: 100%;
        bottom: 0;
        color: #FFFFFF;
        background-color: #151515;
        font: 12px "Arial", Helvetica, sans-serif;

        opacity: 0.6;

        border-radius: 0 0 50px 50px; /* add border-radius to caption */
    }

    .caption p {
        padding: 10px;
    }
    </style>
</head>
<body>
    <div class="wrap-events">
        <div class="events">
            <a href="#">
                <img src="http://www.cg-auto.com.br/forum/imagens/imagens_news/26c4dc4359edcfd4c6871ee1fa958539.jpg" alt="image">
            </a>
            <div class="caption">
                <p>This is a caption</p>
            </div>
        </div>
    </div>
    <button id="slide">Slide It!</button>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $('#slide').click(function(){
            $('.caption').hide().slideDown(2000);
        });
    </script>
</body>
</html>

cheers

Answer

Answer by Starx

Starx

That is a problem for now I think. May I suggest you use fadeIn() Instead. See a demo

Question 4

Question by Ian K

Ian K

For the occasional late-night computing session, I like to tone done the colors of the sites I’m using for the sake of retaining my eyesight. My typical go-to extension is Stylish, a useful tool that loads custom CSS in webpages.

Curiosity and tampering led to the question I have here. Can I change WebKit’s CSS defaults in WebKit’s tags to better suit my needs? I’m speaking in regards to custom browser CSS rules, those used in Safari and Chrome for -webkit-, and others for other browsers. Is there any plain-text file that helps define these rules, which would allow me to edit them and therefore tamper with browser-loaded defaults?

Answer

Answer by Starx

Starx

I don’t recommend going on with this. Making a page appear differently in a certain browser,

is not user friendly, but rather confusing
and its sure to decrease usability.

Having said that, that are many webkit specific rules which you can define. And, overriding them is the only way of changing the default behavior.

This page consists all the webkit specific rules and you can override these rules by redefining them in your style sheet.

For example:

-webkit-box-orient: vertical;

Override the default rule and orients the elements vertically.

Tag: webkit

Showing a scrollbar only in Firefox

Question by Kei Izumi

Answer by Starx

How do I make an image have padding while keeping the webkit-box-shadow?

Question by cjmabry

Answer by Starx

position:absolute within border-radius and overflow:hidden

Question by JaNightmare

Answer by Starx

Can I change the WebKit CSS rules in my browser?

Question by Ian K

Answer by Starx

Please fill the form - I will response as fast as I can!