I have my site how I like it, cross browser, although I have letter-spacing in CSS, but in safari it does not understand what I have, it ruins the design - any advice? Here is the CSS:
body
{
margin: auto;
font-family: 'Lato';
letter-spacing:0.50px;
font-size: 14px;
color: #999;
font-weight: normal;
}
It seems it doesn't give it any. It works fine in Mozilla Firefox
Webkit browsers (Safari, Chrome) round differently than Gecko (Mozilla). Thus, use 1px instead of 0.5px, as Webkit will round down to 0 while Mozilla will round up.
Chrome/Blink has fixed this issue some time ago so this should work on current stable version: http://src.chromium.org/viewvc/blink?view=revision&revision=153727
Webkit just fixed this, so you will have to wait a little to have it working on safari and other webkit based browsers:
http://trac.webkit.org/changeset/161521
Related
I've faced an issue with input (type search) in Google Chrome and other browsers. Please take a look on the basic HTML code:
<input type="search" placeholder="Search">
and CSS:
input {
height: 30px;
font-size: 16px;
}
JSFiddle Example. The problem is that the placeholder is not aligned well vertically in some browsers:
Google Chrome (v. 55.0.2883.87 m):
Mozilla Firefox (v. 45.0.2):
Internet Explorer (v. 11.576.14393.0):
Opera (v. 42.0.2393.94):
But it's displaying correctly (as I want it to be displayed) in:
Edge (v. 38.14393.0.0):
Safari (for Windows v. 5.1.7 7534.57.2):
I would be happy to place it precisely at the middle, please help to achieve this. Thank you!
UPD:
I've tried:
Resetting CSS;
Setting line-height;
Set paddings;
::-webkit-input-placeholder selector to set height / line-height;
It maybe problem with font-family. Today I've spent 6 hours to fix the same problem on Android. Eventually this was font "HelveticaNeueCyr" problem. The font has a gap on Android devices only which impossible to fix with css.
I changed to Arial and fixed it.
Add line-height to CSS:
input {
line-height:30px;
height: 30px;
font-size: 16px;
padding: 1px 0;
}
Modify line height because you use padding.
I set up a simple example website to show you the issue that I'm currently fighting with:
http://examplesite.ohost.de/
In Firefox the site is rendering just fine, in the Dreamweaver, on my android phone and I think on other webkit browsers, the navigation bar buttons are cut off on the right and I think the buttons have slightly more width.
Here are some screenshots:
So what do I have to change to get a similar result to the one in Firefox in every browser?
edit:
I now tested it on the newest versions of Safari, Opera and Chrome and they are rendering it correctly.
You could use a fix size for navBtn, something like
.navBtn {
position: relative;
float: left;
line-height: 18px;
font-weight: bolder;
list-style: none outside none;
width: 100px;
}
This maintains element size.
I want exact piece of code to get rounded corners for this page http://www.freecsstemplates.org/preview/fotofolium/. When I use PIE.htc file, it's working only when I declare position:relative; everywhere I used it & that's disturbing the layout. Can someone suggest code that works without position attribute for that template.
I didn't give moz & webkit but,it's working in others like safari,chrome. I gave only
border-radius:5px;
behavior: url("PIE.htc");
position: relative;
to make it work in every browser. It's not working only in IE if I remove position attribute even with PIE.htc.I used moz, webkit for border box, maybe so workin with FF, Opera etc.
Use border-radius
Because IE doesn't support border-radius, you can use CSS3 PIE. Thats where the PIE.htc came from.
You can set the CSS declaration for the rounded corners for all browsers, and use an HTC for old versions of Internet Explorer.
Working example for the div with rounded corners with no position set!
CSS
.curved {
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari and chrome */
-khtml-border-radius:10px; /* Linux browsers */
border-radius:10px; /* CSS3 */
behavior:url(border-radius.htc) /* Internet Explorer */
}
.menu_buttons {
margin: 40px;
width: 100px;
line-height: 1.1em;
float: left;
vertical-align: middle;
cursor: pointer;
text-align: center;
font: 0.9em Arial, Helvetica, sans-serif;
color: #fff;
background-color: pink;
border: 1px solid red;
}
EXAMPLE HTML
<div class="menu_buttons curved">.menu_buttons element</div>
Download the border-radius.htc, and check out the CSS curved corner Demos and Page .
TESTED ON
Windows XP Profissional versão 2002 Service Pack 3
Internet Explorer 8.0.6001.18702
Opera 11.62
Firefox 3.6.16
Safari 5.1.2
Google Chrome 18.0.1025.168 m
K-Meleon 1.5.4
Windows 7 Home Edition Service Pack 1
Internet Explorer 9.0.8112.164211C
Opera 11.62
Firefox 12.0
Safari 5.1.4
Google Chrome 18.0.1025.168 m
Linux Ubuntu 12.04
Firefox 12.0
Chromium 18.0.1025.151 (Developer Build 130497 Linux)
I noticed that when using position: fixed on an element, the text on the iPad (iOS 5.0.1) is being rendered better than without position: fixed. This is especially the case for white text on darker background.
My question is how to make use of this improved anti-aliasing without using workarounds such as position: fixed.
Below you can find an example picture and the corresponding code.
http://jsfiddle.net/t4kTm/
I don't know why that is, but I do know how to control anti aliasing in webkit browsers:
-webkit-font-smoothing: none; /* Obvious */
-webkit-font-smoothing: subpixel-antialiased; /* This is what quite a few browers already do*/
-webkit-font-smoothing: antialiased; /* Even more than the one above */
Will this help?
After updating to iOS 5 I wasn't able to reproduce this anymore - weird.
On the iPad, applying position:fixed to the body tag makes the font thinner for all child elements (appearance similar to -webkit-font-smoothing: antialiased). I haven't tested exhaustively, but it works with Helvetica Neue in iOS 5.1.1
body {
-webkit-font-smoothing: antialiased; // make fonts thinner in desktop Webkit
position: fixed; // make fonts thinner on the iPad
}
i have a background image on a webpage and i am placing an image in my body to line up over the image:
here is my css:
Background:
body {
font: 12px tahoma, Arial, Helvetica, sans-serif;
line-height: 1.5em;
margin: 0px;
padding: 0px;
color: #241a10;
background:#c9e4ec url(/Content/images/myImage.gif);
}
Image:
#leftSideContainer {
position:relative;
margin-top:-47px;
width:147px;
height:93px;
background:url(/Content/Images/image2.gif);
}
In IE7 and Chrome, it looks perfect and lines up exact:
But in IE8 and Firefox, the image shows a little lower down compared to the background image:
If it was just an old version of IE that was broken i wouldn't care but in this case firefox is broken as well.
i tried playing with the:
margin-top: -47px;
but if i move it higher to get it to line up in firefox, it them obviously looks misaligned for the other browsers.
any suggestions for what might be causing this discrepancy.?
CSS reset is your friend
http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.