Insert new div marquee in layout Options

[AllieZee]

Hey everyone,

I need help with the code for inserting a downward scrolling marquee to the left of my layout. Can someone also help me correct the alignment problems when viewing my layout in firefox? http://www.myspace.com/maezystore I appreciate the input!

About me:

CODE

<style type="text/css">


.a {hide top search}
div table div form {display:none !important}
.bodyContent table table div form {display:inline !important;}
div table div form {display:none !important}
.bodyContent table table div form {display:inline !important;}
.navigationBar {display:none;}

body {
background-color: f1f0d3;
background-position:top left;
background-attachment: repeat;
scrollbar-arrow-color: ffffff;
scrollbar-face-color: f1f0d3;
scrollbar-3dlight-color: f1f0d3;
scrollbar-darkshadow-color: f1f0d3;
scrollbar-shadow-color: ffffff;
scrollbar-highlight-color: ffffff;
scrollbar-track-color: ffffff;
}


b {
color: abb89a;
font-weight:bold;
}

I {
color: 686144;
letter-spacing: 1px;

}

u {
color: 705066;
}

s {
color: 595843;
}

.commentlinks {display:none;}
body div table td form img{display:none!important;}
td.text td.text table table table,
td.text td.text table br,
td.text td.text table .orangetext15,
td.text td.text .redlink,
td.text td.text span.btext
{display:none;}
td.text td.text table {background-color:transparent;}
td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}
td.text td.text table table td {padding:3;}
td.text td.text table table br {display:inline;}
td.text td.text table td {font-size:0pt;}
td.text td.text {height:0;}
td.text td.text table b, td.text td.text table table td {display:none}
table table,table table table table,table table{background-color:transparent;width:;border:0px;}
div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}
a.navbar,font,.whitetext12,.btext,.orangetext15,
.redtext,.blacktext10,
.lightbluetext8,strong,.nametext,div b font font,
div font font u,table table table table, table.contacttable{display:none;}
div table form tr td,td.text table,a.text, table div font a,table div div,{visibility:hidden;di-splay:none}
table td table tr td.text table {visibility:hidden;}
table td table tr td.text table table, table td table tr td.text table table td.text {visibility:visible;}
td.text table table {display:inline; visibility:visible;}
embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}
.friendSpace { display:none; }
.friendsComments { display:none; }
td td embed, td td object { position: absolute; top: -200px; left: -200px; }
td td td embed, td td td object { position: static; }
.comments{
visibility: hidden;
width: 0px;
height: 0px;
position:absolute;
top: 0px;
left: 0px;
overflow: auto;
background-color:transparent;
border:black 0px solid;
z-index: -2;}
body div table td form option{display:none;}
body div table td form select{display:none;}
body div table td form input{display:none;}



.home{
height: 27px;
width: 68px;
background-color: transparent;
background: url(http://cbimg6.com/layouts/07/09/13/21447ab.gif);
background-position: top left;
background-repeat: no-repeat;
display: block;}
.home:hover{
background-position: top right;}




.add{
height: 27px;
width: 68px;
background-color: transparent;
background: url(http://cbimg6.com/layouts/07/09/13/21447ac.gif);
background-position: top left;
background-repeat: no-repeat;
display: block;}
.add:hover{
background-position: top right;}



.message{
height: 27px;
width: 68px;
background-color: transparent;
background: url(http://cbimg6.com/layouts/07/09/13/21447ad.gif);
background-position: top left;
background-repeat: no-repeat;
display: block;}
.message:hover{
background-position: top right;}




.pictures{
height: 27px;
width: 68px;
background-color: transparent;
background: url(http://cbimg6.com/layouts/07/09/13/21447ae.gif);
background-position: top left;
background-repeat: no-repeat;
display: block;}
.pictures:hover{
background-position: top right;}




.block{
height: 27px;
width: 68px;
background-color: transparent;
background: url(http://cbimg6.com/layouts/07/09/13/21447af.gif);
background-position: top left;
background-repeat: no-repeat;
display: block;}
.block:hover{
background-position: top right;}






.blog{
height: 27px;
width: 68px;
background-color: transparent;
background: url(http://cbimg6.com/layouts/07/09/13/21447ag.gif);
background-position: top left;
background-repeat: no-repeat;
display: block;}
.blog:hover{
background-position: top right;}






.friends{
height: 27px;
width: 68px;
background-color: transparent;
background: url(http://cbimg6.com/layouts/07/09/13/21447ah.gif);
background-position: top left;
background-repeat: no-repeat;
display: block;}
.friends:hover{
background-position: top right;}


.aboutme1{
position: absolute;
width: 299px;
padding: 6px;
z-index: 3;
height: 336px;
text-transform: none;
letter-spacing: 0px;
line-height: 13px;
overflow: auto;
font-family: verdana;
font-size: 9px;
color: 89ab61;
top: 221px;
left: 435px;
}



.navigation{
position: absolute;
width: 68px;
z-index: 4;
height: 190px;
text-transform: none;
letter-spacing: 0px;
line-height: 11px;
overflow: none;
font-family: verdana;
font-size: 9px;
color: FFFFFF;
top: 220px;
left: 792px;
}




.basics{
position: absolute;
width: 194px;
padding: 4px;
z-index: 5;
height: 174px;
text-transform: none;
letter-spacing: 0px;
line-height: 13px;
overflow: auto;
font-family: verdana;
font-size: 9px;
color: FFFFFF;
top: 425px;
left: 741px;
}





.support{
position: absolute;
width: 299px;
padding: 6px;
z-index: 6;
height: 192px;
text-transform: none;
letter-spacing: 0px;
line-height: 13px;
overflow: auto;
font-family: verdana;
font-size: 9px;
color: FFFFFF;
top: 564px;
left: 435px;
}


.comment
{position:absolute;
width: 194px;
padding: 1px;
z-index: 7;
padding: 2px;
height: 150px;
overflow: hidden;
left: 741px;
top: 606px;
}

.name
{position:absolute;
width: 502px;
z-index: 8;
height: 70px;
color: 808080;
background-color: none;
letter-spacing: -1pt;
font-family: "verdana";
font-size: 50pt;
line-height: 50pt;
overflow: hidden;
left: 434px;
top: 145px;
text-align: center;
}




.titles {display: block;
visibility: visible;
color: 613b40;
background-color: none;
font-family: "verdana";
font-size: 15pt;
line-height: 18pt;
text-transform:lowercase;
text-align: left;
}





a:link, a:visited, a:active {
text-decoration : none;
color: 000000;
font-size : 10px;
line-height: 11px;
font-family: verdana; }
}
a:hover {
text-decoration: underline;
font-size : 10px;
line-height: 13px;
font-family: verdana;
color: 562e2c;}



</style>




<body>
<div class="image" style="position: absolute; left:300px; right:50px; top:114px; width:780px; height:664px; z-index:0; overflow: hidden;">


<img src="http://i14.photobucket.com/albums/a307/AllieZee/21447aanew.jpg"></a>

Like to meet:

CODE

<div class="navigation">


<a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" class="home"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRpZD0zNTk0OTU2NzU=" class="add"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kaWQ9MzU5NDk1Njc1" class="blog"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0zNTk0OTU2NzU=" class="pictures"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9Nb2R1bGVzL1ZpZXdGcmllbmRzL0ZyaWVuZHNWaWV3LmFz
Hg/ZnJpZW5kSUQ9MzU5NDk1Njc1" class="friends"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRpZD0zNTk0OTU2NzU=" class="message"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9jay5ibG9ja3VzZXImdXNlcmlkPTM1OTQ5NTY3NQ==" class="block"></a>

</div>










<div class="aboutme1">
<P CLASS=titles>About me</p>
<p align="justify"> Hi! I'm Allie; welcome to my online craft store, maezy. My mission is to create fun, usable accessories that make a statement about our capacity to do more with what we already have. 100% of my materials are recycled and all products are handmade. I also work with the organization Global Crafts to sell fair trade items made by artisans from developing countries. With the purchase of a Global Crafts product, you support communities first-hand by helping them to generate a self-sustaining income. I am also a henna artist available for appointments in the South Florida area. For more information, please see my henna blog. Have any questions? Message me! I’m very friendly and I love to meet new people!</p></div>


<div class="name">
maezy</div>



<div class="support">
<P CLASS=titles>support</p>
<p align="justify"> Maezy can be found on the following sites:
<br> </br>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWFlenktc3RvcmUubGl2ZWpvdXJuYWwuY29tLw==" target="_blank"><img src="http://i14.photobucket.com/albums/a307/AllieZee/logo.gif" border="0" alt="Photobucket"></a>
<br> </br>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWFlenkuZXRzeS5jb20="><img src="http://team.etsy.com/images/downloads/buttons/WOLF125.jpg" /></a> <br> </br>
</p></div>











<div class="basics">
<P CLASS=titles>Basics</p>
<b>Status</b>: In a Relationship<br>
<b>Hometown</b>: Lafayette, IN<br>
<b>Zodiac Sign</b>: Pisces<br>
<b>Education</b>: In College<br>
<b>Quote</b>: “The creation of a thousand forests is in one acorn.” — Ralph Waldo Emerson<br>



</div>







<div class="comment"><center>

<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="359495675" type="hidden">
<textarea name="f_comments" class="vfcbox" style="overflow:hidden;height:129px; width: 194px; font-family: verdana; font-size: 9px; line-height: 13px; text-transform: none; background-color: c87aaf; letter-spacing:0px; color: FFFFFF; border-style: solid; border-width: 0px">
Leave me a comment here...</textarea>
<input type="submit" value="Submit" class="vfclick" style="height: 10px; width:194px; background-color: c87aaf; color: FFFFFF; font-family: verdana; font-size:7px; border-color: FFFFFF; border-style: solid; border-width:0px"></form>
</div>

<div class="comments"><table><tr><td><table><tr><td>

[Relentless]

Marquees, this will help. Just look at the direction part.
http://www.funky-chickens.com/marqs2.html

As for the alignments in FF. The support part, it seems to be a little big. It's misaligned from the bottom and to the right.

I suggest having the support div, the same height as the green box. And shift it a few pixels to the left.

The about me, should also be shifted to the left with a couple pixels.

[AllieZee]

I've tried putting this code all over in my layout before and it either didn't show or completely warped everything else. Someone suggested creating a new div to do this but I'm not sure how to. Help please?

Also, my problem is that the layout looks perfect in IE--if I make those changes, it will affect both browsers. Any advice?

Thanks!

[Melie]

ok...the situation with IE and firefox is that firefox is off about i wanna say 5 px from IE. meaning, that it'll move about 5 px to the left compared to IE. as for your marquee, i dunno if you found the solution to this, you do have to create it's own div.

*make changes to the positioning, and it's width and height*
ABOUT ME

CODE

<style>
.marquee{
position: absolute;
width: 299px;
padding: 6px;
z-index: 3;
height: 336px;
letter-spacing: 0px;
line-height: 13px;
overflow: auto;
top: 221px;
left: 435px;
}
</style>

*here is where you put your images or text that you would like to move*
WHO I'D LIKE TO MEET

CODE

<div class="marquee">
<marquee direction="down">
<img src="THE LINK TO YOUR IMAGE">
</marquee>
</div>

now as for your positioning, you'll just have to play with the numbers for a little while to finally get it to where you want it to be. so far in IE it's perfect but in FF the comment box, the about me, and the journal section is a little bit off. so i would more them over like 3 px just to see how they turn up in FF. keep checking between the 2 browsers until you get it to where you want it to go.

i hope this helps!

[AllieZee]

Yes this was very helpful, thanks so much Melie! I'll try experimenting to find a happy medium between FF and IE. In the meantime, I hate to be a pain but no matter what I do to my marquee's height or line-height (I've even tried adding bottom option), it still ends the picture loop at mid-screen. How can I adjust this, and slow down the speed? You've been a ton of help! Much appreciated!

[Melie]

well i don't really know it off the top of my head but i do know a website that is THE place to go for css questions like that.

http://www.w3schools.com/css/default.asp

that website can really help you with css which is what you're trying to do. hope that helps!