I am new to XOOPS and designed a new homepage for http://www.marketagenda.com with html and CSS. I am trying to implement it in XOOPS. I don't want to change the main styles.css, because the rest of the site needs to stay the same. I am only changing the homepage, so I created a new CSS file named index.css and put it in the same directory as styles.css

I inserted the html into the module, and when I preview it, some of the text is not where it is supposed to be. Can anyone tell me what the problem might be? I would really appreciate your help.

here is the html & CSS code for reference:













 





Here is the CSS code:

#container {
text-align: center;
height: 600px;
width: 800px;
background-image: url(Images/index_background.jpg);
padding: auto;
background-repeat: no-repeat;
margin: auto;
}
#login {
width: 257px;
float: left;
height: 160px;
padding-top: 400px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 25px;
font-family: Arial;
font-size: 11px;
color: #FFFFFF;
text-align: left;
}
#center {
float: left;
width: 280px;
height: 556px;
text-align: left;
padding-left: 30px;
font-family: Arial;
font-size: 11px;
padding-top: 7px;
}
#bullettext {
padding-left: 15px;
font-family: Arial;
font-size: 11px;
line-height: normal;
}
#rightcolumn {
float: left;
height: 140px;
padding-top: 405px;
font-family: Arial;
font-size: 11px;
text-align: left;
padding-left: 8px;
}
#calendartext {
float: left;
padding-top: 500px;
font-family: Arial;
font-size: 10px;
clear: right;
}

#calendartext a:link {
color: #3366cc;
text-decoration: underline;
}

#calendartext a:hover {
color: #009900;
text-decoration: underline;
}
#footer {
height: 20px;
float: left;
width: 488px;
font-family: Arial;
font-size: 11px;
text-align: left;
padding-left: 312px;
padding-top: 5px;
clear: both;
}