When I have an input field with a size attribute, it seems to be wider in Firefox compared to Chromium.
The issue gets A LOT worse when a language such as zh-HK is set (either through the html lang attribute or the Content-Language header). In this case, the input seems to be at least twice as wide in Firefox.
What is the reason for this huge discrepancy?
Please check the snippet below in different browsers:
<html lang="zh-HK">
<img src="http://i.imgur.com/kQUUnVF.png"><br>
<input size="50">
This is what it looks like for me in Firefox:
And yes, I know I can set the width using CSS.
The specification does not set any standard layout for this property. If you inspect that element with both browser's developer tools, you will find there are different property settings for both. Neither browser is wrong or right.
Related
I am using a famous japanese font called "Meiryo" for on a japanese website. However, the usage of this font causes all my input fields to stretch. It is a very strange bug, if i replace the font by anything else, all my input fields get back to normal.
Anybody can explain me why this bug occurs please?
Tested on all major browsers
It’s not a bug. An <input type=text> element has its visible size set by the size attribute (defaulted to 20), which sets the width in “characters”. This means “average width” characters according to HTML 4, whereas HTML5 drafts say that “the user agent should ensure that at least that many characters are visible”. The reality varies across browsers. In any case, the visible width of the element should depend and actually depends on the properties of the font – on the widths of glyphs in it.
The following simple test (which assumes some common default font to be used for input) illustrates this:
<input value="Hello world"><br>
<input value="Hello world" style="font-family: Meiryo">
The latter element is considerably wider, and by looking at the appearance of the initial text, set you can see the reason to that: in Meiryo, characters (glyphs) are generally wider than in fonts commonly used as default input fonts.
The conclusions depend on the page design and layout. In flexible design, the details of layout adapt to the requirements of data and fonts, rather than the other way around. If the design is more rigid, you might consider setting an upper limit on the width in CSS, using pixels if you really must, e.g. max-width: 200px.
it's font issue
use CSS width and height property to solve the problem
I'm remaking an old website with html and CSS, having never made a website with "old-style" mark-up I have no idea what the size=+x relates to in CSS, is it pixels or what? Is there a way of replicating this in css or do i have to specify the size exactly?
In short, how do i add x pixels to something i dont know the size of?
For my particular example here is the mark-up:
<H1 ALIGN=CENTER>
<B><FONT color="red" SIZE=+4>PHONE BOOK</FONT></B>
</H1></CENTER>
This dirty old value is equivalent to this css
.item{
font-size: xxx-large;
}
That's if you view it in webkit.
In firefox, it's about 48px.
Here's the old plus and minus tags in action
Here's the W3C's details of the modern equivalents
The old font sizes are set relative to the browsers current default font-size.
It's not the sort of thing you want to leave up to chance, if you want your site to look how it was designed.
Want my opinion, dump it, and use a value of em or px instead.
For the good of your sanity, don't sweat too much over matching these crummy old values, do it by sight, or if you're really worried, do pixel comparisons of screen-grabs.
in short the tag has 7 sizes for text: 1-7.
the default was always 3 when used size=+1 it means make it a size larger than 3 (same as size=4).
it was used so different web browsers will show the page correctlly (their sizes are apparentlly different size 3 on explorer wasnt the same on firefox etc)
in css just define a font and a decent letter size and be done with it.
for further reading: http://www.jonstorm.com/html/font.htm
Much of this depends on the base font size used on the page, as well as how those font sizes are defined in the stylesheet. The best way to determine the actual size use to use Firebug. Inspect the element and open the "Computed" tab of the right. It will tell you the font size in pixels.
I'm working on an HTML page where we would like the input fields and select dropboxes to have a border around it as it is tabbed through and in focus. I've defined an input class within my CSS like so:
input.highlight:focus {
border: #003366;
border-style: solid;
border-width: 2px;
}
The input field is defined within my HTML file like so:
<input class="highlight" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">
The focus seems to work fine in Chrome, but in IE the focus remains on one of my buttons no matter what I do. The button seems to steal the focus attribute and the page never focuses on any input fields, so the fields are never shown with a border around them while they are being tabbed through. What might be the cause of this problem?
From another thread, someone was able to point out that the :focus attribute is only recognized in IE9. This explains why the jsFiddle version works properly. When running the HTML file from my local drive, however, IE9 runs in compatibility mode for IE8 and lower and the :focus attribute is never recognized.
Have you tried to set the tab index attribute to the page elements. This property is supported by all major browsers. Supporting Browsers are : IE, safari,firefox,chrome.
" The button seems to steal the focus attribute and the page never focuses on any input fields, so the fields are never shown with a border around them while they are being tabbed through."
If i understand your question clearly then you have an issue while tabbing from one element to another right?. If that is the case the tab-index with increasing index value(or any order) will let you to select next elements while tabbing based on the tab-index set up, and the DOCTYPE Tag specifies the rules for the markup language, so that the browsers render the content correctly. Of course the changes in the Doctype tends to changes in the page. Have a quick look on w3 schools about doctype, Hope it may spot some light.
Cheers,
Arun
I am testing some elements for use in a web page and when using text input boxes it displays correctly in Firefox but when I looked at it in IE the text boxes were unreadably small.
I have linked screeenshots to more clearly explain what I am talking about.
Any ideas why?
Text Boxes in IE
Text Boxes in Firefox
That's weird. I assume you just used:
<input type="text" name="test" value="" />
?
If so, it must have something to do with your CSS file because the HTML will never change.
Try opening your page in Firefox and use FireBug to see the layout properties of the textbox. I guess somewhere you set the font-size to something really small.
Often there are inconsistencies between FireFox, Chrome and (mostly) IE in the way they interpret CSS tags.
It could help if you'd post a link to your webpage so we could check your HTML/CSS code.
The following page is mucked up in IE8 -- the bulk of the content starts appearing half way down the screen and the tables/divs do not look as they should. It works in other browsers and in IE8 compatibility mode. I've inspected the HTML and can't work out what's wrong. Any help would be appreciated. Thanks.
http://www.moviemonitor.com/browse/itunes
After a quick glance in Firefox and IE8, I'd say there is some malformed HTML in there somewhere. Looks to me like a mismatched open/close tag that IE8 isn't forgiving. Run the whole thing through an HTML validator.
I suggest removing the min-height: 800px; CSS value from the first DIV element after <div id="mainContent">. Apparently IE8 renders the first child block level element with that height irrespective of any other contained elements.
Then again, those HTML validation results are pretty grim. Try to fix some of the invalid HTML and make sure that all of your tags are closed properly.