I am having issues with Firefox rendering text differently to every other browser when negative letter spacing is applied:
h2{font-size:1.6em;font-weight:bold;color:#999;letter-spacing:-0.10em;}
<h2>Time</h2>(approx)
Here is the text rendered in most browsers: http://img707.imageshack.us/i/font2x.png/
Here is the text rendered in Firefox: http://img444.imageshack.us/i/font1.png/
Edit: They are direct screenshots, the images are the same resolution.
Any ideas on how to fix this issue?
I don't know why, but if you use pt instead em in your font-size declaration (but keep em for letter-spacing, Firefox should render your text as the other browsers do.
h2{font-size:18pt;font-weight:bold;color:#999;letter-spacing:-0.10em;}
Add the declaration width: 100%; to the h2 rule to trigger layout in the "other" browsers.
I got it fixed by resetting the css. Just add the below link to your html head.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
More information can be found here. http://developer.yahoo.com/yui/reset/
Related
The css top or margin-top values in chrome is so different with firefox and opera,what should I do?
For example in chrome when I put (top:0px;) my menu is in its right place,but in firefox I have to put (top:-80px;).
What should I do?please help;Thanks in advance.
and also firebug doesn't have any errors.
Sorry I couldn't post a jsfiddle link because the site contains lots of pictures and I reaaly wanted to post pictures so that you can understand what I mean better,I tried but I needed 10 reputation but I have only 8.
You need to reset all the styling that a browser applies, then it will only apply your styling, instead of adding it's own aswell. To do this include a redet style sheet such as Normalize.css
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
Since IE8 doesn't handle PNG 24 transparencies very well, I decided to nix the background image of my PNG's container div so that the background matches the background of my PNG.
Basically, I want to get rid of the background image for #myDiv in IE8 or earlier browsers.
In the header of my page I use:
<!--[if lte IE 8 ]> <style>
#myDiv{margin-top:20px;}
#myDiv{background-image: none;}
</style> <![endif]-->
Changing the margin-top works fine (along with all other adjustments that I made for IE8). Yet the background image still appears, no matter what I try! Short of getting rid of it in my external style sheet, I can't seem to make it not appear.
In fact, when the page loads, it looks like the code initially gets rid of it, but it comes back. I thought that inline styles always trump the external style sheet. Am I wrong?
I checked my css #media stuff, and there's nothing in there that might bring it back. I cleared my browser cache and refreshed. Still there.
Anyone have any clue why #myDiv's background image keeps coming back?
EDIT: I'm working in the header.php template of a wordpress site. (That's where I inserted the code above.) So maybe the external style sheet does indeed trump inline styles in this case?? I don't see why it should, but could that be the answer?
I know it's not a perfect solution, but would adding the background image as a media query work (as IE8 does not support media queries)?
#media (min-width: 1px) {#myDiv{background-image:url(/etc/etc/etc.png);}}
Try using this code:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Also make sure your background image is at least 4px x 4px
Here is a related post:
PNG background image not showing in IE 8< using html5?
I'm having some problems with my page, I'm using less css and one of atributes css is the line-height is not working so very well. On all browser appears the same mode but on the IE it appears different.
This is the problem:
If you take a look. will see that the IE shows the text more higher than the checkbox on IE
I'm using a variable to define the line-height, so I'm wish know if exists some hack or trick to use two values to the same variable (i.e line-height = 20 - if any browser, line-height = 25 - if IE browser, or some way to resolve this issue.
I just want align the checkbox and the text.
You could try
<!--[if IE]>
<style>
</style>
<![endif]-->
I'm making a website with HTML5 and CSS3 features. I've got two custom fonts which are added through #font-face. They're used in logo. They're in 'h1' tags, and I rotated them with CSS3 proporety:
transform: rotate(350deg);
Of course for every browser I used proper prefix (for IE: "-ms-", for FF: "-moz-", for Chrome/Safari: "-webkit-" and for Opera: "-o-"). The problem is that it doesn't rotate in Chrome and Safari. So my question is, does Webkit engine allow to rotate custom fonts with CSS3 properties?
Most inline content doesn't support transforms in webkit browsers - this is a known limitation. Although H1 is a block level tag, my guess is that you're using a span tag (inline) inside the H1 tag around your actual text to add the font, and this is giving you problems.
Add "display: inline-block" and see if that helps.
I've read through other questions but to no avail - I really can't work this out.
The site is (Been redesigned, so isn't relevant anymore. It used HTML5 elements, but they weren't declared as block, and IE doesn't assume that they should be.)
The gradient on the footer looks great in non IE browsers, but fails to show in IE 7,8 and the IE9 dev preview.
Any ideas?
You could try adding this to your footer CSS (in addition to your existing footer styles).
footer
{
display:block;
}
This fixed it for me under FF3.6, and I'm assuming will fix it in IE as well - The default display style for <footer> is inline which doesn't play nice with backgrounds regardless of browser. Applying block to it will treat it more like a div.
You'll also want to be careful with your use of HTML 5. Not sure of how well supported it is in all browsers. You might want to consider <div id="footer"><!-- contents of footer --></div> and applying styles to it by id in CSS instead..
I had a similar problem, but finally find the solution.
Change your format image to png.
And works fine in IE8.
This works:
#footer_text {
background: url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000) repeat-x scroll top left;
}
I'd be careful about applying any styling to html5 elements like footer right now. They're not well supported by all browsers.
You can use them for semantic reasons, though.
If I look at the footer using IE 8's developer toolbar, I get this as the background-image definition:
url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000); TEXT-ALIGN: center
Notice the part to the right. I'm not sure where it comes from - it's not in the style sheet. Maybe the sheet is somehow garbled. If I remove the text-align part, the footer image shows fine. The same is happening to your body definition.
try opening the file in Photoshop or similar, and doing a clean save for web as a PNG.