Simple div-layout rendered different as coded in jspx

I´ve been trying to figure out for several days what is happening to my layout when it's rendered in a browser.

my environment:

• SpringSource Tool Suite Version: 2.6.0.RELEASE
• tiles
• jspx + CSS
• JavaScript InfoVis Toolkit

my problem:

I have to make a very simple section from a bigger project where I have a small form to make a selection, it triggers a server request and gets a json object to plot a spacetree from the infovis toolkit (javascript), which is plotted below the form, and then after selecting a node of the tree it should display a table with some info that I got via an Ajax request. All this complicated coding works like a charm, the problem comes at the time to displaying it. So I want to do something like this:

<div id="1>
   <form>
</div>
<div id="2">
   <div id="infovis"></div>
   <div id="log"></div>
</div>
<div id="2">
   <table id="someID"></table>
</div>

the css contain some formatting that in plain HTML works just fine

but when deployed and rendered i got something like:

<div id="1>
   <form>
</div>
<div id="2">
  <div id="infovis">
     <div id="log"></div>
     <div id="2">
        <table id="someID"></table>
     </div>
     <div id="footer"></div> //this is injected cause the tiles specification
  </div>     
&开发者_开发问答lt;/div>

This or any other variation.

Does anybody had any similar problem or knows what can be causing it? spring , tiles, the script, the jspx implementation?

I cannot mess to much with other code or configuration because we are in a really advanced stage and I don’t want to affect other areas.

note: I used to work more with c/c++ and real-time stuff so I'm not very fluently in CSS, jsp, etc. I just started to work in real web applications.

OK, it seems the problem was with the JSPX parsing (or even normal jsp)

somehow if the <div></div> does not have a "text" inside, it kind of takes out the </div> for all the <div> (and perhaps other tags) and since jspx need the closing </div> somehow it appends the missing ones at the end

so something like

<div id="1"></div>
<div id="2"></div>

goes to:

<div id="1">
    <div id="2">

and then what u get in the browser is:

<div id="1">
    <div id="2">
    </div>
</div>

To avoid this you need to put <jsp:text></jsp:text> after required <div> and is like you have text inside so you get what have been coded in the first place.

OK this is how I think it works, perhaps I’m completely wrong but somehow it is working for me,and will save us painful time when it start appearing in other parts of the system. do you know any other way to solve this? or the real reason why this happens?

The id property should have a unique value(preferably a combination of numbers and alphabets). Having unique value for id element should solve your problem.

You can't have empty HTML block elements in a .jspx file:

Instead of:

<div id="log"></div>

Try

<div id="log">&#160;</div>