Question

i am having some problem with position: absolute div. IE7 displays it next to the input but in normal browsers it is displayed under it. how can i fix it?
I am using some third party javascript which i can not modify so I cant insert anything between input and div.

<div style="position: relative" id="header">qwe</div>
  <div style="position: relative">
    <table style="background: red; position: relative">     
      <tr>
         <td>      
            <input type="text" style="width:200px; " value="a date here" />        
            <div style="position:absolute; width: 300px; height: 300px; background: #eeeeee;"> 
              [a calendar here]       
            </div>        
         </td>  
      </tr>
      <tr>
        <td> 
         [text/inputs/buttons behind the calendar]
        </td>
      </tr>
    </table>
  </div>

its just an example I made for this problem. i do have position: relative set on few elements in my code, fails with ie7 anyway. “under it” means its supposed to be calendar showing under that input after clicking it to let user pick some date easily.

edit: reworked example

edit: [problem solver – link removed] – click on the right “zapytanie i rezerwacja” and then “folwark zamkowy”. you can find those calendar inputs in that form. <a> block containing calendar is added right after input from javascript.

Answer 1

Update: I still don’t follow your code. I’ve no idea why you’re doing is the way you are (why use a Table?), but you need to have top: and/or left: (or right or bottom) after your absolute:position.

For example: style="position:absolute; top:5px; left: 5px;"

Also, get rid of float:left. I’ve no idea what that’s doing in there(!).

---

Update update: If you just want the text to appear behind the calendar, then you need to absolutely position your table.