I have a div that is supposed to display a file input and a submit input.
This is fine, however I keep receiving an unwanted empty line at the bottom.
Photo of issue:
Here is the HTML code for my div:
<div id="change_pp">
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="pp_file"/>
<input type="submit" name="pp_submit" value="Upload Photo"/>
</form>
</div>
Here is the CSS:
#change_pp
{
background:#f9f9f9;
border-bottom: 1px dashed #ccc;
border-left: 1px dashed #ccc;
border-right: 1px dashed #ccc;
width:18%;
margin-left:3.5%;
padding:0;
}
#change_pp input[type=file]
{
width:100%;
}
Also, here is a Fiddle with my entire CSS, to show that my previous CSS is not effecting this https://jsfiddle.net/bmp3my4c/
As you can tell, the Fiddle works fine and the code should work fine, however in all major browsers I am receiving the unwanted white space.
NOTE: I know the fiddle is working properly, in the browser the div is still appearing with the white space though. That is the weird part.
You are missing a doctype based on your comment. This is what is causing the problem. Add a proper doctype, <!DOCTYPE html> on your very first line and the problem will go away without modifying what you originally had.
All modern web pages are required to have a doctype. Without one, you are in quirks mode and using an incorrect box model. Add the doctype to be put into standards mode.
Add the following CSS rule and it should solve the problem:
form {
margin-bottom: 0;
}
Edit: As Rob pointed out, this fixed the issue but was not the cause of the problem. The issue was a missing Doctype, as shown in his answer.
Related
EDIT: I just noticed this works in IE9, but not IE10 and Chrome.
We receive HTML formatted PO reports from one of our suppliers electronically. We usually print these and before it would put 1 PO per page, but now it is not adding the page breaks. I checked the html and I can't see why it wouldn't work all of a sudden. This is the (poorly formatted) html:
<HEAD>
<STYLE TYPE='text/css'><!--
BR.breakhere {page-break-after: always}
.tb1{font:10pt Arial;}
.tb2{border-left:1px solid #000000; border-right:1px solid #000000;border-top: 1px solid #000000;border-bottom: 1px solid #000000;}
.tb3{font:10pt Arial;border-left:1px solid #000000; border-right:1px solid #000000;border-top: 1px solid #000000;border-bottom: 1px solid #000000;}
.tb4{font-size:8pt;}
--></STYLE>
</HEAD>
The page break is suppose to occur here:
<BR class=breakhere>
It occurs immediately after a TABLE element, the TABLE has an HR after the last TR (ugh).
<BR><HR style = "width:100%;height:10px;color:#000000"></TABLE><BR class=breakhere>
I want to contact them and mention this but I'm not sure if it is the code or something on our end? I've tried every browser, multiple printers and workstations, but can't get it to break pages.
Thanks!
page-break is not enough for internet explorer by own. If u try this, you can see the result. I have same problem but I solved by this way.
<div style="page-break-after: always;"></div>
<div>
</div>
I've been dealing with this too. It appears that using the page-break-after property in a break line is a no-no in IE10. According to Internet Explorer’s current documentation supporting CSS 2.1 Section 13.3.1, the page-break-after property does not support line break or header elements. See the remarks in this link: http://msdn.microsoft.com/en-us/library/ie/ms530842. I had to switch my code to use a div with the break after class but that doesn't seem to work in IE9 which is awesome.
I fixed the issue I was having by adding the CSS below:
.new-page {
page-break-after: always;
page-break-inside: avoid;
display: block;
}
I'm having a problem with input elements:
Even though in that picture their css is
margin: 0;
padding: 0;
They still have that slight margin I can't get rid of. I had to use a negative margin of -4px to get the button to stay close to the text field.
Also, when doing further styling I end up with a problem between Firefox and Chrome:
submit buttons seem to not have the same height. Setting an height which makes the submit button fit together with the input bar on Chrome breaks it on Firefox and vice-versa. There seems to be no apparent solution.
1px difference between buttons http://gabrielecirulli.com/p/20110702-170721.png
In the image you can see that where in Chrome (right) the button and input field fit perfectly, in Firefox they'll have a height difference of 1px.
Is there a solution to these 2 problems (the persistent margin and the 1px difference)?
EDIT: I've fixed the first problem, it was caused by the fact that the two elements were separated by a newline in the html code.
The second problem persists, though, as you can see here:
by highlighting the shape of the two elements, you can see that in Firefox (left) the button is 2px taller than in Chrome (right)
Try this one: demo fiddle.
HTML:
<span><input type="text" /><input type="submit" /></span>
CSS:
span, input {
margin: 0;
padding: 0;
}
span {
display: inline-block;
border: 1px solid black;
height: 25px;
overflow: hidden;
}
input {
border: none;
height: 100%;
}
input[type="submit"] {
border-left: 1px solid black;
}
Tested on Win7 in IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Only IE7 fails since it obstinately shows a normal button-like submit input.
Seems to me that your CSS is interfering, somewhere, with your inputs layout.
As you can see here http://jsfiddle.net/F3hfD/1/ what you're asking is doable without any problem.
For your second issue, see How to reset default button style in Firefox 4 +
For a similar issue where I an image used as the button type="submit" and it wasn't exactly the same height as the input adjacent to it, I simply added this to the container of the two said inputs:
padding-bottom:1px;
I had a glyphicon in a span next to input, which was inserting top:1px.
So I set top:0px on span and the issue was fixed.
But actual answer for the thread is totally problem specific and user needs to better understand the elements and css to fix it.
EDIT: As of 2012-06-11 this bug has been finally fixed! https://bugs.webkit.org/show_bug.cgi?id=35981#c1
I have some pretty straightforward markup:
<form action="">
<fieldset class="compact">
<legend>Member Tools</legend>
<label for="username">Username</label>
<input name="username" id="username" type="text"/>
<label for="password">Password</label>
<input name="password" id="password" type="password" />
</fieldset>
</form>
I am attempting to add a small margin to the bottom of the legend element, this works just fine in Firefox 2 and 3 as well as IE 5-8, however in Safari and Chrome adding a margin does nothing. As far as I know legend is just another block level element and Webkit should have no issue adding a margin to it, or am I incorrect?
After a bit of research I found a work-around for this that I believe to be the least "hacky" method for solving it. Using the nasty webkit targeting hacks really weren't an option, but I found that the -webkit-margin-collapse: separate property seems to work in stopping the margins on the elements from collapsing just as it describes.
So in my scenario the following fixes the issue by adding a margin to the top of the first label element (right below the legend) in the fieldset:
fieldset > label:first-of-type
{
-webkit-margin-top-collapse: separate;
margin-top: 3px;
}
Not perfect, but better than nothing, other browsers should just collapse the margins normally.
If anyone is curious someone actually did file a bug report about this # 35981
https://bugs.webkit.org/show_bug.cgi?id=35981
Thanks for everyone's input.
Well, <legend> really isn't "just another block-level element." Maybe it should be, but the fact is that it inherently is going to have layout peculiarities in that it's supposed to do something pretty weird, as elements go. Between IE and Firefox, the effects of margin and padding on <legend> elements are a lot different.
Do you want to just separate <fieldset> content from the top of the box? If so, I'd try playing with padding-top of the fieldset itself.
Sorry to post an answer to such an old thread, but there's actually a pretty easy solution for this that doesn't require any hacks. All you need to do is add padding to the top of your fieldset element.
fieldset { padding: 10px 0 0; }
This might make what I'm trying to say a little more clear: http://jsfiddle.net/8fyvY/
Ive just found adding a 1px padding to the fieldset seems to make it suddenly aware of the margins it contains (the spacing created is more than 1 px).
I meet this problem and everything look fine on chrome but safari make the problem.
In that case if I add this code
fieldset > legend:first-of-type
{
-webkit-margin-top-collapse: separate;
margin-bottom: 3px;
}
I get double margin on Chrome. Then just decide to do the following
fieldset > legend + *{
padding-top:3px;
}
Hope that help. Cheers!
To get a legend working with bottom border and margin in all browsers I insert a span inside the legend, put the border on the span, set the legend margin to 0 and add padding to the bottom of the legend.
e.g.
legend {
border: 0;
margin-bottom: 0;
padding-bottom: 20px;
}
legend span {
display: block;
border-bottom: 2px solid #f0ebe6;
}
I have an absolutely positioned input box in a form. The input box has transparent background:
.form-page input[type="text"] {
border: none;
background-color: transparent;
/* Other stuff: font-weight, font-size */
}
Surprisingly, I cannot select this input box by clicking on it in IE8. It works perfectly in Firefox however. The same happens for background: none. When I change the background color:
background-color: red;
It works fine, so this is issue associated with transparent background. Setting a border makes the input box selectable by clicking on its border only.
Is there a workaround to have clickable input box with transparent background working in IE8?
Update: Example. Uncomment background-color and the inputbox is selectable. You can also click on the select box, and focus the input box by pressing Shift+Tab.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>
<style type="text/css">
input[type="text"] {
border: none;
background: transparent;
/*background-color: blue;*/
}
#elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
#elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>
<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>
</body></html>
I am unable to reproduce such a problem in IE8. Full test case? Are you sure there's not a layering problem causing some other transparent element to cover the clickable area?
Does setting background-image make a difference? What about to a transparent GIF?
ETA: Curious! It's actually an IE7 bug. For me, your example exhibits the described behaviour in IE7, but in IE8 it's only when in EmulateIE7 mode; in IE8 native rendering it's fixed. You'll generally want to make sure you don't fall back to IE7 rendering by using a suitable X-UA-Compatible header/meta; however, yes, setting the background-image to a transparent GIF fixed the problem for me. Tsk, we still need the blank GIF even in this day and age, huh?
You have to define a (transparent) background image.
Just in case someone would be interested. One of suggested workarounds....
Please include the html for the input element.
How did you define the input element? The code below works in IE8 (IE 8.0.7600 Windows).
I tried this in IE8 and was able to 'select' the input area just fine.
<html>
<head>
<style>
.form-page input[type="text"] {
border: none;
background-color: transparent;
/* Other stuff: font-weight, font-size */
}
</style>
</head>
<body>
<input type="text" name="test" value="test" id="test"/>
</body>
</html>
Just give the input field a transparent background image and it will work...
Example:
#search .input {
width:260px;
padding:3px 5px;
border:0;
background:url(../images/trans.gif);}
I've found the same issue using IE10 on Windows 7. Both of the following methods fixed the issue for me.
Franky's method using a transparent background image...
background:url(/images/transparent.gif);
Sketchfemme's method using an rgba background colour with '0' opacity
background-color:rgba(0,0,0,0);
Jim Jeffers suggestion for editing the z-index's did not work for me.
Here is a very simple test case:
<html>
<head>
</head>
<body style="direction: ltr;">
<br/><br/><br/>
<INPUT style="WIDTH: 100%;" />
<DIV style="POSITION: absolute; TOP: 58px; RIGHT: 193px; WIDTH: 300px;">
<INPUT style="WIDTH: 100%; background-color: transparent;"/>
</DIV>
</body>
</html>
When running in IE8 - you should see the focus on the underlying textbox instead on the absolutely positioned textbox.
Our solution was to set both transparent background color and transparent background image:
<INPUT style="WIDTH: 100%; background-color: transparent; background-image: url('transparent.gif');"/>
IE in its infinite wisdom is deciding not to render the item because it thinks there is nothing to render. There are numerous ways to address this but basically you'll need to give IE something to chew on.
Adding a 'value=x' to the input tag itself definitely works. But more than likely it's not the best solution. A simple, color:black (without the focus) allows the element to be tabbed to. Adding ':focus' to the input style allows the element to render.
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>
<style type="text/css">
input[type="text"]:focus {
border: none;
background: transparent;
/*background-color: blue;*/
}
#elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
#elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>
<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>
</body></html>
As bobince observed, it's an IE7 bug. I've sometimes found it convenient to solve it by adding a value=" ". Use as many non-breaking spaces as required to make the clickable area big enough. Depending on your app, you might need to strip these later.
background-image:url(about:blank);background-color:transparent;
Had the similar issue -> IE8 textbox was not editable (when wrapper of my App has position:absolute). Click worked only in the border. Filled with color and transparent also did not work. With the following doctype change the issue is fixed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Source : http://www.codingforums.com/showthread.php?p=1173375#post1173375
Actually in my case it was like
text-indent: -9999px
I used to remove the text, do not do that and it is clickable again.
It may seem strange but you should try explicitly specifying the z-index of the elements involved. This should force the input to render on top of the element with the background color/image applied to it.
It seems though that even with the transparent gif trick, if you set background: transparent anywhere else in your CSS, for actual web browsers, it triggers the IE7 bug and you don't get a cursor on hover and can't easily click into the input box.
this is an awesome question. I would never have been able to figure out what was going on without this post. My solution though was to use rgba(0,0,0,0) instead of transparent gif.
I am currently doing the front end for a site with looooads of forms, all styled up and looking pretty in IE, but I've just noticed that in Firefox the file input fields aren't responding to any of my styles, all the other types of input fields are fine. I've checked it in Firebug and its associating the correct styles to it, but not changing how it looks.
If this isn't a complete brain fart on my behalf, then is this a known issue in Firefox? And if so, how have I never noticed it before?
Here is a sample of the code.
CSS:
form.CollateralForm input,
form.CollateralForm textarea
{
width:300px;
font-size:1em;
border: solid 1px #979797;
font-family: Verdana, Helvetica, Sans-Serif;
}
HTML:
<form method="bla" action="blah" class="CollateralForm">
<input type="file" name="descriptionFileUpload" id="descriptionFileUpload" />
</form>
I've also tried applying a class to it but that doesn't work either.
Many of the answers above are quite old. In 2013 a much simpler solution exists: nearly all current browsers...
Chrome
IE
Safari
Firefox with a few-line fix
pass through click events from labels. Try it here: http://jsfiddle.net/rvCBX/7/
Style the <label> however you you would like your file upload to be.
Set for="someid" attribute on the label
Create a <input id="someid"> element, that's hidden.
Clicking the label will passthrough the event to the fileupload in Chrome, IE, and Safari.
Firefox requires a very small workaround, which is detailed in this answer.
Firefox can be hacked using the HTML input size attribute:
size="40"
while using a css width to control the full width of the field + button in layout
Let's say you have your input:
<input style="display:none" id="js-choose-file" type="file">
Create a fake button using jQuery.
<a id="js-choose-computer" href="javascript:void(0);">From Computer</a>
Style the above button any way you like. Then:
$("#js-choose-computer").on("click", function() {
$("#js-choose-file").click();
return false;
});
As of Firefox 82, hacks are no longer necessary, per the ::file-selector-button pseudo selector. Current versions of Webkit/Blink browsers (Chrome, Edge, Safari, Opera) don't support it at the moment, but it can be dealt with using the ::-webkit-file-upload-button non-standard pseudo-class.
This way, your HTML can be kept semantic, and no hacks are needed.
Example code from MDN reference above:
HTML
<form>
<label for="fileUpload">Upload file</label>
<input type="file" id="fileUpload">
</form>
CSS
input[type=file]::file-selector-button {
border: 2px solid #6c5ce7;
padding: .2em .4em;
border-radius: .2em;
background-color: #a29bfe;
transition: 1s;
}
input[type=file]::file-selector-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
Customformsjs pluggin address this issue on its File module class.
http://customformsjs.com/doc/File.html
http://customformsjs.com/doc/File.js.html
Basicaly it make possible to kind to style File input fields with some restrictions. It work by wrapping it in a container and making it transparent so your click on it. The demo page shows it in action
Use cheat code ( # ) infront of the attribute of css class
say:
form.CollateralForm input,
form.CollateralForm textarea
{
width:300px; //for firefox
#width:200px; //for IE7
_width:100px; //for IE6
font-size:1em;
border: solid 1px #979797;
font-family: Verdana, Helvetica, Sans-Serif;
}