I have one button.Apply the padding to this button.But is not like same size with chrome and Firefox
run the below the snippet with Firefox and chrome you could see the difference.How to rectify the problem
button{
padding:5px 15px;
}
<button>hello</button>
Firefox version 54.0
Chrome
Please Don't mark as a duplicate .i was searched and tried many of the same question answer.but its not working
Thanks,
You want to be using Normalise CSS to ensure that your CSS rules are applied equally and uniformly across all major browsers.
This will solve your issue. If the issue remains please state clearly in your question (edit) that you have used normalise and any other CSS fixes you may have tried.
i was searched and tried many of the same question answer.but its not working
Please outline exactly what you tried.
I found my answer From my way .Its a font problem .Different font family its have some default font size on chrome browser its not same with all other browser
button{
padding:5px 15px;
font-family:Arial,"Helvetica Neue",Helvetica,sans-serif !important;
}
<button>hello</button>
Maybe you can try this code, I hope it will work->
button {
padding:5px 15px;
-moz-padding:5px 15px;
}
Related
Wondering if anyone can help with an IE8 issue, I've searched high and low and tried many different things. On a WordPress site for a client, an input text box appears much smaller than it should, and off to the side of the page, as compared with all other browsers I've tested.
You can see a grab of how the page looks on IE8 (on Windows 7) here:
http://perfectitaliano3.fonterra.safecom.com.au/wp-content/uploads/grab2.jpg
If you compare that to the page http://perfectitaliano3.fonterra.safecom.com.au/recipe/potato-rosemary-and-speck-pizza/ in a modern browser you’ll see the width and placement of the search box and filter dropdown menu at the top right is all messed up.
I'm a bit a noob at IE8 issues, but I’ve tried changing the css, patching it with modern.js, html5 shiv, modernizr, all sorts of things, but nothing makes any difference!
If you have any suggestions please let me know, thanks.
Try this
#top #s{
height: 40px;
padding: 0px 47px 0px 5px;
}
Thanks so much for answering #Jenti. I tried your suggestion but it didn't seem to work, although because it's now live I tried it in the developer tools in a virtual machine version of IE8, so one can never be sure ;)
However I've since found a solution, I added the following:
#searchform > div {
width: 500px;
}
#s {
display: table-cell !important;
}
and that seemed to do it. Thanks again and appreciate it.
I am having issues styling a custom and fancy #font-face on a a link.
The font (Alex Brush) goes outside of its boundaries (by boundaries, I mean the clickable section in this case), which is usually not a problem for browsers. However, I have noticed that when I use a different color for the :hover state, the exceeding section keeps the non-hovered link color.
This appears on Chrom{ium|e} (I am using Chromium 31 on Ubuntu 13.10) but not on Firefox. After further testing, I notice that other strange glitches happen depending on how you play with your mouse and tabs, ...
TL;DR: you can try it online.
Or, here is some HTML you can play with:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href='//fonts.googleapis.com/css?family=Alex+Brush'>
</head>
<body>
<a>!</a>
</body>
</html>
And the corresponding CSS:
a {
font-family: 'Alex Brush';
font-size: 400px;
color: red;
text-decoration: none;
}
a:hover {
color: green;
}
Here is the glitch I get when :hovering the link:
Is it possible to tell the bounding box to include the entire font?
Bonus question: On top of fixing the bounding box for styling purposes, is it possible to fix it once and for all? The use case would be to have a proper clickable section that would include all the text, without using display: block or display: inline-block.
Interesting. I looked at a similar issue last month last month. The exact same bug was addressed there, and I've seen it happen there too.
But in the mean time, this issue seems to be fixed. The current version of Chrome (Versie 32.0.1700.76 m) shows the glyph being properly colored on :hover. Both your example as the example in the link above now work fine. I'm pretty sure the issue will be/has been fixed in Chromium as well.
Check out my original answer if you want to know more about what font-specifics made this bug happen.
Works normally in Chrome
I Don't have Chromium, but I often hear about sites that are buggy on Chromium, I don't know any 'normal' person who uses it which is why I don't test in Chromium
anyway, this is a weird possible solution, but it might work?
a:hover {
color: transparent;
text-shadow: 0 0 green;
}
I had a similar problem in a menu and looked at RoeIn's initial answer, which he linked to, but this put the whole menu alignment out. However, the solution below worked for me:
padding-right: 20px;
margin-right: -20px;
Or whatever dimensions best suit your purpose. As long as the padding equals the negative margin it doesn't put other elements out either.
Ignoring discussions of what a 'normal' person might use for a browser, this problem exists in Safari as well.
I have set border-radius (and -moz-border-radius for the older browsers) to 20px, and I have it working beautifully in Safari and Firefox. Then, I open up Chrome and it's refusing to accept the defined border-radius. Any suggestions to work around this in Chrome?
See the CSS coding in action here: http://jsfiddle.net/MAYea/
Screenshot in Safari:
Screenshot in Chrome:
It's not that border-radius isn't working, it's that overflow is failing to hide the overflow.
This is actually a new bug in Chrome. I have a similar problem on my Doomsday clock even though it worked perfectly in an earlier version of Chrome.
As a workaround, you can specify the border-radius on the contained elements as well as the container.
I had a similar issue, it helped to add
z-index: 0; /* or some other value */
but also
transform: translateY(0);
seems like this is enabling some kind of different rendering (guess nothing with 3d context like we sometime do to FORCE GPU rendering...)
the reason why this works I cannot not explain, maybe somebody else can?
I have this particular problem right now, with latest Chrome v44 on OS X 10.10.5...and yes, I know that this was "fixed" and it's an old question =)...
EDIT: Found the same fix in another SO-Question, check here: link
-webkit-border-radius: is what your looking for I think?
Add the border-radius: 20px; CSS rule to both :before and :after
DEMO
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-border-radius: for the Chrome
If you need it try this javascript library from here
You can use,
border-radius: 100
Instead of,
border-radius: 100px
it will do the job in IE but not in Chrome.
This is a question I belive has been asked before but I haven't found any solution.
Open my jsfiddle in both Firefox and Chrome (Or Safari instead of Chrome). If you look carefully at the letter 'y', you can see that there are one or two extra pixels between the letter and the lower border of the section1-div, in Firefox compared to one of the other two.
I have set padding and margin top/bottom to 0px on the most elements in order to reset the styling to som extent.
Why is that and what measures should I take in order to prevent this?
UPDATE: Using Chrome 17.0.963.56, FF 11 and Mac.
I'm not really sure why this problem happend. It was not working. In my own code I could relate it to the padding. Chrome/Safari and Firefox is handling the padding differently. By adding som padding to the standard css and making an exception for Firefox I did get the expected result. This doesn't help the jsfiddle example (it could actually be that there isn't any problem in the example, could be that the font is displayed a bit different and it looks like there are differen number of pixels between the letter and the border...).
#adminmenu a{
padding-bottom: 2px;
}
#-moz-document url-prefix() {
#adminmenu a{ padding-bottom: 0px; }
}
I'm working on a site and I have some problems that I hope you guys can help me with :)
If I put bold on my text in the menu it looks too bold in Firefox :S, but it looks fine in Chrome.
In Firefox the double border on the #content container is outside of the shadow effect :S, but looks good in Chrome.
Screen shot on Mac Firefox 5.0.1 and Chrome 13.0.782.112:
This is my project.
I hope some one can help me out with this.
If you have something I better I can do, I will be glad to hear that too :)
Your first issue regarding bold font looking different between the browsers is just because of the way browsers render text differently. There is nothing you can do about it, unless you go the horrible route of using images instead.
Your second issue is not about the border but rather the outline. It is caused because of the way Firefox interprets the outline when box-shadow is applied. It applies it outside of the shadow instead.
You can put the code below in your css to target Firefox and bring the outline back in:
#-moz-document url-prefix() {
#content{
outline-offset: -11px;
}
}
Live example: http://jsfiddle.net/tw16/n8bet/
#1: There differences in font rendering in every browser. You can try numeric values instead of simply bold to narrow the results ( http://clagnut.com/blog/2228/ ). Also read the answer on this SO entry: Same font except its weight seems different on different browsers
#2: remove this line from #content css:
outline: 1px solid #B9BDBE;