Styling problems with TabContainer in IE - very wide size!

[TracySchloss]

I have a tabContainer within a ContentPane that has two tabs:

       <div id="listPane" data-dojo-type="dijit.layout.ContentPane"  region="center" splitter="false">                <div id="parcelTabContainer" data-dojo-type="dijit.layout.TabContainer" >               <div id="selectedParcelTab" data-dojo-type="dijit.layout.ContentPane"  title='Selected Parcel' > </div>           <div id="gridPane" data-dojo-type="dijit.layout.ContentPane" title='State Owned Parcels' style="selected:'true'" >            <div id ="stateOwnListTab" >State Owned Properties</div>              <table id="StateOwnParcelGrid" data-dojo-type="dojox.grid.DataGrid" >               <thead>                  <tr>                    <th field="NAME1" width="65%">Owner</th>                    <th field="SITEADDRESS" width="35%">Site Address</th>                  </tr>                </thead>              </table>         </div>        </div>       </div>

This looks OK in Firefox, but when I try in IE, the tabs, which really aren't too big from the pane I'm putting then in, aren't drawing the same way.  Each tab is the width of the pane and then some, causing the addition of scrollbars, where they shouldn't be needed.

When I examine the tabs in Firebug, I see something called nowrapTabStrip dijitTabContainerTop-tabs It has a width of 50400px!  Apparently Firefox is more friendly in it's rendering than IE, so even though I can see this big container highlighted and going off to the right some long amount, the tabs still look OK.  IE must not be that friendly and is setting the width as specified.

Doing some searching around, I see there is an issue somewhere back in the dojo forums that warns about setting your tabContainer to a style of 100% is problematic because it doesn't know "100% of what?".

I did have my tabContainer styled as 100%, but when I changed that width to 400px (which should fit nicely), the class nowrapTabStrip dijitTabContainerTop-tabs still thinks it needs to render as 50400px! 


Has anyone else had this happen?

[SteveCole]

IE is the exception to every rule in web development. 😄

Without seeing it, things you could try-

• Setting the width of your tabContainer to 98% (and adding 'margin: 0 auto' or 'margin-left:auto;margin-right:auto' to center it in your contentPane)


• In conjunction with a fixed with on your tabContainer, add a fixed width to your contentPane and see what happens

Steve

[TracySchloss · Accepted solution]

When I looked more closely at width that was getting set, it seemed like it was calculated by adding a couple of other widths together.    I ended up styling

.noWrapTabStrip { width:10px }

This seems to have taken care of my problem, even though it's a screwy solution.  I have no option for suggesting people use something other than IE, it's the state standard - I have no idea why!