Cannot place the popoup in the right place

HTML & CSS
1

Hi,

I am trying to use this calendar popup on my a page.

The popup window should appear in using the DIV tag named “caldiv”.

When I set the position of the DIV tag to “absolute” the popup appears outside the frame in lower right section. Using top and left properties won’t solve the problem.

http://www.afghanian.com/en/index1.php

If I use “fixed” for the position below result is produced. Again top and left properties won’t help.

http://www.afghanian.com/en/index2.php

Would someone please help me with this? BTW I am using the code from “mattkruse” website.

Thank you.

2

Hi,

You need to move the caldiv out of its current context because the js is taking the position from the container wrapper I believe.

It needs to be here to work:


                </div></td>
        </tr>
    </table>
 [B]   <div id="caldiv" style="position:absolute;visibility:hidden;background-color:white;layer-background-color:white;"></div>[/B]
</div>
<!-- container -->
</body>
</html>

Your code is in desperate need of some loving care :slight_smile: Although you are using a strict doctype you haven’t been careful with quotes, characters or case.

Paragraphs should be in paragraphs not breaks.

e.g.


<br />
            Using experienced, tried and tested, in-house and freelance translators, we are able to offer our clients prime translation services, embracing Dari and Pashtoo languages of Afghanistan and also Urdu in all subject areas. Our culturally sensitive typesetters work with our in-house experts and linguists, providing you with quality services and a fast turnaround.<br />
            <br />

That should just be inside a <p></p> element and not created with breaks.

Start by validating and correcting the broken code first and then move onto using a more semantic structure with logical headings and paragraphs. :wink:

3

I appreciate your help very much. I agree with you. The code needs cleanup.

By the way, is there a tool which can help me validate my code (with the doctype I use)?

Regards,
Mac

4

Thanks a lot.

5

You can use the html validator here.

and the CSS validator here:

http://jigsaw.w3.org/css-validator/

The error messages are a bit hard to decipher at first but you soon get used to them.:slight_smile: