Help with lack of support for html5 styling in firefox & opera

HTML & CSS
1

Hello,
I unfortunately found out that firefox and opera do not support the bare styling of html5 elements.

I am desperately asking anyone if they know any solutions or hacks to fix this.
Is there a way I could do a conditional statement for firefox and opera, well i think it will make more sense if I explain my issue more:
Take this in consideration:
http://dl.dropbox.com/u/270523/sharingOnline/headerPositioning.html

Using ids and classes in html4 the styling works fine regardless of browser.
If one tests this, the html5 version, in a web-kit browsers (safari/chrome) then the styling is fine. but immediately upon testing it in the latest versions of Firefox or opera some of the elements disappear and are displaced because the styling is ignored.
I usually have issues with IE, but I found this script that allows for html5 styling in IE, which allows the html5 styling to work fine.
I even tried linking this script without the conditional statements so that all browsers would read it, but nothing changed.

I could easily put both the html5 styling and html4 styling in one stylesheet such as:
header{
/styling/
}

.header{
/styling/
}

without any conflicts, but the issue arrises with firefox and opera using a different html source code written in html4.
Is there anyway I can redirect based on what browser someone is using possibly with PHP or javascript?

I hope someone can help and please reply with any questions, comments, or concerns

Thanks in Advance & Best Regards,
Team 1504

2

Hi,

You haven’t set the html5 elements to display:block. Browsers don’t know about them yet and haven’t set up default rules for them. The initial value of display is inline so you need to set them to block.


header,nav{display:block}

More info here.

3

Oh okay. Thank you for saving me-- again. :slight_smile:

Should I do this for all elements even if they are not html5?

4

you should only need to that for html5 specific elements.

your browser should already know about all the html4 elements

but

Off Topic:

why are you using html5 when it isn’t fully supported in at least the major browsers yet?

http://www.html5test.com/ gives an indicative measurement of how well your browser supports html5