It's an artist page on the Soundclick.com website, but we're given options to insert out own CSS
coding if we know how to design and code pages. The HTML is all Soundclick's, I'm given an
option to insert some HTML coding in one of the info boxes on our bio details, but it's basically
just for adding our <div> tags for any links we'll use to our twitter or youtube and stuff like that.
I copied someone's CSS coding and replaced things with my own. Everything seems fine but one
single thing with my hover links. It's so annoying that I can't get it to display properly on
Chrome, IE or MS Edge.
Tested it on Firefox after I finished editing the code and everything is perfect, tested it
on Chrome and it's not aligned correctly. My Twitter and Email hover links are displayed too high
and left. Same thing for IE or MS Edge.
Here is the HTML I inserted into my bio's "About me" section (it's how we get to add our divs and links):
<div class="paypal"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="ASW6ULGTHLM8Y">
<table>
<tr><td><input type="hidden" name="on0" value="Purchase your beat(s)">NOTE: ACCOUNT NAME SAYS <br>"JUAN REYES PHOTO". DONT WORRY <br> THAT IS STILL MY PAYPAL.</td></tr><tr><td><select name="os0">
<option value="Basic Lease">Basic Lease $10.00 USD</option>
<option value="3x Basic Leases">3x Basic Leases $25.00 USD</option>
<option value="Full Lease">Full Lease $20.00 USD</option>
<option value="3x Full Leases">3x Full Leases $35.00 USD</option>
<option value="Premium Lease">Premium Lease $50.00 USD</option>
<option value="2x Premium Lease">2x Premium Lease $75.00 USD</option>
<option value="Exclusive Rights">Exclusive Rights $75.00 USD</option>
<option value="2x Exclusive Rights">2x Exclusive Rights $120.00 USD</option>
<option value="Exclusive Rights">Exclusive Rights $100.00 USD</option>
<option value="2x Exclusive Rights">2x Exclusive Rights $150.00 USD</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="http://i66.tinypic.com/a2lmo.jpg" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
<div class="mfs">
<object type="application/x-shockwave-flash" height="385" width="610" data="https://www.myflashstore.net/widgets/fl ... r_id=90110" allowScriptAccess="never" allowNetworking="internal"><param name="allowScriptAccess" value="never" /><param name="allowNetworking" value="internal" /><param name="movie" value="https://www.myflashstore.net/widgets/fl ... r_id=90110" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><param name="flashvars" value="'"></object></div>
<div class="mailing">
<form action="http://www.soundclick.com/bands/content ... ID=1390955" method="post">
<input type="text" name="email" value="email" size="70" INVALID "this.value=''"></div>
<div class="button">
<input type="submit" name="action" value="subscribe">
</form></div>
<div class="spacebox"></div>
<div class="tw"><a href="https://twitter.com/TheJetzons101"><img src="https://i.imgur.com/tyrNFnz.png"></a></div>
<div class="email"><a href="mailto:sales@thejetzons.com"><img src="https://i.imgur.com/hC0MPLx.png"></a></div>
<div class="twtl">
<a class="twitter-timeline" href="https://twitter.com/thejetzons101" data-widget-id="690476266248507397">Tweets by @thejetzons101</a>
</div>
Here's the CSS:
/********* QualityCreations & Design http://www.SOUNDCLICKLAYOUTS.com ***********/
/* tag cloud */
.tagCloud {padding:10px;}
.tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;}
.tagCloud .cloudItem:hover {background:#005782; color:white; cursor:pointer;}
.tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;}
.tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;}
.tagCloud .cloudS30 {font-size:11px; color:#999999;}
.tagCloud .cloudS40 {font-size:12px; color:#999999;}
.tagCloud .cloudS50 {font-size:14px; color:#666666;}
.tagCloud .cloudS60 {font-size:16px; color:#666666;}
.tagCloud .cloudS70 {font-size:18px; color:#333333;}
.tagCloud .cloudS80 {font-size:22px; color:#333333;}
.tagCloud .cloudS90 {font-size:28px; color:#111111; }
.tagCloud .cloudS100 {font-size:36px; color:#111111;}
.tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;}
.tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;}
.tagCloudMore a:hover {color:red; text-decoration:underline; cursor:pointer;}
/* tag cloud */
.tagCloud {padding:10px;}
.tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;}
.tagCloud .cloudItem:hover {background:#005782; color:white; cursor:pointer;}
.tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;}
.tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;}
.tagCloud .cloudS30 {font-size:11px; color:#999999;}
.tagCloud .cloudS40 {font-size:12px; color:#999999;}
.tagCloud .cloudS50 {font-size:14px; color:#666666;}
.tagCloud .cloudS60 {font-size:16px; color:#666666;}
.tagCloud .cloudS70 {font-size:18px; color:#333333;}
.tagCloud .cloudS80 {font-size:22px; color:#333333;}
.tagCloud .cloudS90 {font-size:28px; color:#111111; }
.tagCloud .cloudS100 {font-size:36px; color:#111111;}
.tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;}
.tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;}
.tagCloudMore a:hover {color:red; text-decoration:underline; cursor:pointer;}
.statsNumbers {
color:#000;
opacity: 0.6;
margin-left:632px;
position:absolute;
text-align:center;
top:1500px;}
.mailing{
width: 190px;
height: 50px;
margin-left:180px;
top:2330px;
Z-index: 9;
position:absolute;
text-align:center;
}
.button{
width: 190px;
height: 50px;
margin-left:347px;
top:2316px;
Z-index: 9;
position:absolute;
text-align:center;
}
.embeddedPlayer {
margin-left:-319px;
top:999px;
Z-index: 9;
position:absolute;
text-align:center;
left: 50%;
}
.paypal {
z-index: 9;
position: absolute;
color: red;
text-align:center;
top:973px;
margin-left:-150px;
opacity: 1;
-webkit-transition: .5s all ease-in-out;
-moz-transition: .5s all ease-in-out;
-o-transition: .5s all ease-in-out;transition: .5s all ease-in-out;
}
.paypal:hover {
opacity: 1.0;
}
/* Widget styles - MAIN style */
#wcon{ width: 650px; height: 438px; position: relative; margin-top: 20px; text-align:left; }
#widget{ position:absolute;z-index:0; width: 650px; height: 438px; }
#checkout{ position:absolute;top:366px;margin-left:481px; 0 0 530px;z-index:1000; }
/* Widget styles - NON-PRO style*/
#buy-now{ position:absolute;top:750px;margin-left:-148px; margin:17px 0 0 345px;z-index:1000; }
.mfs {
margin-top: 1044px;
margin-left: 11px;
position: top;
}
.spacebox {
width: 500px;
height: -200px;
background-color: red;
opacity: 0;
}
.tw {
background-image: url(https://i.imgur.com/tyrNFnz.png);
width: 131px;
height: 159px;
position: absolute;
margin-top: -1879px;
margin-left: 253px;
padding: 0;
opacity: 0;
float: left;
background-repeat: repeat;
-webkit-transition: .4s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
transition: .4s all ease-in-out;
z-index: 999;
}
.tw:hover {
opacity: 1;
}
.email {
background-image: url(https://i.imgur.com/hC0MPLx.png);
width: 276px;
height: 229px;
position: absolute;
margin-top: -1943px;
margin-left: 385px;
opacity: 0;
background-repeat: repeat;
-webkit-transition: .4s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
transition: .4s all ease-in-out;
z-index: 999;
}
.email:hover {
opacity: 1;
}
/* ONLY REASON WHY THIS IS MARGIN LEFT 9000PX IS TO HIDE IT, HOVER LINKS STILL DISPLAY FINE WITH OR WITHOUT THIS.
original margin -------- margin-left: 775px; */
.twtl {
position: absolute;
width:244px;
height:475px;
margin-top: -642px;
margin-left: -9775px;
opacity: .4;
-webkit-transition: .4s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
transition: .4s all ease-in-out;
z-index: 999;
}
.twtl:hover {
opacity: 1;
}
/* SoundClicks Stuff */
/* general */
body {background-image: url(https://i.imgur.com/3ugMWgI.jpg); background-repeat:no-repeat; background-attachment:scroll; background-position: top center; background-color:white;}
body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:11px;}
.buylease tr {font-family:tahoma; font-size:10px;}
.buylease td {font-family:tahoma; font-size:10px;}
.buyleasehook tr {font-family:tahoma; font-size:10px;}
.buyleasehook td {font-family:tahoma; font-size:10px;}
.completeNavHeader {z-index: 999; position:relative;background-color:transparent;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out; opacity: 0; top:-60px; left:0px; margin: 0 auto 0px; width: 0px; }
.completeNavHeader:hover {opacity: 1.0; top:0px; }
a, a:link, a:visited {color:#4E4E4E; text-decoration:none;}
a:hover {color:#4E4E4E; text-decoration:underline;}
.pageFooter {clear:both; color:gray; padding:30px 0px 50px 20px;}
.infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */
.infoBox .quotes {margin:20px; border:#D6D6D6 dashed 1px; font-style:italic; padding:10px; background:;}
/* main containers */
.mainTable { background: transparent; color:transparent; width:920px; margin-top:600px; margin-left:auto; float;center; margin-right:auto; text-align:left; border:none;}
.mainContent {background:transparent ; color:#D6D6D6; width:920px; float:center; overflow:hidden; margin:0px 0px 0px 0px;} /* IE6 doesnt support our preferred overflow:visible
*//* left navigation */
.navigation {background:transparent;border:none; color:#D6D6D6; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;}
.navigation a:link, .navigation a:visited {color:#D6D6D6;}
.navigation a:hover {color:#FFFFFF;}
.navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;}
.headline {display: none;}
.headlineBig {display: none;}
.headlineSuppl {color:#999999; float:right; margin:10px 5px 0px 0px; font-size:10px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */
.headlineSuppl a:link, .headlineSuppl a:visited {color:#999999; text-decoration:none;}
.headlineSuppl a:hover {color:red; text-decoration:underline;}
.pageturner {background: transparent; color:#666666; border:#333333 solid 0px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */
.pageturner .nonactive {color:#666666;}
.pageturner a:link, .pageturner a:visited {color:#1f7188; text-decoration:none;}
.pageturner a:hover {color:white; text-decoration:underline;}
.listedPicsBox {background: transparent; color: transparent; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; border:solid #1f7188 0px; float:left; font-size:11px; text-align:center;}
.listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden}
.breaker {height:1px; line-height:1px; clear:both}
/* general assets */
.color_supplemental {color:#ff0000;} /* used e.g. for song pages comments count */
.alternateBG0 {} /* used as background colors for comments */
.alternateBG1 {} /* alternate color */
/* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */
.playerBox {float:left; clear:left; padding-left:20px; margin:15px 0px 3px 0px;}
.playerBox .playerHead {text-align:right; background:#111111; color:#445160; font-size:10px; padding:3px 5px 3px 3px; border-top:solid 0px #666666; border-bottom:dashed 1px #444444;}
.playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#CCCCCC; text-decoration:none;}
.playerBox .playerHead a:hover {color:white; text-decoration:underline;}
.playerBox .songBox {width:330px; padding:3px 0px 0px 1px; overflow:auto; background:#333333 url(/images/background/bg_grad_black_333333.png) repeat-x fixed; border-bottom:solid 0px #000000;}
.playerBox .songBox .singleSong {font-size:12px; color:#CCCCCC padding:1px;}
.playerBox .songBox .singleSong:hover {background:#999999; color:black; cursor:pointer;}
/* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */
.embeddedPlayer {; width:620px;}
/* music page */
.songsBox {opacity:0.5;border-bottom:dotted; width:510px; height:170px;float:left; padding-bottom:1px; margin-bottom:10px; color:#333333;-webkit-transition: .3s all ease-in-out;-moz-transition: .3s all ease-in-out;
-o-transition: .3s all ease-in-out;transition: .3s all ease-in-out;}
.songsBox:hover {opacity:1;;margin-top:30px;color:#fff;}
.songsBox { background: url();background-repeat: no-repeat;background-position:147px -200px;}
.songsBox:hover {background-position: 10px -35px;height:200px;background-position:147px 0px;;}
.songsBox a:link, .songsBox a:visited {color:#fff;-webkit-transition: .3s all ease-in-out;-moz-transition: .3s all ease-in-out;
-o-transition: .3s all ease-in-out;transition: .3s all ease-in-out;no-repeat;}
.songsBox a:hover {text-decoration:underline; color:#fff;}
a.songtitle:link, a.songtitle:visited {color:#000; text-decoration:none; font-size:13px; font-weight:bold;}
a.songtitle:hover {color:#000;margin-left:20px; }
.songsBox .actionlinks {font-size:11px; color:#fff;}
.songsBox .topSong {-webkit-transition: .3s all ease-in-out;-moz-transition: .3s all ease-in-out;
-o-transition: .3s all ease-in-out;transition: .3s all ease-in-out;color:#fff; float:left; text-align:left; font-size:13px;font-weight:bold;}
.songsBox .topSong:hover {color:#fff; float:left; text-align:left; font-size:13px;font-weight:bold;right:20px;}
/* comments page */
.commentsWelcome {background:#333333 url(/images/background/bg_grad_black_333333.png) repeat-x fixed; color:#CCCCCC; margin:0px 20px 20px 20px; padding:20px;}
.commentsBox { padding-top:5px; border-bottom:#333333 dashed 1px;;}
.commentsBox a:link, .commentsBox a:visited {color:#666666;}
.commentsBox a:hover {color:white; text-decoration:underline;}
.commentsBox .songComment {border-bottom:#333333 dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;}
.commentsBox .postdate {text-align:right; margin:0px 5px 10px 0px; color:#666666; font-size:11px; font-weight:normal;}
.commentsBox .postdate a:link, .commentsBox .postdate a:visited {color:#666666; text-decoration:none;} /* for delete/edit links */
.commentsBox .postdate a:hover {color:white; text-decoration:underline;}
.commentsBox .comment {color:#CCCCCC; padding:0px 5px 0px 140px; font-size:12px;}
.commentsBox .bandSignature {border-top:#333333 solid 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;}
.commentsBox .ratingsBox {float:right; width:220px; border-left:#333333 solid 1px; margin-bottom:10px;}
.ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */
.commentsPostBox {padding:10px; margin:20px 0px; background:#222222; border-top:#666666 solid 2px; border-bottom:#666666 solid 1px;}
.commentsPostBox .ratingsBox {background:#444444; color:#CCCCCC; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;}