For my input, which can either have classname="half" or "half.not-placeholder-value", Firebug shows both inputs to have a set, fixed width of 25em.
input.half, input.half.not-placeholder-value {
max-width: 25em;
}
Yet, according to Developer Tools, IE8 doesn't seem to use this particular max-width attribute. I say "doesn't seem to use" since Firefox's behavior differs with IE8 with respect to this attribute.
But the MDN docs say that IE7 supports max-width. Am I missing something?
This is not really an IE8 issue since IE8 does support the max-width attribute but only when given a defined width first.
input.half, input.half.not-placeholder-value {
width: 100%;
max-width: 25em;
}
Use IE8 css with width? First part targets IE, second part undoes it for IE9+.
input.half, input.half.not-placeholder-value {
max-width: 25em;
width:25em\9; /* IE 8 */
}
:root input.half, input.half.not-placeholder-value {
width:inherit\9; /* IE 9+ */
}
Related
For firefox, the following document renders differently in standards mode then in quirks mode. In quirks mode, the div fills the screen, however in standards mode it does not. I read through the MDN quirks list and couldn't seem to find a behavior to blame. While it'd be cool to know the quirk, my question is really how can I replicate the quirks mode behavior in standards mode?
<!DOCTYPE html>
<!-- remove doctype for quirks mode rendering -->
<head>
<style>
#test {
height:100%;
background:black;
}
</style>
</head>
<body>
<div id="test">
content
</div>
</body>
The relevant quirk is:
There are a bunch of quirks to get percentage heights on images, tables, objects, and applets (etc.?) to "work" (the way they did in Netscape Navigator 4), even though CSS says that percentage heights should behave like 'auto' heights when the parent element doesn't have a fixed height. See bug 33443#c9. See also bug 41656 and its duplicates. Some of these quirks may cause other effects (see bug 54119).
The best replication of it that I can think of would be:
html,body { margin: 0; padding: 0; }
#test {
height:100vh;
background:black;
}
… or even just:
body {
background: black;
}
If this is acceptable, you can try another measure, for example, 'vh':
#test {
height: 100vh;
background: black;
}
vh - Equivalent to 1% of the height of the browser window.
vw - Equivalent to 1% of the width of the browser window.
I have built a website that uses vh for measurement, but came accross the problem that some browsers are not supporting vh, how can i write my css that tries vh but if it does not work it changes to another form of measurement?
Thanks
Here is an example of a css that I would need to change
img{
max-height: 90vh;
cursor: pointer;
display: block;
z-index: 10;
}
CSS requires that browsers ignore rules that are not recognised.
max-height: 100px;
max-height: 90vh;
If the browser supports vh then the second rule will be recognised and the first rule will overridden by it.
If it does not, then the second rule will be ignored and the first rule will apply.
/*CSS for line*/
#line{
position: absolute;
top: 181px;
height: 1px;
width: 100%;
background-color: #E2E2E2;
}
HTML:
<div id="line"> </div>
I made a 100% width 1px line element using   to run through the bottom of my horizontal navigation menu - it was all fine until I tried it out in Safari and saw that it was off by 5 pixels, when I adjusted accordingly, it became off in Chrome and IE by 5 pixels - is there a way to mediate the problem to satisfy all three browsers?
You could determine your browser, and depending on your browser you can add a class to your <body>. Then you can define separate css rules for the different browsers. For instance, if your browser is safari and safari is the class, then:
body.safari #line {
/*...*/
}
and so on with the other browsers as well.
EDIT:
In php you can use get_browser() in a function to determine the browser.
In Javascript the value you are looking after is navigator.appName.
What is the preferred way to align a floated element
<div>
<button>goto</button>
<h1>TITLE</h1>
</div>
with the following css:
button {
float: right;
}
Why can't I use something like vertical-align: bottom ? I've seen solution which define a huge line-height but that seems to me like a hack. Is there a css3 solution ?
DEMO
There is a CSS3 option with the Flexible Box module, or flexbox for short. It is a candidate recommendation though, so it's still got browser support complexities.
The earliest support on Internet Explorer is IE10, but it supports an older version of the specification with a different syntax than the current version of the spec and requires the -ms- prefix. The same is true for IE10 Mobile, which supports the syntax from an interim version of the specification crafted in 2012. IE11 however supports the latest specification unprefixed. Android, too, only supports the old version of the spec with a -webkit- prefix prior to version 4.4. Both Safari and iOS Safari require the -webkit- prefix still today, but support the newer specification properties since version 6.1 on the desktop and 7.1 on iOS. Chrome and Firefox, being evergreen browsers, can safely use the current specification syntax unprefixed. And, if you care about BlackBerry, version 10 requires the -webkit- prefix using the current specification properties, while version 7 supports only the older specification.
Notwithstanding, if you have the luxury of designing for modern browsers only, flexbox is simple and intuitive. Below is how you could achieve what you want for those browsers that support the unprefixed version of the latest spec:
div {
background-color: lightgrey;
display: flex; /*creates the flexbox on the parent element*/
flex-direction: row; /*the content will be in rows versus columns*/
justify-content: space-between; /*distributes child elements evenly based on the space between them*/
}
h1 {
font-size: 40px;
}
button {
align-self: flex-end; /*aligns just this child element to the bottom of the flexbox parent*/
}
Assuming you want your button at the bottom, you can just absolutely position your button instead:
div {
...
position: relative;
}
...
button {
position: absolute;
bottom: 0;
right: 0;
}
JSFiddle demo.
I want to use HTML input type="number" on a mobile application, in order to indicate to the smarter mobile phones (Android, iPhone and some others), that the numeric keyboard is more interesting for the user than the normal one. This works nicely.
So, I have this piece of HTML here:
<h3>type="number"</h3>
<input type="number" class="input-number"/>
<h3>type="text"</h3>
<input type="text" class="input-text"/>
The important CSS elements applied here are:
input {
height: 2em;
padding: 0.2em 0.5em;
width: 100%;
/* avoid iPhone rounded corners */
border: 1px solid #afb7c1;
border-collapse: collapse;
border-radius: 0 0 0 0;
}
.input-number {
text-align: right;
}
Which should render like this:
The above is a screenshot taken from iOS 4.1, where the world was still OK. Also on Android phones, everything works fine. But check out what happens on iOS 4.2, 4.3:
All of a sudden, the number field is a bit less wide, almost as though the iPhone wants to make room for that useless spinner that appears on some browsers when the input has type="number".
Is anyone aware of such an issue? How did you fix it? Or work around it? Is there any other way to make mobiles prefer the numeric keyboard? Or is there some proprietary css style that I can apply to undo this additional right margin?
Actually the questioner himself is very close to the answer as he knows it is the spinner 's fault, and luckily webkit allow users to control it by CSS:
input[type="number"]::-webkit-outer-spin-button { display: none; }
Source: REMOVE SPIN CONTROL ON INPUT TYPE=NUMBER IN WEBKIT
Live demo: http://jsbin.com/aviram/5/
Hope it help.
While vincicat's solution (previously accepted with the bounty) seemed to work at first, it revealed yet another rendering flaw in the Webkit browser. In 2 out of 10 page refreshes, the input was rendered with zero width, when put in a <td> and styled with width: 100%...
A better solution (for my use-case) was found here:
Disable webkit's spin buttons on input type="number"?
It consists of these CSS styles:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
Interesting addition: I've found the <input type="number"/> field very badly flawed in Blackberry's WebKit browsers. It seems to be the source of browser crashes. Having said this, we're not using that HTML 5 feature any longer...
Not sure if this helps, but try to add these lines to the input css
-webkit-box-sizing: border-box;
box-sizing: border-box;
I don't have access to the older iOS devices to test it but this works on modern iOS and at the same time Google Chrome has started to disobey width: as well, so this fixes both:
input[type=number] {
max-inline-size: none; /* chrome 71 */
max-width: unset; min-width: unset; /* iOS12 */
}