IE using innerHTML with nested divs

[withers]

The following code formats a NavBar correctly:

1 <div class="pButton"><b>All information</b></div>
2 <div id="NbNo87">
3 <div class="pButton1" style="padding-left:.4em"> - Map</div>
4 <div class="pButton1" style="padding-left:.4em"> - General
information</div>
5</div>
6<div class="pButton"><b>Customer Services</b></div>
7<div id="NbNo88">
8 <div class="pButton1" style="padding-left:.4em"> - Wheels</div>
9 <div id="NbNo89">
10 <div class="pButton2" style="padding-left:.8em"> - Offer a lift</
div>
11 <div class="pButton2" style="padding-left:.8em"> - Book a lift</
div>
12 </div>
13 <div class="pButton1" style="padding-left:.4em"> - Registration
update</div>
14 <div id="NbNo312"></div>
15 <div class="pButton1" style="padding-left:.4em"> - Agent add</div>
16 <div id="NbNo319"></div>
17</div>
18<div class="pButton"><b>Traders</b></div>

The id=NbNoX are used by Javascript to insert buttons into the menu
with innerHTML. This formats correctly in ?Firefox. But in IE6 and 7
line 16 displays with a height of about 1em as if it had text in it,
whereas lines 9 and 14 display correctly with a height of 0.

Is this problem with IE or with me? Could anyone suggest a
workaround?

Thanking you in anticipation.

 

[dhtmlkitchen]

The following code formats a NavBar correctly:

The id=NbNoX are used by Javascript to insert buttons into the menu
with innerHTML.

Plain straight HTML in the page would be easier to debug than
innerHTML.

You could also try using the IE Script Editor to tweak the style
properties.

This formats correctly in ?Firefox. But in IE6 and 7

line 16 displays with a height of about 1em as if it had text in it,
whereas lines 9 and 14 display correctly with a height of 0.

Is this problem with IE or with me? Could anyone suggest a
workaround?

I'm guessing you have might have to set line-height: 0 on this.