Solved

firefox css3 problems

Posted on 2011-03-15
2
584 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 42

Accepted Solution

by:
David S. earned 500 total points
Comment Utility
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
Comment Utility
Great, thank you so much!
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

762 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now