I ran across the issue that my design concept for displays like iPhone 4 included 1px borders and I didn't know the Retina devices measures CSS with an aspect ratio of 2x.
So I started designing the page by taking advantage of a media query for max-device-width:640px (for portrait) and came to recognize this will only look as expected, if I set the viewport meta to initial-scale=.5.
The problem is: If I don't want to set initial-scale=.5 and define the media query in real pixel dimensions of the iPhone, there seems to be no way to achieve a 1px wide border or such on a Retina display because setting border:.5px will force iOS to compute an integer value of it – which seems to result in rather 0 than 1.
This is how I've achieved 1px borders on the iPhone (tested on iPhone 5).
<span class="hr"></span>
.hr {
display: block;
width: 100%;
border-bottom: 1px solid black;
-webkit-transform: scaleY(0.1);
}
Obviously this makes it tricky to apply 1px borders to anything that actually acts as a container, but it'll do the trick for true 1px separators.
You can try:
border: thin solid black;
Related
I have some issue which only encounters my iPad Pro 12.9, but not on phones or desktops.
🐞 on : Safari + Chrome + Firefox
input[type=text], input[type=email], input[type=time] {
color: white;
background-color: black;
font-size: 1em;
width: 100%;
border: solid 1px white;
border-radius: 5px;
margin: 10px;
padding: 10px;
}
How do I make my inputs padding look nice on all browsers all devices?
Firstly you need to make sure your inputs aren't being over-ridden from another declaration which often causes the problem you have here, particularly in relation to the line-height and font-size properties. Set your line-height value to line-height: normal on your input elements. Using the input[] selector has a low specificity in the CSS cascade, hence why it could be being over-ridden.
If the above values aren't being over-ridden from a different part of your stylesheet you can use box-sizing:border-box, line-height: normal on your input elements. You'll most likely need to increase the padding value slightly to get the aesthetic look you require.
How about to use all: unset;
To be honest I found out about it just yesterday and not used it yet, but it seems to be widely supported.
Here is a small demo. Though, I used sass.
Screenshot from iPad Pro:
Screenshot from Chrome (on Linux):
You don't really need padding top and bottom within an input, so you can remove it, just use padding: 0 10px
If some browser do not vertically centres the text, you can equal the line-height with the height and that should be fine.
also apply a box-sizing: border-box; rule will probably avoid differences between browsers on how do they render paddings.
I've encountered a problem when I'm trying to adjust my CSS after the user-device dimensions. I'm using the following code:
#media only screen and (max-width: 700px) {
#form input[type=text]
{
width: 100px;
height: 50px;
margin: 95px -60px 0 15px;
box-shadow: inset 0px 0px 3px 1px grey;
border:1px lightgrey solid;
border-radius: 4px;
text-align: center;
font-family: times;
font-size: 10px;
}
}
All settings apply properly and change the original CSS except the dimensions, which remain the same. How is this even possible? Is this a CSS bug? If some do apply the selector is correct and all, but the dimensions don't. It's not a cache problem, and I've tried on several devices.
I very much appreciate the help,
Fredrik
Can you post a link to your code?
Does the problem only occur on a mobile device? What happens when you resize the browser window to a width less than 700px?
Typically this kind of error is due to having selectors that are too specific somewhere else in your code, which makes them hard to override.
Try adding !important to the end of your declaration to see if the style can be overridden. Beware its generally bad practice to leave !important in there, so if that works for you search your code for the offending selectors and adjust it until your media query can override.
I don't understand why form width increases on Safari for iPhone. I tried to modify my CSS, and seems that "font-size" caused the problem. Any Solutions?
This is the code:
HTML:
<input type="text" id="form" class="newsletter_input" name="email">
CSS:
.newsletter_input {
border: 0px solid #fff;
background: #fff;
color: #0ce980;
font-family: 'Lato', Arial;
font-weight: 300;
font-size: 42pt;
width: 855px;
height: 100px;
margin-left: 50px;
margin-top: 10px;
text-align: center;
}
.newsletter_input:focus {
ouline: 0;
}
Mobile Safari (like Chrome for Android, Mobile Firefox and IE Mobile) increases the font size of wide blocks (at all times), such that if you double-tap to zoom in on that block (which fits the block to the screen width), the text will be legible. If you set -webkit-text-size-adjust: 100% (or none), it won't be able to do this, and so when a user double-taps to zoom in on wide blocks the text will be illegibly small; users will be able to read it if they pinch-zoom in, but then the text will be wider than the screen and they'll have to pan horizontally to read each line of text!
Ideally you would fix this by using Responsive Web Design techniques to make your design adapt to mobile screen sizes (in which case you would no longer have any very wide blocks, so mobile browsers would no longer adjust your font sizes).
Finally if you really need to prevent Mobile Safari from adjusting your font sizes you can set -webkit-text-size-adjust: 100%, but do this only as a last resort since it is likely to cause mobile users to have difficulty reading your text, as it'll either be too small or they'll have to pan from side to side after every line they read. Note that you must use 100% not none because none has nasty side-effects in desktop browsers. There are also equivalent -moz-text-size-adjust and -ms-text-size-adjust properties for Mobile Firefox and IE Mobile.
Edit: for example in your case the simplest is probably the 2nd alternative, so you could try adding the following CSS:
/* Mobile browsers only */
#media only screen and (max-device-width: 480px) {
.newsletter_input {
width: 855px;
}
.newsletter_input #form{
font-size:42pt
}
}
Though it's not ideal to hardcode 855px like this; you could improve on that by using a variety of CSS media queries, or getting the device-width from JavaScript.
#main-window #appmenu-button{
background:transparent !important;
background-color:transparent !important;
box-shadow: rgb(252,252,252) -0.5px -0.5px 0.5px !important;
border: 1px solid rgba(245,245,245,0.899) !important;
border-radius: 0.25em !important;
outline: 1px solid rgba(222,225,225,0.799) !important;
-moz-outline-radius: 0.3em !important;
outline-offset: -1px !important;
list-style-image:url("chrome://branding/content/icon16.png") !important;
min-width:78px !important;
padding-right:56px !important;
margin-right:-56px !important;
padding-left:0px !important;
margin-left:0px !important;
}
This is a part of a userstyle's code which use to display an icon(a little Firefox) and an add-on called FlipClock at the orange Firefox button.
I want to replace the chrome://branding/content/icon16.png (the little Firefox) with another image. But, the image I applied to is too large.
The full stylish code: tny.cz/44499fac
The original orange Firefox button:
After the userstyle is applied:
The image I want to use (Click for proper image):
This is what my attempts look like:
How do I set the size of it?
Thanks!
There doesn't seem to be a way to scale a list-style-image with CSS.
Reference:
CSS spec for list-style-image
"CSS list-style-image size"
So, your only recourse is to resize the image -- which you can do with one of many image editors. For information on how to do that and retain the transparency, search and/or ask on superuser.com and/or webapps.
However, I took the liberty of shrinking that image for you. Here it is, sized 32x32 and 16x16, with the transparency preserved.
Note that reducing large images down, does not always make a good icon. ;)
16x16:
32x32:
(Shown with gray background to demonstrate that transparency is preserved.)
Use photoshop or some other software to re-size your image, and make a alpha layered 16x16 PNG image
Working on my home page where I'm cycling through some images using JQuery's fadeIn and fadeOut methods.
The images have a border of 2px and a radius of 14px applied.
As you can see, the corners of the image are overlapping the border.
This behavior only happens in Safari and Chrome, not in Firefox and IE.
Anyone have any idea as to why?
You can see this behavior here:
http://www.findyourgeek.com/index-copy.php
Thanks.
Support for border-radius on images in Chrome/Safari (or rather Webkit) seems to be a bit buggy
Chrome -webkit-border-radius bug? - CSS-Tricks Forums
The above post is from earlier in the year (~Chrome ver 10) when the support for border-radius on images wasn't working. Support is available know but like you're seeing it still has some issues. You may want to report the bug you're seeing to the Webkit/Chrome/Safari projects. I know there was a fairly easy to find bug reporting page for Chromium, not sure about the other two.
Here are two ideas for workarounds:
you can apply sort of a CSS3 hack by removing the 2px border and setting a 2px stroke box-shadow (box-shadow:0 0 0 2px #606060;). This would have a few drawbacks as it's only a fix for Chrome/Safari example jsfiddle
or of course the other option is to edit the photos to give them rounded corners (http://www.roundpic.com/ is a good site for this)
try removing the border styling from the image itself and adding it to #content #topStoriesTest
#content #topStoriesTest {
border: 1px solid #CCCCCC;
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
height: 318px;
overflow: hidden;
position: relative;
width: 549px;
}