html rounded borders and IE

[Ixonal]

hokay, so
ixonal.elementfx.com
all them rounded boxes, they're divs containing 9x9 tables for the rounded edges. Works just fine in firefox, but IE is givin me a couple problems with it.

1. it appears there is 2px of space between every cell in the table, causing backgrounds to repeat when I don't want them to.

2. They resize very slowly

The main problem I want fixed right now is the spacing issue. I've tried several things including setting cellpadding and cellspacing to 0, setting border-collapse to collapse, even setting border-spacing to 0px 0px

[dickey]

check your div css
put

padding: 0;
margin:0;

in the div containing the 9x9 tables.
also you can try -1px as value for padding and margin.
if you can provide the link to your website or your css and / or html
or even just the part that troubles you, I might be able to help.

[Ixonal]

Site
Javascript file

I'm pretty sure the padding on the div isn't the problem, as the 2px in question is between each table cell, not around the edges

[leafypiggy]

ok...ummm

question..

why in gods name would you EVER code a site in javascript????

its great that you know it... but it really was a waste of effort do do that...

i mean, the cool effect on page load with the tables. sure.. but the rest of the site should be done in HTML/css.

it just makes more sense.

plus, unless someone is a JS genuis, they won't be able to help you..

Just my two cents.

and btw. Dickey,

you can't use negative values in padding statements

[natsuki]

he needed to code the bubble part in javascript else it won't work because of the timer thing.
that IE is really annoying that's why I don't use it! It doesn't conform well to w3c standards and there's lotsa bugs..

have you tried using divs all throughout instead of tables? I really dun have any idea what is wrong with IE... i'll check it out in ie too

[Ixonal]

leafypiggy, no negative comments, please

as for using IE, I usually don't, but many people do. I like to know how to make my sites compatible.

I've seen other methods of making rounded edges, but my problem is that I need the 9 cells. the graphics for the bubble make it so they have a border of a color different from the foreground and background

one thing I'm sure of is that this is not a javascript issue, this is a html/css issue

[leafypiggy]

i did say that he needed it for that. but the whole site? thats just stupid.

i mean, the cool effect on page load with the tables. sure

[xmakina]

leafpiggy - save it for the "Review My Site" section :P

[driveflexfuel]

I did not feel like reading through all your coding so try the following. One of my first sites was designed similar to the way yours is. I ran in to the same errors in IE.

There are a couple things to try

1. Make sure image border= 0

2. Make the cols and rows 2px larger then the image and use valign and align to the corner. IE sometimes needs more room for images.

3. Place   in the blank fields. It sounds pointless but sometimes fixes small errors in tables in IE without harming the visuals in other browsers.

I hope one of these helps you out

[Ixonal]

images already had border set to 0, making the cells containing images 2px larger would have the same negative effects on the top, left, right, and bottom middle cells, since those use a background image and I don't want it to repeat. as for the non-blank space, it just made things worse in IE