?
Solved

firefox css3 problems

Posted on 2011-03-15
2
Medium Priority
?
638 Views
Last Modified: 2012-05-11
I used the help of a tutorial to get my page to look how i wanted it using HTML5 and CSS3.  It looks correct in safari which is what i use on my mac, but when viewed in firefox it stretches the length of the page, the background isn't the same design and the images/buttons in the <nav> </nav> tags don't work.  I've been messing with the code for moz and webkit but i can't get the firefox one to look like the safari one.  Any ideas on what particular part would be causing this?

It can be viewed here: www.digitalnatives411.com/testing and the CSS3 file is www.digitalnatives411.com/testing/styles.css
0
Comment
Question by:newmie22
2 Comments
 
LVL 43

Accepted Solution

by:
David S. earned 2000 total points
ID: 35141873
Firefox 3.6 does not supply default styles for the new HTML 5 block-container elements.
(Firefox 4 does though.) What you need to do is add this to your stylesheet:
article, aside, footer, header, hgroup, nav, section {
	display: block;
}

Open in new window

You'll also need the HTML5 Shim for IE6-8: http://code.google.com/p/html5shim/
0
 

Author Closing Comment

by:newmie22
ID: 35143009
Great, thank you so much!
0

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

569 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question