CODEWITHSUNDEEP
cssfilefirefoxinputabsolute
chai512
chai512

Reputation: 169

Why absolute and relative positioning does not work as expected in firefox?

Why does not the following fiddle work properly (text disappears) only in firefox?

What I am trying to do in the below fiddle is,

I dont like browser's file upload control and I am creating CSS for it to look like a button. The file upload control is enclosed in a div and is hidden via opacity property. CSS is added to the outer div to make it look like a button.

Markup and CSS

HTML:

<button id="Ctrl" class="button" type="button">Query</button>
<div id="file" class="file-label appletButton">
New File
<input id="FileInput" class="file-input" type="file" name="fileinput" multiple></div>

CSS

.file-input {
    width: 100%;
    position: absolute;
    box-sizing: border-box;
    top: 0;
    right: 0;
    margin: 0;
    border: solid transparent;
    border-width: 0 0 100px 200px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=0)';
    -moz-transform: translate(-300px, 0) scale(4);
    -o-transform: 'translate(250px, -50px) scale(1)';
}
.file-label {
    padding: 5px;
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.appletButton {
    background: linear-gradient(to bottom, #8ABAFE 0%, #5788C7 100%) repeat scroll 0 0 transparent;
    border: 1px solid #31537F;
    color: #F5F5F5;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
}

http://jsfiddle.net/6ZuPM/7/

In the above fiddle, first click on "Query" button. Then press TAB key. The "New File" text disappears. But you will still be able to invoke browse window by clicking the blue button. WHY THE TEXT DISAPPEARED?

Upvotes: 3

Views: 2721

Answers (2)

Boris Zbarsky
Boris Zbarsky

Reputation: 35064

When you hit tab, the browser puts focus on the file input, since that's the next thing in the tab order.

When something is focused, browsers try to scroll it into view. So in this case the <div class="file-label"> is scrolled however far it needs to be scrolled to bring the file input into view, which scrolls the text out of view.

Upvotes: 1

Dave Loepr
Dave Loepr

Reputation: 956

About position:relative and position:absolute :

 position:relative;

Keeps your element in the flow of the page, you can even specify floats on it. It takes its origin in its parent.

 position:absolute;

Removes your element from the flow of the page. It takes its origin in the body element, unless it is nested in position:relative element (your example) , then the position:absolute element takes its origin in its parent.

Upvotes: 1

Related Questions