Why (& rarr; wiithout the space) → is displayed tiny and lowered in Google Chrome Browser than the Firefox one which is displayed as it supposed to be? Anyone any idea how to fix this?
Try to use one of these:
-o- : for Opera;
-moz- : for FireFox;
-webkit- : for Chrome, Safari,...
I just name three of them because there are more. Different browser will display different things because they can not do all the Css Atribute. Let me take an example:
Hey I want to use border-radius, hmm it looks nice to Chrome but when I change to Opera, it crashed. Let's use the -o- one. Then your code from this:
.square{ border-radius: 30px; };
to this:
.square{ border-radius: 30px; -o-border-radius: 30px;};
This will help Opera know that "Hey, this guy one border-radius on my browser. But I don't have it, let's take it from Chrome. " And there you go!
Related
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.
I am working on one of the opensource projects. I am facing a weird problem. When I open the website on Firefox or Chrome it displays the color I expect, but on IE it does not show up in that color (it shows very light color). My guess is, that this is happening because of the gradient I am using which IE is not able to interpret correctly. Here is gradient CSS code:
#mainmenu {
#css3_backgroundLinearGradient({
'angle': 'top',
'colors': [
{'color': '#77D3F8', 'position': '0%'},
{'color': '#3FA4D8', 'position': '100%'}
]
})
box-shadow: 0px 1px 2px $theme.linkColor;
}
When I do the view source on web page, I also see a line i.e:
<div class="gradientfilterIE"></div>.
I am not sure, is this line the culprit? But the complete open source project
source code does not have this line with gradientfilterIE. I am not sure if this line is causing the issue then where is it coming from?
I need your expert opinion why I see different gradient color on IE but works perfectly on Firefox and Chrome.
Setting this actually solved my problem:
#mainmenu .gradientfilterIE {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77D3F8', endColorstr='#3FA4D8',GradientType=0 );
}
Do we require filter: progid:DXImageTransform.Microsoft.gradient only for IE?
Because on Firefox and Chrome, without this it also works fine.
Gradients only work in modern browsers and not IE but that CSS you show is invalid in the first place.
Webkit browsers (Safari and Chrome) keep cutting off text-shadow on my custom fonts (from TypeKit). I'm not sure what I can do to fix it. I've been looking around but havent found a similar issue anywhere else.
Screenshot in Google Chrome
Looks fine in Firefox
Any suggestions would be awesome. Thanks!
This is a problem because webkit makes the text node box too small to accomedate the font. Probably due to its cursive style etc.
Add a to the end of the text and you will see it works. To offset the extra space that creates you could use a negative right margin. If the only problem is the headers this should work fine...
margin-right: -4px;
Fiddle arround with the value until you get it right
on line 286 of your style.css file change text-shadow property's value to 5px 5px 1px #B2CA52
I have a div with border radius, I write the CSS code for all the browsers:
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
but in IE it doesn't work!
What should I do?
Border radius does not work in IE until version 9.
See: Support for "border-radius" in IE
There are some suggestions on that answer as well as on Google for alternatives.
You may be required to use images for your rounded corners. You may be able to use a JavaScript based re-creation of rounded corners.
I think using PIE.htc for all css3 styles will be better. I have used it in many of my projects and works fine in IE7/8/9.
Here is the link. http://css3pie.com/ This will provide you various demos for that and it is really helpful.
Thanks.
If you're using IE8 or older, you have to do that with images or some sort of javascript plugin. If you're using IE9 or newer, then that code works perfectly fine.
Here are some jQuery plugins that could solve your problem: http://plugins.jquery.com/plugin-tags/border-radius
Nifty Corners works as well in IE8.
Here is an example: http://jsfiddle.net/jCm7T/1/
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;