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:
Expand|Select|Wrap|Line Numbers
- display:inline-table;
- height:100%;
- margin: 0px;
- padding: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