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).
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).
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.
I need to create a web application to run on Blackberry browser. The issue i am facing is:
There are a few text boxes on various pages which are given a CSS class. I needed to use border property to give them all- 1px solid Black. But on incorporation of this border property for Blackberry, there is an open issue. Once i tap on the edit field, the Blackberry browser is somehow filling the text box with blue background. Note that such behaviour is not seen on iPhone and Android. It seems that Blackberry browser is using its default behaviour. Is there any way to stop the automatic behavior of Blackberry browser such as some css property or javascript or meta tag? Has anyone else faced similar problem?
On More research into this, i found that the border is not actually making the background as blue. But, as soon as we include border property, it highlights that element with its default blue color. (Likewise, it does in case of taps on images). I tied using -webkit-tap-highlight-color property to disable it. But, it works on iPhone but not on Blackberry.
More research lead me to css property "outline:none" Outline property was leading to the highlight of any element. The issue is solved as soon as you do the outline:none
You're better off not overriding the default behaviour of the browser. Blackberry users will likely be accustomed to the blue highlight. It is most probably being added with a :focus CSS pseudo-class. If you stil want to override it, you could add a input:focus { background: #fff; } etc. rule.
Is possible to change scrollbars' style for all browsers? If it is, how?
It is possible in Internet Explorer using a number of non-standard scrollbar-* CSS properties. See this page for a handy generator tool.
Other than that, it is possible only using custom JavaScript-powered scrollbar solutions. The jScrollPane jQuery plugin looks very nice and easy to install. Here is an example page.
Styling and programming scrollbars are not addressed by standards at this time, but some vendors have extensions to address this problem in desktop web browsers. The jScrollPane jQuery plugin is an excellent choice if you want to use custom scrollbars.
Vendor Extensions
Internet Explorer (starting with version 8) has extensions to CSS and the DOM allowing you to specify color only of the different parts of a scrollbar.
An updated link to the Microsoft documentation is this: http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx. You'll want to just look at all the properties starting with "-ms-scrollbar".
WebKit (e.g. Safari and Chrome) has a CSS pseudo-element for styling scrollbars which allows you to apply any CSS property to it. To learn more see this Surfin' Safari blog post: http://webkit.org/blog/363/styling-scrollbars/
Example:
::-webkit-scrollbar
{
width: 13px;
height: 13px;
}
Mozilla (e.g. Firefox) and Opera do not seem to have any support for styling scrollbars.
Custom Scrollbars
Regarding the jScrollPane jQuery plugin is an excellent choice, if you want custom scrollbars. It is pretty comprehensive in addressing expected functionality of scrollbars and keeps you from rolling your own.
It is important to realize jScrollPane replaces the browser's native scrollbars, and you might not find the "touch and responsiveness" of those custom scrollbars to be as good as "the real thing." But then again, it might be good enough if you value form over function.
This is a more recent link to the jScrollPane documentation: http://jscrollpane.kelvinluck.com/
Nope. IE allows you to set colours for some constituent parts of the scrollbar. Opera allows a few but not all of those styles.
Scrollbar colour styling is of increasing irrelevance as UIs move towards complex image-based scrollbar theming. In IE, setting any of the colours reverts the rendering back to a Windows 2000-style simple-3D scrollbar instead of any swishy user theme. Windows Vista/7 (Aero) users probably won't thank you for that.
You can of course make your own ersatz-scrollbars out of <div>s and style them how you like. But the result almost always behaves worse than real scrollbars, since you're trying to replicate a complex UI element whose expected behaviour is different for each OS. You can spend a lot of time reproducing paging behaviour, keyboard up/down and the mouse wheel, but it'll never quite feel as smooth a real OS scrollbar.
You can style scrollbars for all browsers with a little bit of Javascript. But at present time there is no way to style them using just CSS alone as a cross-browser solution.
This article will help if you decide to use Javascript.