So I have a submit button that is styled with the following css:
#search_submit {
width:150px;
font-size:1.5em;
}
In safari it look like this:
In firefox it looks like this:
I would like to get the font to display at 1.5em as it does in firefox, but I would like to maintain the rounded corners that are present in safari (which disappear in firefox, only when I add the font-size:1.5em
I read somewhere that its better to use em for cross browser support? is this not the case?
Using em for font-size is not necessarily 'better' for cross browser support. It's recommended because of its scalable nature, but it may not always have the consistency of using pixels (pixel perfect as they say...)
It generally isn't that difficult to get the buttons to look the same between firefox and safari. Without a link to see the page it's hard to say why yours are so different and my guess is you have other css styles on the page effecting your buttons.
Related
I have a problem with this page. I developed it in Firefox on it's default zoom level. The idiot that I am, I haven't tested it on Chrome. So, now I see that the page's layout and/or font size is different on Chrome and other Webkit based browsers. Default Chrome zoom level is 75% so everything is smaller on Chrome. I have to say that I've made a dozen of web apps but have concentrated on the backend side of the application and never put many thoughts in how the page looks like on different browsers.
I mean, I have if javascript cross browser stuff had to be addressed but this is something that I never came across.
What I think is wrong with this is font size. I have a #main-wrap that wraps the entire app and has a base font size of 16px. So, #navigation a has 0.7em because that way it looks normal in Firefox, but looks really small in Chrome.
Could anyone post some tips or hints as to way this is happening?
EDIT:
I've fixed the problem with
zoom: 1.29;
-moz-transform: scale(1);
-moz-transform-origin: 0 0;
And it works but, as I know, it's a good to do this like this. Is there a CSS technique do make pages look the same across browsers?
I've had this issue as well. Using the #viewport tag works well. Here are the articles that I used to resolve the issues:
Firefox #viewport tag - https://developer.mozilla.org/en-US/docs/Web/CSS/#viewport
Setting viewport and zoom - https://css-tricks.com/snippets/html/responsive-meta-tag/
To make sure fonts display weight properly across browsers, an article regarding faux font bolding is http://alistapart.com/article/say-no-to-faux-bold
There are a lot of similar questions with suggestions. Here's one that helped me:
https://stackoverflow.com/a/26353104/2256476
Here is your Answers......
For Firefox :
open up a new tab, and type about:config into the address bar, and
press enter.
Then use the search box, enter the word "pixel" then it will show
"layout.css.devPixelsPerPx".
change the value -1.0 to 1 for 100% perfect scale...
For Chrome:
Right Click the chrome icon or chrome shortcut icon, go to the
properties.
Then in the "Target:" field, Click the field and press end button.
Now you are seen this "chrome.exe" at the end.
copy this text : chrome.exe" /high-dpi-support=1
/force-device-scale-factor=1
and paste on chrome.exe"
Then Restart chrome or close the browser and double click the
shortcut icon.
The reason for the difference is because Firefox uses the system zoomlevel. Which is set at 125% by default on Windows. Whereas Chrome uses a default level of 100%.
I would advise to design for Chrome, because then the text will always be readable.
I have never had this happen before. I have an image in the background of this input field. I have it aligned using the X and Y positioning and I aligned it in Firefox. When I look at it in chrome, it is too close to the words "log in" and is about 2 px too low.
I found this link on SO, but I guess I am not really following it.
How to write specific CSS for mozilla, chrome and IE
I was trying to use :before but could not get it to work. -webkit and -moz do not seem to be a good solution and I could not get thsi to work anyways.
the link is http://www.splitlightdesigns.com/oxbridge
UN - oxbridge PW oxy510
Many thanks,
Houston
every browser has its user style sheet that it applies on its own to some elements unless you override it with custom styling.
you should first of all, reset all of your styles using a 'reset' sheet, here is the first google result: http://meyerweb.com/eric/tools/css/reset/
just reset everythign and then start styling
There is 2px margin on submit input, but not in all browsers. It could be the problem, so set margin: 0 to submit button (or set margin: 2px for all browsers).
Imagine CSS like:
.x {
background: blue none;
border-radius: 6px;
}
and HTML like:
<div>Words and <span class="x">decorated</span> words</div>
The height of the span reading 'decorated' is going to vary wildly between different browsers, and between different OSes running otherwise the same browser.
Is there any way to make it be the same height?
(I don’t want to move to inline-block or sacrifice the text using exactly the same baseline.)
My experience with avoiding of different height is setting exact line-height and font-size
Sounds like there is something else causing your problem. I just tried a basic html5 document with the snippits from your question and compared the alignment on Windows with Chrome, Safari, FF & IE. They all rendered exactly the same except for IE9 which had a 1px gap above the span only.
Granted Mac renders fonts differently from Windows, and I didn't test on linux or mac, but 9px!!!??? Here are some things I'd investigate:
First, try a basic test file if you are working in a larger project, this will limit your variables.
Second, try setting explicit fonts and ensuring they exist on all of your test machines - perhaps linux is falling back to a different font.
Third, make sure you are not zoomed in or using a custom font size browser setting on any of the browsers (I ran into this one a while back where somehow my IE was set to 105% zoom.)
Finally, if all of that fails, you might want to try using a web font (#font-face) and see if that renders more strictly.
Edit:
In lieu of the new information in your comment, another strategy would be to use JavaScript to inspect the rendered heights of some off-screen elements and then programmatically adjust styles accordingly. You'll probably get a huge FOUC, but you can use a whiteout div to minimize the shift.
I'm having a problem whilst setting the height of a button. Basically I can't manage to have it cross-browser. With Firefox, it is higher than normal, without any reason.
Here it's a screenshot (Firefox, Safari and Opera, in this order):
And here the code: http://jsfiddle.net/TMUnS/2/
I also tried adding some specific declarations I found on the web, but actually they just reduced the height a bit, but still, they aren't the same (in the same order):
And here the code: http://jsfiddle.net/TMUnS/4/.
How could I fix this?
Firefox has this funny thing called -moz-focus-inner. I'm not totally sure what it's for, I just know that you sometimes need to do this to get buttons to behave:
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner {
padding:0;
border:0;
}
That might be what you need. You can see the difference here (in Firefox): http://jsfiddle.net/TMUnS/9/
This is a feature set in Firefox which limits the line-height of buttons. It sets a default line height for buttons - http://www.cssnewbie.com/input-button-line-height-bug/. I would try using a fixed height for the buttons and playing around with the padding.
Are you using a CSS-Reset ?
A CSS-Reset normalizes the CSS for the Browsers.
Try this YUI reset:
YUI CSS RESET
I am using GWT 2.3 to create a web application. In the web page, I have a button for the submission. I haven't created any css properties for this button. In Google Chrome and Firefox, the size of the button is just the size of the text of the button. However, in IE8, the size is bigger, with some spaces before and after the text of the button. Does any body know how should I do? Since I need to support the internationalization, the texts of the button for different locales are different.
I have tried width:auto; for the button, but it doesn't work.
Thanks in advance!!
Ah, this is an oldie but goodie.
Basically, IE sucks at rendering buttons and you have to add this CSS to fix it:
.my_button {
/* optional */
padding:0 .25em 0 .25em;
/* These two are required */
width:auto;
overflow:visible;
}
See the link above for more information.
In general (not only for GWT), buttons are rendered very differently not only between browsers, but also between operating systems - especially they look completely different on Mac OSX. Take a look at this site, which also has a few nice solutions around the button problem: http://particletree.com/features/rediscovering-the-button-element/
So if you need exact sizes (and maybe a consistent look) across browsers/OS, I think it's better not to use the native button style at all, but to fully customize the style of your buttons. (This is pretty usual on modern web sites, e.g. I don't think there are any native style buttons on stackoverflow.com at all.)
Use Anchor with different background images for it's various states (link, active, hover, visited).