CODEWITHSUNDEEP
cssfirefoxhtmlgoogle-chromesafari
Chris Armstrong
Chris Armstrong

Reputation: 3625

HTML5 elements working in Chrome but not Safari or Firefox?

I'm using the HTML5 elements and in a project i'm working on and the css seems to be working fine in Chrome. However, it doesn't appear to be working in Safari or Firefox (I haven't tested IE, but I'd imagine it's the same), and the page layout is all over the place.

Any ideas why this may be? I know Firefox and Safari both support these elements, and Safari is webkit-based like Chrome, so I can't figure out what the problem is.

You can see the webpage here. {website link not available}

Upvotes: 1

Views: 5808

Answers (3)

Ariya
Ariya

Reputation: 1

I had a problem with "figure" element, not showing background image. so i overcome the problem with this...

background-image:url("../img/login_bg.jpg");
background-position:center center ;
background-repeat:no-repeat;
background-size:cover;

This didn't work... background: rgba(0, 0, 0, 0) url("../img/login_bg.jpg") scroll center center / cover ;

Upvotes: 0

Mathias Bynens
Mathias Bynens

Reputation: 149654

Safari and Firefox have the same level of ‘support’ for HTML5 sectioning elements (after seeing your demo page, I’m guessing these are the elements you’re talking about): they can be styled, but you have to set display: block; implicitly.

aside, article, section { display: block; }

Adding this rule to your CSS will solve the problem.

To make these elements stylable in IE, you just need to use the HTML5 shim/shiv. Put the following HTML in your <head>:

<!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Upvotes: 6

dclowd9901
dclowd9901

Reputation: 6826

Which part isn't working exactly? The <canvas> element appears to be rendering correctly, your <article> container isn't being ignored.

I'm in FF3.6.2, btw. The only CSS errors I see are just that: CSS errors.

Upvotes: 0

Related Questions