Table not rendering in IE

[Ixonal]

first of all, the page in question is at ixonal.elementfx.com

ok, so the problem is that the tables I'm dynamically creating for each "bubble" don't want to be rendered in internet explorer. I downloaded and installed the DebugBar and looked at the DOM model and all the info is there correctly, and the divs are created properly (I set their background to a color and they showed up) so I know it's just the table.

 

[crisp]

Try adding a valid doctype declaration (DTD) to your markup, IE's operating in quirks mode without it, which causes all manner of odd behaviour.

Slightly OT, it's not a good idea to rely entirely on JS to render your page content, it's inaccessible to anyone with JS turned off, or using a text only browser, and is actually against the law in some places (certainly is here in the UK for one). You should aim for a page that degrades gracefully wherever possible, rather than alienating your visitors.

 

[Ixonal]

ok, so I tried both the strict and transitional DTDs given by W3Schools for xhtml. Now, the background is always white in both IE and Firefox, and, even more odd, the yellow divs appear correctly in IE, but don't appear at all in Firefox. The "bubbles" still appear correctly in Firefox, but not in IE.

also, illegal? wtf? bah, dun think nebody cares bout that in the US. it's mainly a site for me to, initially, work with languages/techniques that I may be lacking in, and, finally, organize future projects so that I can navigate them more easily. I guess the argument could be made that it's a sort of portfolio and that I should keep it open for prospective employers, but I would think that the people for which web design would matter would be using a major browser with JS on, so it wouldn't be a problem.

s'pose though that I could have a div on there somewhere saying you need javascript enabled to view the page that gets turned invisible initially by one of the JS files...

 

[crisp]

Hehe, not sure on the strange results you're getting with the dtds, then again, I never code pure js rendered pages myself, so it could be any number of things, I'd need to look more closely at your scripts and css to have an idea (no time tonight, but I don't mind giving it a look tomorrow if you've not managed to sort it).

It's true though, strange as it seems, inaccessible sites are illegal in some territories.

On the subject of prospective employers, they're usually interested in the bottom line. That means they're just as likely to want a site that's accessible to as many people as possible (more potential sales), as they are to want you to be able to add the bells and whistles. You should also remember that JS isn't SEO friendly, which is another consideration they'll make, so it's really in your interests to keep in mind best practices.
(I did take on board what you said about it being your own personal playground, just some friendly advice, and it never hurts to get into good habits with all the code you produce )

As for adding a div and using JS to hide it, there's no need. just put whatever you want to be seen by browsers with jscript disabled inside noscript tags, like so...

<noscript>Your browser doesn't support Javascript</noscript>

 

[Ixonal]

oh yeah, forgot about the existance of noscript tags. I'll have to slap that in there right quick, thanks.

http://forums.x10hosting.com/programming-help/www.cathymcgregor.com
that's a previous project, which is pretty accessible (tested and functional on FF and IE), so I've got a lil bit to show both ways once my JS site is up.

I'm really makin the Ixonal's Space site purely with JS as a sort of challenge to myself. best way to learn ^_^

just to give ya an idea of what IE is seeing, here's an example of what the debug window says is in the document.

<DIV id=bubble3 style="LEFT: 77px; VISIBILITY: visible; MAX-WIDTH: 100px; OVERFLOW: hidden; WIDTH: 104px; MAX-HEIGHT: 50px; POSITION: absolute; TOP: 75px; HEIGHT: 52px"><TABLE style="WIDTH: 100%; BORDER-COLLAPSE: collapse; HEIGHT: 100%" cellpadding="0" cellspacing="0">
<TR>
<TD><IMG src="http://ixonal.elementfx.com/img/top_left_02.gif" border=0></TD>
<TD style="BACKGROUND: url(img/top_bg_02.gif)"></TD>
<TD><IMG src="http://ixonal.elementfx.com/img/top_right_02.gif" border=0></TD></TR>
<TR>
<TD style="BACKGROUND: url(img/left_bg_02.gif)"></TD>
<TD style="BACKGROUND: #09caff; WIDTH: 100%; HEIGHT: 100%"></TD>
<TD style="BACKGROUND: url(img/right_bg_02.gif)"></TD></TR>
<TR>
<TD><IMG src="http://ixonal.elementfx.com/img/bottom_left_02.gif" border=0></TD>
<TD style="BACKGROUND: url(img/bottom_bg_02.gif)"></TD>
<TD><IMG src="http://ixonal.elementfx.com/img/bottom_right_02.gif" border=0></TD></TR></TABLE></DIV>

Edit:
bump

any idea?

 

[Ixonal]

I figured out the problem. Apparently IE requires a tbody tag in strict coding. the syntax goes like this

<table>
  <tbody>
    <tr>
      <td>

 

[mattura]

Probably a good idea to use the w3c validator, it can find all manner of (easy to fix) problems.

 

[Ixonal]

yeah, just a lil annoying since all of the code is written dynamically through javascript. I gotta get a DOM viewer and copy the offending code out that way
Edit:
ok, fixing that problem has started another problem. I have a 3x3 table to get some rounded edges. unfortunately it seems the table is putting 1px padding between all of the cells, which is screwing up the look. I've set cellpadding, cellspacing, and border set to 0 and border-collapse is set to collapse. I'm not sure what else to specify.

if ya want me to, I can move this to another, more appropriate thread.

 

[mattura]

do it in a style sheet, make sure you are setting the right bits

table {border-collapse:collapse;}
td {margin:0;padding:0;}