Opened 10 years ago

Closed 10 years ago

#9509 closed defect (fixed)

TabContainer: gap in vertical border b/w labels and content (tundra, IE)

Reported by: VSergeyV Owned by: bill
Priority: high Milestone: 1.4
Component: Dijit - LnF Version: 1.3.1
Keywords: TabContainer, IE, Transitional, problems display Cc:
Blocked By: Blocking:

Description (last modified by bill)

TabContainer? has problems display in IE.

Example 1 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TabContainer Demo</title>
    <style type="text/css">
        @import "include/dojo-release-1.3.1/dijit/themes/tundra/tundra.css";
        @import "include/dojo-release-1.3.1/dojo/resources/dojo.css";
    </style>
    <script type="text/javascript" src="include/dojo-release-1.3.1/dojo/dojo.js"
        djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
           dojo.require("dijit.layout.ContentPane");
           dojo.require("dijit.layout.TabContainer");
           dojo.require("dijit.form.Button");
     </script>
</head>
<body class="tundra">
   <div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
        style="width:500px;height:100px">
      <div id="LittleRed" dojoType="dijit.layout.ContentPane" title="Little Red Cap">
      Once upon a time there was a dear little girl who was loved by
      every one who looked at her, but most of all by her grandmother,
      and there was nothing that she would not have given to the child.
      </div>
      <div id="GreenTwigs" dojoType="dijit.layout.ContentPane"
             title="The Three Green Twigs">
      There was once upon a time a hermit who lived in a forest at the foot
      of a mountain, and passed his time in prayer and good works,
      and every evening he carried, to the glory of God, two pails of water
      up the mountain.
      </div>
   </div>
</body></html>

See attach file 1

Example 2 change <!DOCTYPE HTML 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TabContainer Demo</title>
   <style type="text/css">
        @import "include/dojo-release-1.3.1/dijit/themes/tundra/tundra.css";
        @import "include/dojo-release-1.3.1/dojo/resources/dojo.css";
    </style>
    <script type="text/javascript" src="include/dojo-release-1.3.1/dojo/dojo.js"
        djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
           dojo.require("dijit.layout.ContentPane");
           dojo.require("dijit.layout.TabContainer");
           dojo.require("dijit.form.Button");
     </script>
</head>
<body class="tundra">
   <div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
        style="width:500px;height:100px">
      <div id="LittleRed" dojoType="dijit.layout.ContentPane" title="Little Red Cap">
      Once upon a time there was a dear little girl who was loved by
      every one who looked at her, but most of all by her grandmother,
      and there was nothing that she would not have given to the child.
      </div>
      <div id="GreenTwigs" dojoType="dijit.layout.ContentPane"
             title="The Three Green Twigs">
      There was once upon a time a hermit who lived in a forest at the foot
      of a mountain, and passed his time in prayer and good works,
      and every evening he carried, to the glory of God, two pails of water
      up the mountain.
      </div>
</div>
</body></html>

See attach file 2

Old version 1.0.0 not have this problem

Example 3 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TabContainer Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
           dojo.require("dijit.layout.ContentPane");
           dojo.require("dijit.layout.TabContainer");
           dojo.require("dijit.form.Button");
     </script>
</head>
<body class="tundra">
   <div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
        style="width:500px;height:100px">
      <div id="LittleRed" dojoType="dijit.layout.ContentPane" title="Little Red Cap">
      Once upon a time there was a dear little girl who was loved by
      every one who looked at her, but most of all by her grandmother,
      and there was nothing that she would not have given to the child.
      </div>
      <div id="GreenTwigs" dojoType="dijit.layout.ContentPane"
             title="The Three Green Twigs">
      There was once upon a time a hermit who lived in a forest at the foot
      of a mountain, and passed his time in prayer and good works,
      and every evening he carried, to the glory of God, two pails of water
      up the mountain.
      </div>
   </div>
</body></html>

Attachments (4)

file1.jpg​ (78.6 KB) - added by VSergeyV 10 years ago.
file 1
file2.jpg​ (115.7 KB) - added by VSergeyV 10 years ago.
file 2
indentedTabs.png​ (6.9 KB) - added by bill 10 years ago.
tabs start a little to the right
file3.jpg​ (41.1 KB) - added by VSergeyV 10 years ago.

Download all attachments as: .zip

Change History (13)

Changed 10 years ago by VSergeyV

Attachment: file1.jpg​ added

file 1

Changed 10 years ago by VSergeyV

Attachment: file2.jpg​ added

file 2

comment:1 Changed 10 years ago by bill

Milestone: tbd → 1.4
Owner: set to bill
Status: new → assigned
Summary: TabContainer: problem display in IE 7 → TabContainer: gap in vertical border b/w labels and content (tundra, IE7)

I've seen this problem reported before but I can't find the ticket now. I don't remember what we/I decided to do. The problem reproduces in test_TabContainer.html on the second and third examples.

I think it's from the spacer (dijitTabContainerTop-spacer), which on IE just has a top border and no side border (since it has no height).

I'll see if I can fix it easily.

BTW please try to be specific when filing a ticket; it helps when searching. "has problems display" could mean many things.

comment:2 Changed 10 years ago by bill

Setting display:none on the dijitTabContainerTop-spacer solves half of the problem (the gap on the right).

As for the gap on the left it's caused because:

  • each tab label (.dijitTab) has a black left border but white bottom border... depending on the browser, the bottom left pixel could be either black or white.
  • On IE it's a white pixel, and the gap in the TabContainer's border is that white pixel covering up the black border behind it.

Could solve it by shifting all the tabs a few pixels to the right, like nihilo and soria does...

comment:3 Changed 10 years ago by bill

PS: typo... not "each tab label (.dijitTab)", but rather the *selected* tab label (.dijitTabChecked)" IE, the white one not that gray ones.

comment:4 Changed 10 years ago by bill

(In [18759]) Remove strange CSS for spacer... tundra just doesn't have a spacer in TabContainer?, so at the most all we need is display: none. Gets rid of the gap on the right hand side (in the vertical border).

Refs #9509.

comment:5 Changed 10 years ago by bill

If you add this CSS to your page it will offset tab labels a bit and avoid the missing pixel problem: 

.tundra .dijitTabContainerTop-tabs,
.tundra .dijitTabContainerBottom-tabs {
	padding-left: 3px;
}

Not sure I like the way it looks though, what do you think?

tabs start a little to the right

Changed 10 years ago by bill

Attachment: indentedTabs.png​ added

tabs start a little to the right

comment:6 Changed 10 years ago by bill

Description: modified (diff)
Summary: TabContainer: gap in vertical border b/w labels and content (tundra, IE7) → TabContainer: gap in vertical border b/w labels and content (tundra, IE)

This occurs on all versions of IE.

comment:7 Changed 10 years ago by bill

Component: Dijit → Dijit - LnF

Changed 10 years ago by VSergeyV

Attachment: file3.jpg​ added

comment:8 in reply to:  5 Changed 10 years ago by VSergeyV

Replying to bill:

Not sure I like the way it looks though, what do you think?

It is an admissible variant. I have loaded new version Dojo 1.3.2 and I have the same problem

Example 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TabContainer Demo</title>
    <style type="text/css">
            @import "include/dojo-release-1.3.2/dijit/themes/tundra/tundra.css";
            @import "include/dojo-release-1.3.2/dojo/resources/dojo.css";        
        </style>
   <script type="text/javascript" src="include/dojo-release-1.3.2/dojo/dojo.js"
            djConfig="parseOnLoad: true"></script>    
    <script type="text/javascript">
       dojo.require("dojo.parser");
           dojo.require("dijit.layout.ContentPane");
           dojo.require("dijit.layout.TabContainer");
           dojo.require("dijit.form.Button");
     </script>
</head>
<body class="tundra">
   <div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
        style="width:500px;height:100px">
      <div id="LittleRed" dojoType="dijit.layout.ContentPane" title="Little Red Cap">
      Once upon a time there was a dear little girl who was loved by
      every one who looked at her, but most of all by her grandmother,
      and there was nothing that she would not have given to the child.
      </div>
      <div id="GreenTwigs" dojoType="dijit.layout.ContentPane"
             title="The Three Green Twigs">
      There was once upon a time a hermit who lived in a forest at the foot
      of a mountain, and passed his time in prayer and good works,
      and every evening he carried, to the glory of God, two pails of water
      up the mountain.
      </div>
   </div>
</body></html>

Please see http://bugs.dojotoolkit.org/attachment/ticket/9509/file3.jpg

comment:9 Changed 10 years ago by bill

Resolution: → fixed
Status: assigned → closed

(In [19279]) Avoid gap in vertical border between TabContainer? labels and content (in tundra on IE) by indenting tab labels. Note that tab labels were already indented for soria and nihilo, and for tundra w/a tabstrip.

Fixes #9509.

Note: See TracTickets for help on using tickets.