Layout disturbed when page load

HTML & CSS
1

hey folks,
i have just added jquery calender in my pages. but there is a problem. when the page loads. it doesn’t sit like it should. but when i click the calender button and when calender open. the page settles down like it should. what could be the reason? here is my code


<table>
<tr>
              <td>Installation Date</td>

              <td>
                <input type="text" name="txtInstallation" id="txtInstallation" class="txtfield" />
                <script language="javaScript" type="text/javascript">
				$(function(){
					$("#txtInstallation").datepicker({
					showOn: 'button',
					buttonImage: '../images/calendar.png',
					buttonImageOnly: true,
					monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
					changeMonth: false,
					changeYear: true,
					dateFormat:'M-dd-yy'

					})
				});


			</script>
                      <div id="txtInstallation"></div>
			</td>
            </tr>
</table>
2

The datepicker is sticking html at the end of the page which causes a gap in the page if that’s what you are talking about.

Try the following code which hopefully will not interfere with its working.


#ui-datepicker-div{top:-999em}
3

The code you posted doesn’t have a footer : )

You can still post more code and CSS,

Your input has an id:
<input type=“text” name=“txtInstallation” id=“txtInstallation”…
and the div has the same id:
<div id=“txtInstallation”></div>
And if your Javascript is looking for ElementById I can imagine it may get choose the wrong one.

Unless you told your coworkers that you are some JS SuperNinja, it’s not bad to be seen asking for help with work stuff. Relax a bit, or you’ll lose hair. : )

4

i tried both my table is of 100% and div too but not working, it happens only in IE and FF, chorme is fine

5

that is my corner stone for knowing layout

6

Emaar: you have Firefox with the Web Dev ToolBar?

If you have that, you can right click on a page, choose Web Developer and somewhere in there is the option “View Generated Source”. This will show you HTML that the browser “sees” on the page, but isn’t in source (meaning you can see HTML built by Javascript).

7

ah! thanks paul. ur a life saver! thanks a million, btw sorry to ask but what happened and why did it fixed it?

8

Does this happen in all browsers or just one particular browser?

If the table is a set width try using table{table-layout:fixed}.

Does the div that holds the calendar have a fixed height and width and if so can it be specified in the css in case the js is populating too slowly for it to be recognised on page load.

9

As I said the JS placed code at the end of the page which caused a gap in the page. Even though the element was already absolutely positioned the browser was still making room for it. I just moved it upwards and out of the way so it would not interfere with the footer.

10

The table is of 100% which is wrapped around a div class with width of 500px; and float:left, the table as i said is in 100%, i see some folks r not getting my question. what happen is when page loads, the footer doesn’t touch base (whereas it should) but when u open calender (click on) the layout fall into place (the footer sits at base)

11

stomme, example pls u know i m not ninja :P,
paul i send u email for the link. as its pvt

12

There are two elements with the id “txtInstallation”.

You might need to post table CSS and the generated HTML from the calendar (what does the page look like when the JS runs).

13

Did you try table{table-layout:fixed}?

If the calendar is a set width and height you would need pixels and not percent.

Otherwise I’d need to see the page to check.