ansaurus

Question

CSS troubles in FireFox and IE and I dont understand why.

Answer 1

A:

First: Some problem might be due to an invalid doctype tag... yours is <!DOCTYPE html>, but you should specify exactly what standard the browser should adhere to, otherwise the browser will enter it's 'quirks' mode in which they all render differently.

Try this instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Read more about doctypes here:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Second, the CSS for floatingbox should be .floatingbox{/somecss/} - the dot in front of "floatingbox" indicates that it is a class. The class is then wired up to an HTML element like this: <div class="floatingbox">{somecontent}lt;/div>

FrankS 2010-08-25 20:43:07

No, that doctype is not invalid. It's the HTML5 doctype, and it puts almost all modern browsers into standards mode. See http://www.w3.org/TR/html5/syntax.html#the-doctype and http://hsivonen.iki.fi/doctype/

Brian Campbell 2010-08-25 20:46:46

OK, my bad. Though I have my doughts about exactly how good HTML5-support is in any browser yet, as the standard is far from finished yet (several years away yet). I _suspect_ this might account for buggy behaviour in different browsers... This is only something i _suspect_ though... :)

FrankS 2010-08-25 20:55:46

@FrankS Check the hsivonen.iki.fi link I pasted; he has tested many browsers against many different doctypes. The most recent browser that has trouble with `<!DOCTYPE html>` is Netscape 6, which I think we can pretty well say can be ignored by now. `<!DOCTYPE html>` was picked for HTML5, in part, because it already worked to trigger standards mode in all of the current major browsers. There are many other features of HTML5 that are unimplemented in various browsers, but the doctype is pretty well supported; so much so that http://google.com itself uses the HTML5 doctype.

Brian Campbell 2010-08-25 21:38:20

Answer 2

+2 A:

You are using non-HTML elements, like <FloatingBox> and <AppleBlue>, which confuse Firefox's HTML parser (and likely IE's as well). For instance, if you look at the parsed tree in Firebug, you will see that most of the elements that are nested within <FloatingBox> are not parsed as being nested within it.

I would recommend using only standard HTML elements. If you want to add an element purely for the purpose of setting CSS properies on it, such as your <FloatingBox> and <AppleBlue>, you should use <div> (for block level elements) and <span> (for inline elements) tags with class attributes on them. For instance, in your HTML:

<div class="FloatingBox">
  ...
  <span class="AppleBlue">Blog</a>
</div>

And in your CSS

.FloatinBox {
  ...
 }

.AppleBlue {

 }

Brian Campbell 2010-08-25 20:44:12

@Brian - so FireFox and IE doesn't support HTML5? I thought that HTML5 I could create tags the way I am and that was one of the benefits?

ator 2010-08-25 20:50:29

No, HTML5 does not allow you to create tags at will. And Firefox and IE at this point support only some of HTML5; for instance, Firefox's HTML5 parser is only enabled in Firefox 4 beta. For what it's worth, your document does parse properly in the Firefox 4 beta, but that doesn't mean that it's legal or supported to create your own tags, just that it deals with it more gracefully.

Brian Campbell 2010-08-25 20:55:31

Valid methods of extending HTML5, such as `class`, `data-foo` attributes, etc. are described here: http://www.w3.org/TR/html5/infrastructure.html#extensibility . You can check whether your document is valid HTML5 at http://validator.nu/

Brian Campbell 2010-08-25 21:07:33

ansaurus

tags:

views:

answers:

CSS troubles in FireFox and IE and I dont understand why.

related questions