7

I was putting the finishing touched on a site I'm working on and was going through and cleaning up the code...deleting unnecessary markup, renaming elements to better describe their function, etc...

For some reason my page layout became broken in IE6 as a result. IE6 is still the primary browser on the company computers. After wasting a lot of time I finally determined the source of the problem.

I renamed the DIV element that contains the main content of the page to "content". For some reason, IE didn't appreciate this and I don't know why.

Are there certain words that are not allowed for use as ID or Class names? If so, what are they and what browsers are affected?

SharpBarb
  • 1,590
  • 3
  • 16
  • 40
  • 4
    "IE6 is still the primary browser on the company computers." I'm sorry. Is there any affordance for an upgrade of sorts for your company? It doesn't have to be now, but, the sooner the better. – BoltClock Nov 09 '11 at 19:15
  • 1
    `content` is absolutely fine, see the answer to [this question](http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names) for a full list – Clive Nov 09 '11 at 19:15
  • you mean you ranamed the `
    ` to `` or `
    ` to `
    `?
     – hunter Nov 09 '11 at 19:16
  • 1
    >my page layout became broken in IE6. Stopped reading there. – Ben Nov 09 '11 at 19:20
  • to
    , once I renamed the id to something other than "content" and it worked fine. I work for a big company, we have a lot of content that only work in IE6. They have started rolling out IE8 to a number of users for testing. I think they are going to fully deploy IE8 sometime next year.
     – SharpBarb Nov 09 '11 at 19:46
  • 1
    @SharpBarb: That's good to hear! – BoltClock Nov 09 '11 at 19:52
  • IE6 is still the primary browser on the company computers. "Internet Explorer 6 (abbreviated as IE6) is the sixth major revision of Internet Explorer, a web browser developed by Microsoft for Windows operating systems. It was released on August 27, 2001,". How can you even work for a company that is _ELEVEN YEARS BEHIND TECHNOLOGY_ – GAgnew Nov 09 '11 at 19:59
  • Dude, you have no idea. About a month ago they launched a new version of the company's main internal page. They sent out an email to announce the change. I laughed when I read in the email "The new page is optimized for Internet Explorer 6" – SharpBarb Nov 09 '11 at 20:02

3 Answers3

3

Be certain that, there is no other ID called "Content" anywhere else on the site. Having 2 objects with the same ID (In this case "content") will make CSS fail.

And remember to check your CSS has changed ID as well! :)

MicBehrens
  • 1,780
  • 8
  • 34
  • 57
  • No other IDs had the name "content". I thought that maybe this issue presented itself because their is a CSS property named "content". – SharpBarb Nov 09 '11 at 19:54
  • I'm using the content on all of my own websites without a problem, so my bet is that the problem is in the CSS somewhere :) – MicBehrens Nov 09 '11 at 19:57
  • Try maybe searching your files for the old ID name and see if there isnt a broken ID-link anyway which make the page flaw.. – MicBehrens Nov 09 '11 at 19:59
  • Have you looked at then in IE6? Using "content" as an ID worked fine in FF. It was only a problem in IE6. I didn't check any other version of IE. – SharpBarb Nov 09 '11 at 19:59
2

For an ID, according to the W3C:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

It should also go without saying, that two elements cannot have the same ID in the DOM.

For CSS class names, take a look at this StackOverflow answer.

Community
  • 1
  • 1
vcsjones
  • 138,677
  • 31
  • 291
  • 286
  • I knew certain characters and duplicates were not allowed, but I didn't know if there were any specific words that were forbidden. – SharpBarb Nov 09 '11 at 19:51
2

I renamed the DIV element that contains the main content of the page to "content"

if that means <div id="badnameforcontent"> became <div id="content"> then perhaps the styling for the previous id "badnameforcontent" was lost as a result, check your CSS for that original name and update it to #content instead.

MikeM
  • 27,227
  • 4
  • 64
  • 80