diff --git a/toolkit/content/widgets/tabbrowser.xml b/toolkit/content/widgets/tabbrowser.xml
index 2e175040c1a..2d5fefcf89c 100644
--- a/toolkit/content/widgets/tabbrowser.xml
+++ b/toolkit/content/widgets/tabbrowser.xml
@@ -59,8 +59,8 @@
       <xul:stringbundle src="chrome://global/locale/tabbrowser.properties"/>
       <xul:tabbox flex="1" eventnode="document" xbl:inherits="handleCtrlPageUpDown"
                   onselect="if (!('updateCurrentBrowser' in this.parentNode) || event.target.localName != 'tabpanels') return; this.parentNode.updateCurrentBrowser();">
-        <xul:hbox id="tab-drop-indicator-bar">
-          <xul:hbox id="tab-drop-indicator"/>
+        <xul:hbox class="tab-drop-indicator-bar">
+          <xul:hbox class="tab-drop-indicator"/>
         </xul:hbox>          
         <xul:hbox class="tabbrowser-strip" collapsed="true" tooltip="_child" context="_child"
                   ondraggesture="nsDragAndDrop.startDrag(event, this.parentNode.parentNode); event.stopPropagation();"
@@ -133,6 +133,9 @@
       <field name="mTabBox">
         document.getAnonymousNodes(this)[1]
       </field>
+      <field name="mTabDropIndicatorBar">
+        this.mTabBox.childNodes[0]
+      </field>
       <field name="mStrip">
         this.mTabBox.childNodes[1]
       </field>
@@ -1470,8 +1473,8 @@
             if (aDragSession.canDrop && aDragSession.sourceNode.parentNode == this.mTabContainer) {
               var newIndex = this.getNewIndex(aEvent);
 
-              var ib = document.getElementById('tab-drop-indicator-bar');
-              var ind = document.getElementById('tab-drop-indicator');
+              var ib = this.mTabDropIndicatorBar;
+              var ind = ib.firstChild;
               ib.setAttribute('dragging','true');
               
               if (window.getComputedStyle(this.parentNode, null).direction == "ltr") {
@@ -1538,8 +1541,7 @@
         <parameter name="aDragSession"/>
         <body>
           <![CDATA[
-            var ib = document.getElementById('tab-drop-indicator-bar');
-            ib.setAttribute('dragging','false');
+            this.mTabDropIndicatorBar.setAttribute('dragging','false');
           ]]>
         </body>
       </method>
diff --git a/toolkit/themes/pinstripe/global/browser.css b/toolkit/themes/pinstripe/global/browser.css
index 2bdbff7e1bd..37ec2b8636f 100644
--- a/toolkit/themes/pinstripe/global/browser.css
+++ b/toolkit/themes/pinstripe/global/browser.css
@@ -163,14 +163,14 @@ tabbrowser > tabbox > tabpanels {
 	-moz-appearance: none !important;
 }
 
-#tab-drop-indicator-bar {
+.tab-drop-indicator-bar {
     display:none;
     height: 9px;
     margin-top: -9px;
     position: relative;
 }
 
-#tab-drop-indicator {
+.tab-drop-indicator {
     height: 9px;
     width: 9px;
     margin-bottom: -5px;
@@ -178,7 +178,7 @@ tabbrowser > tabbox > tabpanels {
     background: url('chrome://global/skin/tabDragDrop/tabDragIndicator.png') 50% 50% no-repeat;
 }
 
-#tab-drop-indicator-bar[dragging="true"] {
+.tab-drop-indicator-bar[dragging="true"] {
     display: -moz-box;
 }
 
diff --git a/toolkit/themes/winstripe/global/browser.css b/toolkit/themes/winstripe/global/browser.css
index 9fbb243bacb..643dac7fbc6 100644
--- a/toolkit/themes/winstripe/global/browser.css
+++ b/toolkit/themes/winstripe/global/browser.css
@@ -46,14 +46,14 @@ tab {
   margin-bottom: 1px;
 }
 
-#tab-drop-indicator-bar {
+.tab-drop-indicator-bar {
     display:none;
     height: 9px;
     margin-top: -9px;
     position: relative;
 }
 
-#tab-drop-indicator {
+.tab-drop-indicator {
     height: 9px;
     width: 9px;
     margin-bottom: -5px;
@@ -61,7 +61,7 @@ tab {
     background: url('chrome://global/skin/tabDragDrop/tabDragIndicator.png') 50% 50% no-repeat;
 }
 
-#tab-drop-indicator-bar[dragging="true"] {
+.tab-drop-indicator-bar[dragging="true"] {
     display: -moz-box;
 }
 
