CSS Problem & animation following mouse

[iceangel89]

Hi,
I have a problem with my web site it displays horribly in Mozilla 2 and with some border problem in IE7. see my attached images. i used floated <div>s for my layout. in mozilla the content div is totally out of place
also how do i make a javascript animation following mouse, dunno how to describe it but its like those on blogs etc.
How can i make a drop down navigation. if anyone knows how to do a calander can u also tell me?

[tanya]

Try to put the DIV that's floated to the right above your text. See if that helps.

For a drop down navigation and other JS scripts, check out this website:

http://www.dynamicdrive.com/

[iceangel89]

Its already above the content (text) Mozilla Problem
Here is the code
<div id = "CenterContent">
<div id = "SubNavigation"><!-- TemplateBeginEditable name="My Profile" -->
<h2>My Profile</h2>
content ......

<!-- TemplateEndEditable --></div>
<div id = "Content"><!-- TemplateBeginEditable name="Main Content" -->
<h1>Welcome to my Personal Site </h1>
<div id="lipsum">
...
</div>
<p>&nbsp;</p>
<!-- TemplateEndEditable --></div>
</div>

Edit: But shouldn't the problem be in the bottom bar? The IE problem the CSS below
#MasterContainer #BottomBar {
clear: both;
float: left;
background-color: #666666;
padding-top: 2px;
padding-right: 20px;
padding-bottom: 2px;
padding-left: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
color: #FF6633;
font-weight: bold;
width: 820px;
}

[tanya]

I'm not seeing #BottomBar in your code (as a div tag).

Where's the CSS code for DIV id SubNavigation?

If #MasterContainer #BottomBar CSS code is for your DIV id Content, you might try removing the first line:

clear: both;

[iceangel89]

Hi, Thanks it worked in IE but in Mozilla another problem see attached. Anyway why should my Bottom Bar not have clear? i thought with Clear then it will "clear" itself form other elements(sorry, dunno how to explain)

Edit: [Problem 2.jpg] I have come up with a new design. attached. but again the CSS has some problems. The cell in the middle is not the correct color(near Black) its still white. it looks correct in Dreamweaver 8. i have put a background color of #312225 in both the cell color in the properties window and background color of the table in my CSS style sheet. neither seem to work.

Edit: I fixed this problem of the cell color. somehow the background color works now.

Also i know how to add javascript to body section like onLoad, but how do i add it to sections of the document like indicated in my attached pic. in a <p> or ,<div> tags i want the time to change every sec. (using setInterval or other methods)

I tried:
function dateTime() {
document.write("Today is " + day + "/" + month + "/" + year + "\n");
document.write("The Time is " + hours + ":" + minutes);
}
dateTime();
But this dosen't update, so i tried
var timer = setInterval("dateTime()",1000);
but the whole document changed to the Dates & times & still dosen't update. (My content disappeared)