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.

[Randy Webb]

withers said the following on 10/5/2007 5:39 PM:

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.

First suggestion would be to post a URL to a sample page that displays
the problem. Second suggestion would be not to post line numbers as that
makes it more trouble than it is worth to copy/paste into a new file.
Make sure your posted code includes any/all JS that is associated with
it as well as the CSS code that is associated with it.
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[dhtmlkitchen]

On Oct 5, 2:39 pm, withers <[e-mail]:

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.

Thanking you in anticipation.