I'm stumped here. I've got maybe 2-3 pixel difference with my header text (img) when displayed in FF vs an webkit browser. Not a whole lot going on in this page. Both the CSS and HTML validates. Doesn't appear to be and text zoom related. What am I missing?
www.caribouhouse.com
There's a hack for overwriting a css rule in firefox 3 , you can use this :
.foo{}/* other browsers */
.foo, x:-moz-any-link { } /* FireFox 2 */
html>/**/body .foo, x:-moz-any-link, x:default { } /* Only FireFox 3 */
FF and WebKit use different methods/algorithms to render text. Even WebKit by itself uses more than one method to render text, depending. Because of kerning etc it's normal to see different implementations have a difference of a few pixels when rendering text, even when the text is the same font in both cases.
Related
the spans .cursor and .cursorinner aren't displayed in opera, is there an opera specific css property I could set? is my css invalid or is this an opera bug?
i just tested this with different browsers, works in
ie 7-9
chrome
safari
firefox
doesn't work in opera tho
fiddle is here : http://jsfiddle.net/etj6z/1/
This isn't working because you're depending on 2 inline elements to have defined block dimensions. Adding display: inline-block; (or display: block;) to the cursor spans make the element display in Opera. There is an additional issue with the blinking, which is due to the same issue. You'd probably be better off using show() and hide() but otherwise you should be using display: [inline-]block; in the js also.
As i titled i have two boxes like this Guys now you can understand my problem ;)
in a responsive layout i want to display this boxes with background yellow transform like this one of left is float left and other one is float right of the browser window. i think its too hard please help me friend's :(
iam using css3
Here's your (mostly) cross-browser solution:
<style type="text/css">
#oneOfYourRectangles
{
-ms-transform:rotate(10deg); /* IE 9 */
-moz-transform:rotate(10deg); /* Firefox */
-webkit-transform:rotate(10deg); /* Safari and Chrome */
-o-transform:rotate(10deg); /* Opera */
}
#theOtherRectangle
{
-ms-transform:rotate(350deg); /* IE 9 */
-moz-transform:rotate(350deg); /* Firefox */
-webkit-transform:rotate(350deg); /* Safari and Chrome */
-o-transform:rotate(350deg); /* Opera */
}
</style>
Ya know, I never did get around to testing to see if negative values are supported.
Also, note that obviously the 10deg and 350deg are just guesses. Replace them with whatever value fits best.
And, just for funsies, note that webkit (Safari and Chrome) support 3D transformations, too.
Trying to implement this gallery on my website.
http://coffeescripter.com/code/ad-gallery/
It is noted in the css file that the next and previous buttons won't show up in IE6 unless a nonexistent background image is applied to .ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next. The code they used is invalid, but it works. I have also tried using a color instead and it does work, but not what I wanted.
I don't want to point to a nonexistent image file or a blank.gif if possible. Does anyone know what causes this problem in IE6 and if there is a pure css workaround? zoom: 1 does not work in this case.
I presume your IE6 requirement is referring to the following snippet from the jQuery AD Gallery plugin's stylesheet, jquery.ad-gallery.css:
.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
/* Or else IE will hide it */
background: url(non-existing.jpg)\9;
}
The \9 at the end of the background shorthand rule is actually a CSS Hack targeting IE6, IE7 and IE8 — not just IE6.
Note: Paul Irish wrote a Comprehensive List
of Browser-Specific CSS Hacks back
in 2009 which highlighted this
attribute parsing bug in IE/Win:
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
If you don't want to use a 1 pixel transparent spacer.gif or non-existent file for IE (which would throw a 404 error), just modify the CSS to re-use one of the existing images in the gallery but specify the background-position's X and Y property to be off the screen:
.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
/* Or else IE will hide it */
background: url(ad_next.png) no-repeat -9999px -9999px\9;
}
This creative work-a-round will allow IE 6-8 to display the previous and next links, but won't actually show the specified background image file, since the X and Y values position the background completely off the screen.
Don't support Internet Explorer 6. It's over 10 years old. Recommend your users upgrade Internet Explorer or switch to a different browser. Problem solved!
I have a text item on a web page that appears too large in opera browsers. Is there a way to edit text size and other aspects of the css for only opera?
check out this link (scroll down to the part about Opera)
Here
(I never knew this but...) apparently you can use:
#media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.operaSpecificStuff { }
}
Opera has a bug in font size defined by em or %. Just reset the font size like this:
body { font-size: 16px;}
Opera doesn't allow for font-sizes smaller than 10px – which results in having bigger fonts on small texts in Opera only. This is intended by design as this setting can be changed by the user only.
See the following thread: http://forums.devshed.com/css-help-116/force-opera-to-use-font-size-less-than-10px-or-763589.html
I know how to target IE, but that's only in HTML (which means I need to create another CSS file for IE bugs). Is their anyway, how I can implement the fixes in the same CSS file. This mean I target IE with CSS code?
You can do with these hacks
For example:
selector {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}
There is no equivalent to conditional comments/code in CSS. The only thing you could do there are the old CSS hacks -- that people struggled with before conditional comments became known.
You can make CSS hacks work, for a bit, but it's not a smart or robust approach.
Recommended approach:
Always start with a CSS reset. Here's a good one: http://meyerweb.com/eric/tools/css/reset/reset.css
If at all possible, get your boss or client to realize that IE6 support is not cost-effective.
Design HTML and CSS with an eye for IE bugs, as much as possible. EG, float-problems, height and margin problems, etc.
For those few things that still need different CSS in IE, putting them in a conditionally-included, separate CSS file really is the simplest, most robust approach. The bonus is it doesn't penalize decent browsers one bit.
In your CSS code, precede your selectors with something that only IE will recognize. Examples of selecting <div> elements in IE6 and IE7:
IE6 only: * html div
IE7 only *:first-child+html div
A comprehensive list can be found here: http://paulirish.com/2009/browser-specific-css-hacks/