Why does IE make password boxes smaller than text boxes? - html

See the simple form below. It's just a text box on top of a password box. If you look at it in Internet Explorer 7 (and 8, and probably others) the text box is 10 pixels wider than the password box.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE Text vs. Password test</title>
</head>
<body>
<form action="test">
<p>
<input type="text"><br>
<input type="password">
</p>
</form>
</body>
</html>
Is there a way to "fix" that globally, either through CSS or by adding something to the HTML?

Because different font is used in those types of fields.
The fix is simply to specify that all inputs use the same font.
<style type="text/css">
input {
font-family: sans-serif;
}
</style>

You could append a fixed width for all inputs on the current page:
<style type="text/css">
input {
width: 10em;
}
</style>

The problem is Internet Explorer's default encoding. Internet Explorer has an issue displaying the field lengths the same when using UTF-8 encoding. In IE, try changing the encoding to "Windows" (Page->Encoding in IE 8) while viewing a problem page and you'll see exactly what I mean.

If you include the jQuery library in your page(s), you can use the following code to:
"When the document is fully loaded, take the first input element with type='text', and apply it's height and width to all input elements with type='password'".
I tested this on IE7 only, and it worked like a charm.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[type='password']").height($("input[type='text']").height());
$("input[type='password']").width($("input[type='text']").width());
});
</script>
This is a generalized answer (taking the first element that matches input[type='text']). You can get a reference to a particular element that you want to match, and then get a reference to one or more password boxes with some other jQuery selector. Have a look at the documentation for getting elements by id or a group of elements by a common css class or xpath-type expression:
http://docs.jquery.com/Selectors

Setting the width on textboxes will solve but I assume that's not what you want.
Try setting the min-width on input[type=text], input[type=password] to something greater than the default for textboxes. You'll probably need http://deanedwards.me.uk 's IE8 script to make those selectors work.

The font size is irrelevant. as seen in this test here:
http://build.jhousemedia.com/ie_test.php
I wish I could give you a solid answer as to why but the work around is to apply a fixed width to it.

Related

How I Override Body Tag In Ctrl+Shift+I Inspector

I have some Html code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ControlShiftI Example</title>
</head>
<body>
Enter UserName <input type="text" name="user"><br>
Enter Password <input type="password" class="password-input" name="pass">
</body>
</html>
that I am running on browser after ctrl+shift+i in inspecor I want to override some other code in complete body tag.
in above after I dont want to see this body tag code some override code i want see.
is this possible?
This is not possible.
Hide Javascript
If your concern is having a tidier HTML because Javascript code takes too much space, just <script src="externalFile.js"></script>
If your concern is you want to hide your code, because you don't want others to read it and understand it, you could minify and obfuscate the code, for example with UglifyJS. However the inspector can undo the minification by prettifying the code. Obfuscation however cannot be totally undone depending on techniques used.
Hide HTML
If this question is not about javascript and you want to reduce the number of html lines:
<object data="externalHTMLFile.html"></object>
or
<iframe src="externalHTMLFile.html"></iframe>
There are also other ways.
But you cannot simply hide some html from the inspector or remove the ability from the user to open the external HTML file and read all the HTML.

How can I show following text in html textarea?

I have a String like the following. Please take a look:
I put it as a image, this is not displaying in here too. If I put that String here it becomes the following:
21154537878887GHE\u0044\u0045
Now my question: is there any way to put the original String into an HTML <textarea> without changing the encoding?
I think you must define your char set in the head.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="denis kohl">
<!-- Date: 2014-09-04 -->
</head>
<body>
Try adding the attribute accept-charset="UTF-8" to the HTML form element that contains the textarea. Then parse the encoded value via JavaScript. For example:
HTML:
<form accept-charset="UTF-8">
<textarea id="textBox"></textarea>
</form>
JavaScript:
document.getElementById("textBox").value = "21154537878887GHE\u0044\u0045";
<textarea name="Input" cols="36" rows="5" wrap="virtual">
Could you try to define the wrap method, you can choose:
wrap: off, virtual, hard, physical, soft
The Textarea formatting looks nothing like they originally intended. Typically, all the Textarea text will squashed into a single paragraph with none of the original line breaks or spacing in evidence.
The reason for this is that the CGI program (to handle the text in the textbox) has to specify a MIME Type when they are preparing the email or other document and many of these programs elect to use a MIME Type of "text/html" so that they can use HTML formatting to make the email or document more presentable. The problem with this approach is that the contents of an HTML Textarea input box require the use of a MIME Type "text/plain" otherwise the Textarea formatting will not display properly in the final output.
<meta http-equiv="Content-Type" content="text/plain; charset=utf-8">
Knowing the above I hope this will help you to find the solution.
Do this:
<textarea>211&#001c;545&#001c;378887GHE\u0044\u0045</textarea>
Note that what happens when this is rendered is that all the characters that can be displayed in the chosen (in css) font are displayed normally, while most browsers fall back to the Unicode BMP Fallback Font (http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&item_id=UnicodeBMPFallbackFont) which simply fills in the gaps in whatever font you might be using. The exact result will be browser-dependent.

Why does Chrome Developer Tool add elements not in the file?

When I have a simple HTML markup like this:
<!DOCTYPE html>
<html>
<head>
<title>lawl</title>
</head>
<body>
</body>
</html>
When viewing the elements of the document, in the Chrome Deceloper Tool(F12) it looks likes this:
<!DOCTYPE html>
<html>
<head>
<title>lawl</title>
<style type="text/css"></style> <-- what the?
</head>
<body>
</body>
</html>
So, my question goes: Where does the style tag come from? What added it, and why?
Hope you guys can clear this up for us, it's been quite the subject the last 10 minutes in class ;-). Also worth mentioning; a class got added to a empty div in another document when the teacher tried it.
Edited title.
Chrome plugins can get access to your DOM, and so does the development tools. In this particular case, I think the development tools is the one to blame.
The empty style tag is probably a placeholder for injected CSS.
If you open the source code (view-source:www.example.com), you will see that your DOM is perfectly fine.
99:1 that the <style> element is a stylesheet injected by your AdBlock (or similar) extension.

HTML5 date input width

So i am having an issue trying to force a size on a date input. Has anyone else had this issue or know how to get around it?
<input style="width:50px;" type="date" value="">
It is pretty simple, the width only changes the textarea, the actual control does not change, it is fixed at about 125 px width or so.
I have also tried width="" and max-width in the css, neither work.
With chrome 45, I just set the font-size. It proportionately changed the text and the control handles. Not sure that was the effect you were looking for(?).
<input style="font-size: 3rem" type="date" id="Date">
An <input type=date> element is supposed to be implemented in a browser-dependent manner that is suitable for the environment where the browser is running. So it is supposed to be under the browser’s control, not an author’s. This is one reason why many people are skeptical about the idea.
Setting a width for the control is really a shot in the dark. On my Chrome (25beta on Win 7), your CSS code “works” in the sense of truncating the widget to the given width. It still works, but it looks very odd: in the widget, the letter “v” and part of some other letter is visible. They are really the notation “vvvv-kk-pp” (localized notation for “yyyy-mm-dd”), which I can see in the widget in the absence of any width setting.
The conclusion is: by using <input type=date>, you accept whatever browser-dependent widgets browsers might use, and an attempt to control e.g. in its size may very well mess things up,
<input type="date" name="tanggal" style="width:231px">
Hope this works!
It doesn't change anything except the width.
Since most browsers aren't up to speed with html5 yet. I would just use the date picker with jquery.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
I've used it plenty and it works a treat. Makes more sense to present the calendar on click as well imo.
Here's the link as well: http://jqueryui.com/datepicker/

css/pre:empty with non-empty pre contents

I have this HTML page
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>foo</TITLE>
<style type="text/css">
pre:empty {
display: none;
}
</style>
</HEAD>
<BODY>
<PRE>
some text here in the pre
element
</PRE>
</BODY>
</HTML>
and I wonder why the browser (safari 5.1) does not display anything. I assumed that the pre:empty applies only to empty elements. I'd like to hide <pre></pre> tags but none of the pre tags with contents in them.
Just out of interest, try putting it in a style sheet rather that in <style />. The reason for this is:
"In Safari versions up to and including 2, when it appears in an internal style sheet (using tags), this selector will always match. If this selector is used within an external style sheet, it works as designed."
... From (http://reference.sitepoint.com/css/pseudoclass-empty)
Now i know you said you're running 5.1, but its worth a try right?