IE7 Space/gap Issue

[Frinavale]

I am so frustrated with IE7 right now.

I have a JavaScript class that dynamically generates the HTML for a client-side tab control based on the some JSON Objects that I created server side. The JavaScript generates a table with one row in it, where each <td> is a tab.

Right now the style for the table is as follows:

display:inline-table;
height:100%;
margin: 0px;
padding:0px;

I have a <div> that contains the content for the tabs. It is located right under the table and also has a margin style of 0px.

In every other browser this looks fine...but in IE7 there is a space between the table containing the tabs and the <div> containing the content and it's driving me crazy.

The worst part about this is that the space only occurs if I place the tabs-table and the tab-content-div inside a <div> to be able to display the group correctly (I want to put a margin around it so that the tabs and content aren't flush with the containing element). The space appears even if this wrapper div doesn't have any style attributes.

If I don't include the wrapper div there is no gap.

I think this has something to do with the way IE7 handles padding/margins in combination with the width style...but I just can't figure out how to get what I want in this horrible browser.

I don't expect anyone to be able to help me figure out how to get rid of the space (the html is too complicated to post) but I was hoping to find some sort of HTML/CSS debuging tool that I can use because the one that comes with IE8 is useless when it comes to dynamically generated HTML via JavaScript (I'm using the compatibility view to get "IE7") and I hate having to recompile my server code every time I want to test a style change.

Looking forward to hearing your suggestions,

-Frinny

[Frinavale]

I fixed my problem.

The dynamically generated table was placed into a <div> that was serving as a placeholder for the tabs. I changed the style of this <div> to be display:inline instead of the default "block". This forced me to change most of my CSS since you can't set the height and width of inline items. Also, apparently, when you set a div to have a display:inline the text-align style no longer applies to the contents within the div...which is annoying. All of my "general tab styling" had to be moved into the specific styles for the selected and unselected tab (including height and text-align).

IE is so annoying!

I'm still very interested to hear of a debugging tool that will let me debug CSS issues for dynamic elements.

-Frinny

[drhowarddrfine]

Didn't have time to read through all that. display:inline-block helpful?

Hardly ever use IEs debug thingy.

[Frinavale]

I fixed the bug but I'm still looking for a debugger for the future.

[drhowarddrfine]

IE won't be around much longer so it won't matter anyway.