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).
Related
I rarely run into these kind of differences between WebKit & Gecko but it is critical to my client. I am not able to adjust the placeholder word "SEARCH" in the search field at the top right of this site. In Firefox it sits where I want it but in Chrome/Safari it is shifted down. How can I correct this so that it is consistent between browsers?
http://splitlightdesigns.com/megatel/
Many thanks,
Houston
Like chris mentionned in the comments section, line-height: is what you're looking for.
I tried it in both chrome and firefox, and a line-height of 26px fixed the problem. You have to apply it to the input type text. (you can also try it by opening your browser's console and type the new property in the element.style {} section.)
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'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).
i have a blog and i have placed a form in right but it shows different result in different browser.
The Link named "Subcribe in a reader" should be in center but it shows in left in Safari and Opera but IN FF and Ie7 Shows Perfectly in center.
And The border is 5-6 pixel going up in Opera and Safari but in FF & IE 7 it shows Perfectly fine. And In Ie6 it shows border line 10-12 pixel downside ... strange
i m using this code to adjust for postioning..
please help....
my blog : ww.techieinspire.blogspot.com
check image here
http://techie2inspire.googlepages.com/csspositioningproblem.JPG
Your markup is seriously jacked up. Use Firebug on Firefox to look at it. Here's a couple things I noticed:
You have your elements for your subscribe link inside the form above it. This is not apart of your newsletter form, so shouldn't be contained inside that form.
Your using a lot of <span>s with block elements inside them. <span>s are generally for inline content and sticking block elements (like <p>) inside could give weird results.
Check your stylesheets where your setting the left padding for ".newsletter p" this is affecting your subscription link.
Try to avoid specifying styles inline (using the style attribute).
Stop using postion:relative everywhere. Instead using padding and margins for layout your sidebar.
Generally to center something, you can do this:
.centered_thing {
margin: 0 auto;
text-align: center;
}
Edit: The marquee thing is terrible. Read about what happened to the HTML marquee tag. There's many good reasons to avoid it or Javascript knockoffs.