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.)
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).
I was looking at a friends website and noticed most of the text has the bottom cut off but only when viewing in chrome. I poked around in the css but couldn't seem to find the issue.
Can anyone help me out?
The site is http://www.customcasez.com/
The same issue exists here, Bubbler+One font (at least for me in chrome).
here is an image about how it looks at my place.
So, I guess the issue is not with your website but with the font itself.
Try replacing the font-family with some similar font or try to download it from another source
I've had the same issue. Text in input box looked fine in Firefox however it was cut off from bottom in Chrome.
Check with padding of the input box, it is smartly managed in Firefox but not in Chrome!
I gave padding as padding:0px 6px; (or whatever you intend to give!)
A lot of my floats are showing up on a separate line when viewing in IE7 ... in Ffox, chrome, IE8 etc they look fine.
The site in question is:
http://208.43.52.30
The places where the float is not working are the location for "events near me", "Show" for the show month buttons ..
I'll attach some screenshots
IE 8:
IE 7:
I personally can't see the difference (the closest thing I have to IE7 is compatibility view in IE8), but based on your screenshots it looks like the "Upcoming Events" font-size is much bigger in the IE7 screenshot.
Did you define font-size for your h1 tag? Different browsers sometimes handle the size and margins of header tags different, so if you put h1{font-size:14px;} in your stylesheet maybe it'll fix it.
The Upcoming Events problem is being causes by IE7 pushing the float:right to the next line instead of keeping it in line with the h1, despite no clear I can't figure out a way to get that to stop. An alternative I came up with was to float the h1 left instead and give the default text-alignment:right; This will cause the same layout, and IE7 is happy.
http://jsfiddle.net/znRxq/
Same solution for the show button.
IE7 might be making your input larger (from experience), you should set a different width for IE7.
First off, 'float' is pretty well supported, even on IE. When validating the HTML on you website, I am getting 43 errors (wont really be that many). Correct those and see if it fixes the problem. Earlier versions of IE (<= 7) are not as friendly to slightly invalid markup as IE8, chrome, firefox, etc...
Second, if you are really just trying to display block elements inline, 'display:inline-block' is the easiest way. Contrary to popular belief, this is supported on IE7 & 8. Here is the css for cross browser support:
.inline-element {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
http://betawww.helpcurenow.org/media/press/
You'll see I have used spans within an anchor, with the span.hover-description set to display:none; by default, and on a:hover that span is set to display block and absolutely positioned to create a tool-tip effect when hovering over the name and email of the "For Immediate Release" contact names.
Everything looks as desired in Firefox, but Chrome reveals my unknown blunder somewhere.
Any help on what's the problem that is causing Chrome to not display like Firefox?
Incidentally, Explorer shows the tool tip as expected, although I'm getting a funky bottom margin issue below the names, and Safari has the same issue as Chrome (must be a webkit rendering setting that I need to accommodate for).
OK, I figured it out. Since I'm using a pretty complex nesting structure to accomplish the CSS tool-tips, I overlooked the fact that I had actually nested a p tag within a p, and of course that is a no-no.
Firefox is really friendly to a lot of validation errors, but Chrome and Safari seem to be much more strict.
In the end I changed the p's to span elements and all is well across browsers.