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.
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.
Please see my site at http://www.visioville.fi/en/ for reference (visioville.fi/styles.css for latest style)
CSS3 Transitions have been used in Front page's newsbox and in Work samples (or Gallery). They work fine on latest browsers, but how about older browser versions (IE for instance)? Is there a code that can be assigned to just certain browsers (for example, could I tell an older IE browser to just pop up the big gallery picture without any "transition", to avoid problems / broken gallery)?
Is it problem that I'm getting errors from CSS Validator for all of the transitions, for example:
.big ul li img Property transition doesn't exist : width 1s ease
and my code says:
.big ul li img { transition: width 1s ease; }
Thanks in advance.
The best way, to do so, is to develop with progressive enhancement. This means for short: Code your gallery without JS and CSS3 (e.g. open the picture via a new window), then apply CSS3 and then JS.
There's nothing wrong with your css. The transition-property is still in working draft, and therefore not officially completed. Thats why the w3c validor doesn't know that new property or the validor does not know this css-shorthand.
Because oldrr browsers don't support transition, they will just ignore it, and the style change will happen with no animation.
Regarding your validation: I guess it's because it could be because your validator is not validating for css3? Also make sure you use te vendor prefixes (e.g. -webkit-) or a script like -prefix-free to add them dynamically.
I want to start using some HTML5 tags, but worried how it will render on browsers that do not support HTML5. It seems like html5shiv is a solution I can use for IE browsers < 9.
However, what if the browser doesn't support HTML5 and is not IE? What then? Why is html5shiv an IE thing?
First, to be clear, html5shiv just makes it so that you can style certain HTML5 tags (section, article, etc.) correctly. It does not give the browser "HTML5 support" in any more general sense of the term.
With that in mind, note that IE <9 are the only browsers that don't allow styling of these HTML5 tags correctly, so that's why html5shiv only applies to them.
Other browsers (even very old ones like Netscape Communicator 4) will still parse the unrecognized tags correctly and allow CSS to apply to them as you would expect.
As zzzzBov notes in his answer, they might not have the correct default styles (which in most (all?) cases are either display: block or nothing), so you'd need to add those even for non-oldIE browsers. But doing so works fine in non-oldIE browsers, whereas in oldIE, adding these default styles---or any styles whatsoever---only works if you use html5shiv.
The initial value for the display property of an element is inline (ref). The built-in user-agent stylesheet changes the properties to sensible values for known elements; for example, headings and paragraphs are changed to block.
HTML5 introduces new elements such as header, footer, article and section (the HTML5 sectioning elements). Since older browsers do not know about them, they treat these elements as inline. You must therefore add CSS rules for these elements manually:
header, footer, article, section { display: block; }
But as mentioned in the Story of the HTML5 Shiv:
...Internet Explorer 6-8 pose a problem as they do not recognize
unknown elements; the new elements cannot hold children and are
unaffected by CSS
The workaround for IE 6-8 is also mentioned in that article:
Btw, if you want CSS rules to apply to unknown elements in IE, you
just have to do document.createElement(elementName). This somehow lets
the CSS engine know that elements with that name exist
Now, regarding your question: The html5shiv uses some JavaScript tricks to make the unknown elements styleable in IE 6-8. As for other browsers that do not support HTML5, the html5shiv, if necessary, adds the default styles required to render the HTML5 elements properly so that you don't have to define the CSS rules yourself (as mentioned above).
Note that html5shiv does not make the browser support HTML5. For example, it cannot make IE7 play videos embedded via HTML5 <video> tag.
Other browsers support non-standard elements simply by setting their css display property:
header,
footer,
article,
section,
...etc... {
display: block;
}
For old versions of Firefox and webkit based browsers (pre HTML5) this was all that was necessary.
htmlshiv is an 'IE' thing, because some versions of IE [still] lack many HTML5 features. What works in chrome or other webkit browsers may not work in IE, so htmlshiv TRIES to give a javascript adaptation of the missing features. Its a polyfill, to be exact as well.
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/
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.