text-transform: uppercase causes layout error on Chrome - html

I've run across a strange layout bug that appears to be triggered by the text-transform CSS property when an inline-block is nested within a block element. I saw the problem on Safari (5.1.2) as well, but this minimal test case only triggers on Chrome (17.0.963.56).
The particularly interesting bit is that opening the developer tools and keeping it on the Elements tab triggers the correct layout. My best guess is that the combination of CSS rules and DOM structure is causing the webkit engine to miss performing a reflow of the page.
<!DOCTYPE html>
<html>
<head>
<title>Menu Widget Test</title>
<style type="text/css">
.container
{
border: 1px solid black;
display: inline-block;
}
.title
{
text-transform: uppercase; /* <-- Remove this and it works */
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("firstName").innerHTML = "John";
document.getElementById("lastName").innerHTML = "Smith";
}, false);
</script>
</head>
<body>
<div> <!-- Remove this DIV element, and it works -->
<span class="container">
<span class="title">
<span id="firstName"></span>
<span id="lastName"></span>
</span>
</span>
</div>
</body>
</html>
Here are two screenshots that show the two ways that it renders on Chrome, depending on whether or not the text-transform rule is removed, or the div element is removed.
I would like to use the text-transform property, but I am wondering if this is a known bug and what I can do to ensure that I do not trigger the behavior. Even being able to explicitly trigger a reflow event might be good enough.

I had the same problem and resolved it with white-space:nowrap;.

There seem to be a kind of race condition in the loading of css. The following file reproduces the bug here on Chrome (17.0.963.65) on osx 10.6.8.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Schizophrenic layout</title>
<style type="text/css">
body { background-image:url('gray.png'); }
#d0{display:inline-block;}
#d1{text-transform:uppercase;}
#d2{text-transform:uppercase;}
</style>
<script type="text/javascript">
function fill (id, text)
{
var e = document.getElementById (id);
var t = document.createTextNode (text);
e.appendChild (t);
}
function main ()
{
fill ("d1", "First line");
fill ("d2", "Second line");
}
window.onload = main;
</script>
</head>
<body>
<div id="d0">
<div id="d1"></div>
<div id="d2"></div>
</div>
</body>
</html>
Note that the bug is present even if gray.png is not a 404. You may have to reload the page a few time to witness the bug. Also if you don't GET the file over http, the bug shows only once, the first time you load the page from the disk.
There are various ways to make the bug disappear by tweaking the css. Removing only the background-image makes it disappear. Removing only the display makes it disappear. Removing only the two text-transform make it disapear. In the latter case the correct layout can be achieved by adding
e.style.textTransform = "uppercase";
at the end of the fill function which is, of course, a very ugly workaround.

Related

CSS doesn't apply to class but does to the body element

I've experienced this problem multiple times and I haven't found any clear solution yet, so I was hoping you guys could help. I have simple index.php:
<?php
require('libraries/db.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="libraries/style.css">
<meta charset="UTF-8">
<title>Phantom 0.1 - Log In</title>
</head>
<body>
<div class="container">
</div>
</body>
</html>
and style.css in libraries/styles.css:
.container {
background: url("/libraries/images/background.png") no-repeat fixed center;
}
the css works when I try to change, for instance, background color of the body element, but whenever I try to change anything from the .container (or pretty much any other class/id element) the changes won't show.
I've tried it on multiple browsers, cleared the cache and css validator (just in case) but no luck there.
Seems like the problem might be not setting the width/height of the picture. You should also add a ?> on the end in the PHP document in libraries.
First look//Sometimes requiring another file using PHP can lead to the of that file instead. When you run the website localy or online, do inspect element and check if your CSS document line is in the head. https://gyazo.com/fe8f2282e6686d432f75ff994e65c0f7
Also try going into sources when inspecting and check if all the lines are there, there might be a log made if you use Chrome. Do CTRL F5 to load everything over again.

h,b and sup tags do nothing + more problems

For the past hour I've been trying to figure out:
why can't I edit text inside HTML;
why h or b or sup tags won't work for me;
If I set a font-size for the h2 (to make them work how they were supposed to), then that font-size won't change when re-scaling the size of the window.
Why is the font size of h tags static if I made a rule in css that should re-scale all of the body's font-size according to that formula (which is not mine) ?!
I am a complete noob ! What I wrote there is what I took from https://www.w3schools.com/ and https://css-tricks.com/viewport-sized-typography/ .
#Buton1 {
background-color: darkorange;
color:white;
text-aling: center;
text-decoration: none;
padding:
}
#whole {
font-family: sans-serif;
color: white;
background-color: black;
}
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="reset.css" type="text/css" rel="stylesheet">
<link href="Style.css" type="text/css" rel="stylesheet">
<title>PlantAnApp</title>
</head>
<body>
<div id="whole">
<div class="Module_1">
<h2>Think an app.</h2>
<h2><b>Plant an app</b></h2>
<h2>Grow an app.</h2>
<p><b>Are you up to the challenge of building your<br> own web-app</b> with mentor guidance between <br>July 1<sup>st</sup> and July 31<sup>st</sup></p>
<button type="button" a href="" id="Buton1">READ ON</button>
</div>
<div class="Module_2">
<h2>What is</h2>
<h2>Plant an App?</h2>
<div>Plant an App is a platform that <br>empowers you to build and customize<br> epic web apps, fast and with low/no<br> code requirements.</div>
<br>
</div>
<div>
<h2><b>What can you build ? </b></h2>
</div>
</div>
</body>
</html>
why can't I edit text inside HTML
If you mean in the browser, text input is only allowed via <input>, <textarea> or contenteditable DOM nodes. (And if you want that text input to persist across page loads, you need to store it somewhere, either in a server database or in the user's localstorage, and retrieve it again on page load; if this is what you're aiming for you'll probably want to follow a specific tutorial, it's more than can really be answered in a single Q&A.)
why h or b or sup tags won't work for me;
They do work in your snippet here. I'm guessing the reason they're not working in your project is because your CSS reset is resetting all the default styles for those tags. Use a less overzealous reset, or remember to restyle the tags you want to use after resetting.
Why is the font size of h tags static if I made a rule in css that should re-scale all of the body's font-size
I'm not sure what's going on with that rule, but it doesn't seem to return a valid size, possibly because of the mixing of unit and unitless values; safari at least is simply ignoring that rule. Simplify that calculation, and check to make sure it isn't also being overridden by your style reset. (If you can clarify what font sizes you were trying to get in relation to the browser window, we may be able to help you fix it.)

Tab (keyboard) navigation in a page which contains iframe

I have a page with iframe. The iframe contains input elements. When the user places the cursor into the first input textbox in the iframe and presses the tab key, the focus jumps out from the iframe and the next element in the parent page gets the focus. (instead remaining in the iframe, and place to focus on the 2nd input element.)
I've tried to place tabIndex attribute for the input elements with no effect.
I would like to ensure the input elements in the iframe can be accessed by pressing tab key.
* Begin Edit
Risking the minuses, but I have to share my opinion...
I recognized answering this question is this is not obvious.Regarding the UX consequences of this behavior: Seeing the browsers and html/css we still have these white holes what are teleport us to the stone-age of UI/IX: the 80s and early 90s...
Just place yourself into the situation of an end user, who tries to navigate between UI elements using the tab key...
End Edit *
...sorry if one felt be offended because there is not obvious answer for this in the age of HTML 6+... I think instead we should solve or workaround this to ensure enduser UX.... or is not this reproducable? Please let me know if I missed something.
Please consider this simple example that contradicts your claim. Tab works correctly navigating through form elements of both child frame and parent frame.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Outer Frame</title>
<style>
.iframe-wrapper {
height: 80px;
}
</style>
</head>
<body>
<div class="iframe-wrapper">
<iframe id="myInnerFrame" src="./inner-frame.html" frameborder="0" width="100%" height="100%"></iframe>
</div>
<input type="button" value="No, press me!">
</body>
</html>
And inner-frame.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inner Frame</title>
<style>
.wrapper {
border: 2px solid #f0f0f0;
}
</style>
</head>
<body>
<div class="wrapper">
<div>Hello, world. I am iframe.</div>
<input type="text" name="" id="" value="Write in me">
<input type="button" value="Press me">
</div>
</body>
</html>
Tested on Windows with Chrome, Firefox and IE - all latest versions.
I've also made a JS fiddle to demonstrate it. But for some reason for iframe to render you need to press Run first. http://jsfiddle.net/zecu3yvn/

external CSS issue

Okay, time for my dumb question of the day.
I have an external css file that basically assign a background image to a button.
Css Code:
input.keypad
{
cursor: pointer;
display: block;
min-width: 64px;
width: 64px;
height: 64px;
margin: 0;
border: 0;
background: url(images/btn1.jpg) no-repeat center top;
}
Html code:
<input class="keypad" type="button" name="btnClickMe" id="btnClickMe" value="Click Me">
My dilema is that the first time I load the page it works 100%, but when I refresh it, it seems to ignore the width and height set in the css file. The image is is in the background, but cut off because of this.
I thought it might be some sort of caching so I included pragma tags which did not help at all. Any ideas?
Use Firebug to find the reason. It will help you to see which css properties are applied to the element and so on.
You select the element and you will see all css properties of it.
(source: getfirebug.com)
You have to learn that there are many useful tools out there which can help you solve many of your problems :) Especially Firebug. It is a must-have tool.
Here's some suggestions...
First, do all your page refreshes with Ctrl+F5 in Firefox to override browser cache each time.
Second, check that the button doesn't have a parent element somewhere in the CSS overriding it, such as "form.myForm input { ... }".
Third, instead of declaring the button background in the CSS, move that declaration into your HTML like this:
<input type="image" class="keypad" src="images/btn1.jpg"/>
... whilst keeping the size declarations in CSS as they are now.
See if some of those might help.
Firstly I'd like to thank Balon for pointing me in the right direction.
After using the browser add on he suggested and viewing the html source, I noticed that my <link tag pointing to the external css file was being placed within the <body of the html which I found very odd. Upon reviewing my html code, I saw that my <link tag was infact in the <head> tag, but was below the <script tag, which after swapping the tags around, the code now works 100%.
Here is an example of what I am trying to put across:
Code Before (Broken):
<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>
<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">
Code After (Fixed):
<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">
<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>

Why does IE make password boxes smaller than text boxes?

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.