Opened 12 years ago
Closed 12 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 )
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)
Change History (13)
Changed 12 years ago by
comment:1 Changed 12 years ago by
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 12 years ago by
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 12 years ago by
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 12 years ago by
(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 follow-up: 8 Changed 12 years ago by
comment:6 Changed 12 years ago by
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 12 years ago by
Component: | Dijit → Dijit - LnF |
---|
Changed 12 years ago by
comment:8 Changed 12 years ago by
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>
comment:9 Changed 12 years ago by
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.
file 1