Grids in tabs display problems

I'm using AW 2.5.2 with FF2 and IE6 and have noticed these two problems when using grids within tabs using the div method from the AW examples.

In FF2, the horizontal line below the tabs is offset by 25 to 30 px. In IE it appears correctly. This is with this code

<span id=myTabs></span>
<div id=myContent style="border-top: 1px solid black; height: 90%; padding: 10px">

In IE, the grid on the visible tab is not displayed until IE is minimised and restored. Switching tabs doesn't make the grid display. There's no problem displaying the grid with FF so I suspect a display problem between IE and AW.

I'm using the code from the example

var     tabs    = new AW.UI.Tabs
        var     names   = ["Devices", "Databases"]
        var     values  = ["div1", "div2"]

        tabs.setId("myTabs")
        tabs.setItemText(names)
        tabs.setItemValue(values)
        tabs.setItemCount(2)
        tabs.refresh()

The latter is the more pressing problem. Is there a solution/workaround for either?

I fixed the IE display problem I reported by changing the display definition of the first DIV from

<div id=div1 style="display:none">

to

<div id=div1 style="display:block">

I'm not sure I understand why this works since I include the same code included in the example page for controlling the current tab display (i.e. onSelectedItemsChanged function and call to setSelectedItems([0])).

No luck with the FF problem even though the AW tab example page displays correctly. I think it might be style related but I don't know which style would affect it.

This is getting curiouser and curiouser.

My version of IE is 6.0.2900.2180.xpsp.050622-1524CO. I got the tab to initially display as described above. But with a slightly different version of IE my fix doesn't work. It comes up blank and minimising and restoring displays it.

For the FF bug with tabs, I installed FireBug and found that the height of the tab gets set to 39 pixels. Or rather it changes from 19 to 39 pixels. I'm not sure what's causing this.

The definitions are -
<span id="myTabs-item-0" class="aw-item-template aw-templates-imagetext aw-list-item aw-items-normal" tabindex="-1" title="">
and ...-item-1 etc.

I tried setting a specific height but the value gets added to.

OK, I worked out the FF problem. FireBug shows a <p> gets added around the span. Its the paragraph that has a margin of 16 pixels. I'm not sure where this is coming from.

Anyway, I fixed it with -

p {margin-bottom: 0px}

This doesn't affect IE either.

For closure, I was reviewing one of my pages last night when I came across the root cause of the FF problem I reported above.

At the top of the page I had a title like this -

<p>Title<p>

As you can see, instead of closing the paragraph, I inadvertently started a new one. That second paragraph was the one that caused FF to push the tab content div down below the line of tabs.

Not sure why the paragraph didn't affect the span of tabs above it.