Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Jose Garcia
Jose Garcia
837 Points

Browser Compatibility

Hello,

I am using dreamweaver CS5.5 and I am developing a website with a page template from dreamweaver. I am having browser compatibility issues. In google chrome and safari it looks perfect how I want it but in other browsers, items such as audio players shift to the right or left depending on the browser. I am using an absolute command and have tried a fixed command but still having issues. I have tried many attempts to fix the issue but I have no idea on how to go about and fix my problem. I am average at coding but i am stuck and need help!! I have entered the code below please help!!!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <!-- TemplateBeginEditable name="doctitle" --> <title>Millasota</title> <link rel="icon" href="img/milla.jpg" type="image/gif"/>

<!-- Insert to your webpage before the </head> --> <script src="audioplayerengine/jquery.js" type="text/javascript"></script> <script src="audioplayerengine/amazingaudioplayer.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="audioplayerengine/initaudioplayer-1.css"/> <script src="audioplayerengine/initaudioplayer-1.js" type="text/javascript"></script> <!-- End of head section HTML codes -->

   <!-- Insert to your webpage before the </head> -->
<script src="audioplayerengine/jquery.js" type="text/javascript"></script>
<script src="audioplayerengine/amazingaudioplayer.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="audioplayerengine/initaudioplayer-2.css"/>
<script src="audioplayerengine/initaudioplayer-2.js" type="text/javascript"></script>
<!-- End of head section HTML codes -->

  <!-- Insert to your webpage before the </head> -->
<script src="audioplayerengine/jquery.js" type="text/javascript"></script>
<script src="audioplayerengine/amazingaudioplayer.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="audioplayerengine/initaudioplayer-3.css"/>
<script src="audioplayerengine/initaudioplayer-3.js" type="text/javascript"></script>
<!-- End of head section HTML codes -->

 <!-- Insert to your webpage before the </head> -->
<script src="audioplayerengine/jquery.js" type="text/javascript"></script>
<script src="audioplayerengine/amazingaudioplayer.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="audioplayerengine/initaudioplayer-4.css"/>
<script src="audioplayerengine/initaudioplayer-4.js" type="text/javascript"></script>
<!-- End of head section HTML codes -->

    <!-- Insert to your webpage before the </head> -->
<script src="audioplayerengine/jquery.js" type="text/javascript"></script>
<script src="audioplayerengine/amazingaudioplayer.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="audioplayerengine/initaudioplayer-5.css"/>
<script src="audioplayerengine/initaudioplayer-5.js" type="text/javascript"></script>
<!-- End of head section HTML codes -->

    <!-- Insert to your webpage before the </head> -->
<script src="audioplayerengine/jquery.js" type="text/javascript"></script>
<script src="audioplayerengine/amazingaudioplayer.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="audioplayerengine/initaudioplayer-6.css"/>
<script src="audioplayerengine/initaudioplayer-6.js" type="text/javascript"></script>
<!-- End of head section HTML codes -->


    <!-- Insert to your webpage before the </head> -->
<script src="audioplayerengine/jquery.js"></script>
<script src="audioplayerengine/amazingaudioplayer.js"></script>
<link rel="stylesheet" type="text/css" href="audioplayerengine/initaudioplayer-7.css">
<script src="audioplayerengine/initaudioplayer-7.js"></script>
<!-- End of head section HTML codes -->

<style type="text/css"> body { margin: 0; padding: 0; color: #FFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; line-height: 1.4; background-color: #42413C; }

/* ~~ Element/tag selectors ~~ / ul, ol, dl { / Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */ padding: 0; margin: 0; }

} a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */ border: none; }

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ / a:link { color: #FFFFFF; text-decoration: underline; / unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification / } a:visited { color: #6E6C64; text-decoration: underline; } a:hover, a:active, a:focus { / this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */ text-decoration: none; }

/* this fixed width container surrounds the other divs / .container { width: 960px; margin: 0 auto; / the auto value on the sides, coupled with the width, centers the layout */ background-color: #000; }

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */ .header { background: #000; }

.sidebar1 { float: right; width: 180px; background: #000; padding-bottom: 10px; } .content { width: 780px; float: right; height: 1550px; padding-top: 10px; padding-right: 0; padding-bottom: 10px; padding-left: 0; }

/* ~~ This grouped selector gives the lists in the .content area space ~~ / .content ul, .content ol { padding: 0 15px 15px 40px; / this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */ }

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ / ul.nav { list-style: none; / this removes the list marker / border-top: 1px solid #666; / this creates the top border for the links - all others are placed using a bottom border on the LI / margin-bottom: 15px; / this creates the space between the navigation on the content below / } ul.nav li { border-bottom: 1px solid #000; / this creates the button separation / } ul.nav a, ul.nav a:visited { / grouping these selectors makes sure that your links retain their button look even after being visited / padding: 5px 5px 5px 15px; display: block; / this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. / width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */ text-decoration: none; background: #000; } ul.nav a:hover, ul.nav a:active, ul.nav a:focus { / this changes the background and text color for both mouse and keyboard navigators */ background: #FFF; color: #000; }

/* ~~ The footer ~~ / .footer { padding: 10px 0; background: #000; position: relative;/ this gives IE6 hasLayout to properly clear / clear: both; / this clear property forces the .container to understand where the columns end and contain them */ }

/* ~~ miscellaneous float/clear classes ~~ / .fltrt { / this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. / float: right; margin-left: 8px; } .fltlft { / this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. / float: left; margin-right: 8px; } .clearfloat { / this class can be placed on a or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */ clear:both; height:0; font-size: 1px; line-height: 0px; }

tb .footer p {

text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;

} .container .footer p { text-align: center; }

player1 {position:absolute; top:50px; left:210px;}

player2 {position:absolute; top:370px; left:210px;}

player3 {position:absolute; top:690px; left:210px;}

player4 {position:absolute; top:1010px; left:210px;}

player5 {position:absolute; top:1400px; left:210px; z-index:2;}

d1{position:absolute; top:1560px; left:210px; z-index:2;}

player6{position:absolute; top:1400px; left:590px; z-index:2;}

d2{position:absolute; top:1560px; left:590px; z-index:2;}

player7{position:absolute; top:1600px; left:210px; z-index:2;}

d3{position:absolute; top:1660px; left:210px; z-index:2;}

gobd {

position:absolute;
top:170px;
left:600px;
width: 275px;
height: 259px;

}

fgu {

position:absolute;
top:480px;
left:600px;
width: 270px;
height: 259px;

}

that {

position:absolute;
top:790px;
left:590px;
width: 270px;
height: 259px;

}

welcome {

position:absolute;
top:1150px;
left:590px;
width: 270px;
height: 259px;

}

fb{position:absolute; top:1733px; left:880px; z-index:2;}

tw{position:absolute; top:1733px; left:903px; z-index:2;}

hot{position:absolute; top:1733px; left:927px; z-index:2;}

rev{position:absolute; top:1733px; left:949px; z-index:2;}

cloud{position:absolute; top:1733px; left:972px; z-index:2;}

pif{position:absolute; top:1733px; left:995px; z-index:2;}

tube{position:absolute; top:1733px; left:1018px; z-index:2;}

twitter {

height:600px; width:75px; }

</style>

</head>

<body> <div class="container"> <div class="header"><img src="img/banner.png" alt="Insert Logo Here" name="Insert_logo" width="960" height="140" id="Insert_logo" style="background: #000; display:block;" /> </div>

<div class="sidebar1"> <ul class="nav"> <li><a href="index.html">Home</a></li> <li><a href="music.html">Music</a></li> </ul>

<div id="twitter"> <a class="twitter-timeline" href="https://twitter.com/MillaSota" data-widget-id="354038146670919680">Tweets by @MillaSota</a> <script type="application/javascript" >!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs. parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div>

</div>

<!-- start of content-->

<div class="content">

<div id="fb">
<a href="https://www.facebook.com/pages/Millasota-fam-page/241776799193764" target="_blank"> <img src="img/fb.jpg" alt="fb" width="22" height="22"/></a> </div>

<div id="tw">
<a href="http://www.twitter.com/MillaSota" target="_blank"> <img src="img/tw.jpg" alt="tw" width="22" height="22"/></a> </div>

<div id="hot">
<a href="http://www.hotnewhiphop.com/MillaSOTA/profile/" target="_blank"> <img src="img/hot.jpg" alt="hot" width="22" height="22"/></a> </div>

<div id="rev">
<a href="http://www.reverbnation.com/millasota/songs" target="_blank"> <img src="img/rev.jpg" alt="rev" width="22" height="22"/></a> </div>

<div id="cloud">
<a href="https://soundcloud.com/millasota" target="_blank"> <img src="img/cloud.jpg" alt="rev" width="22" height="22"/></a> </div>

<div id="pif">
<a href="http://web4.datpiff.com/profile/Millasota" target="_blank"> <img src="img/pif.jpg" alt="rev" width="22" height="22"/></a> </div>

<div id="tube">
<a href="http://www.youtube.com/user/gagemillasota?feature=watch" target="_blank"> <img src="img/tube.jpg" alt="rev" width="22" height="22"/></a> </div>

<div id="gobd"><img src="img/GBD.jpg" width="280" height="258" alt="gbd"/> </div>

<div id="fgu"><img src="img/fgu.jpg" width="280" height="258" alt="fgu"/> <a href="music/from tha ground up.zip">Download From The Ground Up</a> </div>

<div id="that"><img src="img/album.jpg" width="280" height="258" alt="fgu"/> <a href="music/T.H.A.T.zip">Download T.H.A.T</a> </div>

<div id="welcome"><img src="img/welcome.jpg" width="280" height="258" alt="welcome"/> <a href="music/welcome to Millasota Mixtape.zip">Download Welcome To Millasota</a> </div>

<!--start of player 1 -->

<div id="player1" style="margin:100px auto;">

<!-- Insert to your webpage where you want to display the audio player -->
<div id="amazingaudioplayer-1" style="display:block;position:relative;width:320px;height:270px;margin:0px auto 0px;">
    <ul class="amazingaudioplayer-audios" style="display:none;">
        <li data-artist="Millastoa" data-title="(Cant Nobody) Do it like you Do" data-album="Good On A Bad Day" data-info="" data-image="audios/goabd/GBD.jpg" data-duration="182">
            <div class="amazingaudioplayer-source" data-src="audios/goabd/(Cant Nobody) Do it like you Do.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/goabd/(Cant Nobody) Do it like you Do.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Millasota" data-title="Breath Of Fresh Air " data-album="Good On A Bad Day" data-info="" data-image="audios/goabd/GBD.jpg" data-duration="233">
            <div class="amazingaudioplayer-source" data-src="audios/goabd/Breath OF Fresh AIR .mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/goabd/Breath OF Fresh AIR .ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Millasota" data-title="Copy My Cool" data-album="Good On A Bad Day" data-info="" data-image="audios/goabd/GBD.jpg" data-duration="367">
            <div class="amazingaudioplayer-source" data-src="audios/goabd/Copy My Cool.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/goabd/Copy My Cool.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Millasota Ft. Tay Shmidt" data-title="G.O.B.D." data-album="Good On A Bad Day" data-info="" data-image="audios/goabd/GBD.jpg" data-duration="199">
            <div class="amazingaudioplayer-source" data-src="audios/goabd/G.O.B.D. Ft. Tay Shmidt.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/goabd/G.O.B.D. Ft. Tay Shmidt.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Millasota" data-title="Im On That 420" data-album="Good On A Bad Day" data-info="" data-image="audios/goabd/GBD.jpg" data-duration="278">
            <div class="amazingaudioplayer-source" data-src="audios/goabd/Im On That 420 Track.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/goabd/Im On That 420 Track.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Millasota" data-title="Small Town Kid " data-album="Good On A Bad Day" data-info="" data-image="audios/goabd/GBD.jpg" data-duration="247">
            <div class="amazingaudioplayer-source" data-src="audios/goabd/Small Town Kid (final).mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/goabd/Small Town Kid (final).ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Millasota" data-title="Spillin Still Chillin" data-album="Good On A Bad Day" data-info="" data-image="audios/goabd/GBD.jpg" data-duration="270">
            <div class="amazingaudioplayer-source" data-src="audios/goabd/Spillin Still Chillin.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/goabd/Spillin Still Chillin.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Millasota" data-title="Taste Like Lemon" data-album="Good On A Bad Day" data-info="" data-image="audios/goabd/GBD.jpg" data-duration="141">
            <div class="amazingaudioplayer-source" data-src="audios/goabd/Taste like lemon22.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/goabd/Taste like lemon22.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Millasota" data-title="Thats That Purple" data-album="Good On A Bad Day" data-info="" data-image="audios/goabd/GBD.jpg" data-duration="213">
            <div class="amazingaudioplayer-source" data-src="audios/goabd/thats that purple.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/goabd/thats that purple.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Millasota" data-title="This Is To The Bigs" data-album="Good On A Bad Day" data-info="" data-image="audios/goabd/GBD.jpg" data-duration="271">
            <div class="amazingaudioplayer-source" data-src="audios/goabd/This is 2 The Bigs.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/goabd/This is 2 The Bigs.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Millasota" data-title="What..Ever.." data-album="Good On A Bad Day" data-info="" data-image="audios/goabd/GBD.jpg" data-duration="235">
            <div class="amazingaudioplayer-source" data-src="audios/goabd/gage what ever 3_2.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/goabd/gage what ever 3_2.ogg" data-type="audio/ogg" />
        </li>
    </ul>
    <div class="amazingaudioplayer-engine" style="display:none;"><a href="http://amazingaudioplayer.com" title="jquery audio player">html5 music player</a></div>
</div>
<!-- End of body section HTML codes -->

</div>

<!--end of player 1 -->

<!--start of player 2 -->

<div id="player2" style="margin:100px auto;">

<!-- Insert to your webpage where you want to display the audio player -->
<div id="amazingaudioplayer-2" style="display:block;position:relative;width:320px;height:270px;margin:0px auto 0px;">
    <ul class="amazingaudioplayer-audios" style="display:none;">
        <li data-artist="Alpha &amp; Omega" data-title="Main Intro" data-album="From the Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="76">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/MAIN INTRO.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/MAIN INTRO.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Ups And Downs" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="336">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/ups and downs.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/ups and downs.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Ride Slow" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="200">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/ride slow.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/ride slow.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Ride For Me" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="199">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/ride 4 me.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/ride 4 me.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Peekaboo" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="225">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/peekaboo.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/peekaboo.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Apu Skit" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="198">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/apu skit.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/apu skit.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Mmmmh" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="266">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/Mmmmh-music.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/Mmmmh-music.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="M.I.N.N" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="251">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/M.I.N.N-music.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/M.I.N.N-music.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="4 4 Money" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="231">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/4 4 MONEY-music.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/4 4 MONEY-music.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Change In This Game" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="338">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/change in this game.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/change in this game.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Chevys" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="224">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/chevys.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/chevys.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="DaDaDa" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="199">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/DADADA.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/DADADA.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Every Where" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="181">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/every where.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/every where.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="G Thang" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="232">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/G thang.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/G thang.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Grind All " data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="362">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/grind all .mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/grind all .ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Im Still Here" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="150">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/IM STILL HERE.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/IM STILL HERE.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Its Me" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="188">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/its me.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/its me.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Just A Man" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="281">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/JUST A MAN.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/JUST A MAN.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega " data-title="Killa" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="220">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/KILLA.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/KILLA.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Oh Shit" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="178">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/oh shit.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/oh shit.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Outro" data-album="From The Ground Up" data-info="" data-image="audios/From the Ground Up/fgu.jpg" data-duration="21">
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/outro.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/From the Ground Up/outro.ogg" data-type="audio/ogg" />
        </li>
    </ul>
    <div class="amazingaudioplayer-engine" style="display:none;"><a href="http://amazingaudioplayer.com" title="music player for website">audio player for website</a></div>
</div>
<!-- End of body section HTML codes -->

</div> <!--end of player 2 -->

<!-- start of player 3 -->

<div id="player3" style="margin:100px auto;">

<!-- Insert to your webpage where you want to display the audio player -->
<div id="amazingaudioplayer-3" style="display:block;position:relative;width:320px;height:270px;margin:0px auto 0px;">
    <ul class="amazingaudioplayer-audios" style="display:none;">
        <li data-artist="Alpha &amp; Omega" data-title="T.h.a.t Intro" data-album="T.H.A.T" data-info="" data-image="audios/that/album.jpg" data-duration="134">
            <div class="amazingaudioplayer-source" data-src="audios/that/T.h.a.t Intro.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/that/T.h.a.t Intro.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="What We Live For" data-album="T.H.A.T" data-info="" data-image="audios/that/album.jpg" data-duration="219">
            <div class="amazingaudioplayer-source" data-src="audios/that/What We Live For.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/that/What We Live For.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Trust" data-album="T.H.A.T" data-info="" data-image="audios/that/album.jpg" data-duration="191">
            <div class="amazingaudioplayer-source" data-src="audios/that/Trust.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/that/Trust.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Time" data-album="T.H.A.T" data-info="" data-image="audios/that/album.jpg" data-duration="208">
            <div class="amazingaudioplayer-source" data-src="audios/that/Time.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/that/Time.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Tha Path " data-album="T.H.A.T" data-info="" data-image="audios/that/album.jpg" data-duration="277">
            <div class="amazingaudioplayer-source" data-src="audios/that/Tha path .mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/that/Tha path .ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Blinded" data-album="T.H.A.T" data-info="" data-image="audios/that/album.jpg" data-duration="229">
            <div class="amazingaudioplayer-source" data-src="audios/that/Blinded.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/that/Blinded.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="I Think Its A Skit" data-album="T.H.A.T" data-info="" data-image="audios/that/album.jpg" data-duration="43">
            <div class="amazingaudioplayer-source" data-src="audios/that/I Think Its A Skit.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Seasons" data-album="T.H.A.T" data-info="" data-image="audios/that/album.jpg" data-duration="240">
            <div class="amazingaudioplayer-source" data-src="audios/that/seasons.mp3" data-type="audio/mpeg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Bokeasmowl" data-album="T.H.A.T" data-info="" data-image="audios/that/album.jpg" data-duration="204">
            <div class="amazingaudioplayer-source" data-src="audios/that/BokeAS.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/that/BokeAS.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="If Its Not One Thing" data-album="T.H.A.T" data-info="" data-image="audios/that/album.jpg" data-duration="226">
            <div class="amazingaudioplayer-source" data-src="audios/that/If Its Not One Thing.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/that/If Its Not One Thing.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Lets Be Real [OMEGA]" data-album="T.H.A.T" data-info="" data-image="audios/that/album.jpg" data-duration="192">
            <div class="amazingaudioplayer-source" data-src="audios/that/Lets Be Real [OMEGA].mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/that/Lets Be Real [OMEGA].ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Life That Im Livin [ALPHA]" data-album="T.H.A.T" data-info="" data-image="audios/that/album.jpg" data-duration="218">
            <div class="amazingaudioplayer-source" data-src="audios/that/Life That Im Livin [ALPHA].mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/that/Life That Im Livin [ALPHA].ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="More" data-album="T.H.A.T" data-info="" data-image="audios/that/album.jpg" data-duration="245">
            <div class="amazingaudioplayer-source" data-src="audios/that/More.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/that/More.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Tha Guys Behind Tha Bag" data-album="T.H.A.T" data-info="" data-image="audios/that/album.jpg" data-duration="65">
            <div class="amazingaudioplayer-source" data-src="audios/that/Tha guys behind tha bag.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/that/Tha guys behind tha bag.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Alpha &amp; Omega" data-title="Outro" data-album="T.H.A.T" data-info="" data-image="audios/that/album.jpg" data-duration="130">
            <div class="amazingaudioplayer-source" data-src="audios/that/Outro.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/that/Outro.ogg" data-type="audio/ogg" />
        </li>
    </ul>
    <div class="amazingaudioplayer-engine" style="display:none;"><a href="http://amazingaudioplayer.com" title="html5 music player">music player for website</a></div>
</div>
<!-- End of body section HTML codes -->

</div>

<!-- end of player 3 -->

<!-- start of player4-->

<div id="player4" style="margin:100px auto;">

<!-- Insert to your webpage where you want to display the audio player -->
<div id="amazingaudioplayer-4" style="display:block;position:relative;width:320px;height:auto;margin:0px auto 0px;">
    <ul class="amazingaudioplayer-audios" style="display:none;">
        <li data-artist="Millasota" data-title="Ride With Me (Pillow Talk Instrumental)" data-album="Welcome To Millasota The Mixtape" data-info="" data-image="audios/welcome/welcome.jpg" data-duration="174">
            <div class="amazingaudioplayer-source" data-src="audios/welcome/Come Ride With ME.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/welcome/Come Ride With ME.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Millasota" data-title="GeorgeClooney(Agressive HipHop)" data-album="Welcome To Millasota The Mixtape" data-info="" data-image="audios/welcome/welcome.jpg" data-duration="198">
            <div class="amazingaudioplayer-source" data-src="audios/welcome/GeorgeClooney(agressive Remix).mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/welcome/GeorgeClooney(agressive Remix).ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Millasota Ft. BranNew &amp; Kid Beast" data-title="Miss Me Remix" data-album="Welcome To Millasota The Mixtape" data-info="" data-image="audios/welcome/welcome.jpg" data-duration="10">
            <div class="amazingaudioplayer-source" data-src="audios/welcome/MillaSota BranNew Kid Beast (Miss Me Remix).mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/welcome/MillaSota BranNew Kid Beast (Miss Me Remix).ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Millasota" data-title="All Night Long (Johnny Juliani Beat)" data-album="Welcome To Millasota The Mixtape" data-info="" data-image="audios/welcome/welcome.jpg" data-duration="195">
            <div class="amazingaudioplayer-source" data-src="audios/welcome/juliani beat.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/welcome/juliani beat.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Millasota" data-title="Mind Your Business" data-album="Welcome To Millasota The Mixtape" data-info="" data-image="audios/welcome/welcome.jpg" data-duration="187">
            <div class="amazingaudioplayer-source" data-src="audios/welcome/mind your business.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/welcome/mind your business.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Millasota" data-title="No Seeds No Sticks " data-album="Welcome To Millasota The Mixtape" data-info="" data-image="audios/welcome/welcome.jpg" data-duration="273">
            <div class="amazingaudioplayer-source" data-src="audios/welcome/No Seeds No sticks Remix.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/welcome/No Seeds No sticks Remix.ogg" data-type="audio/ogg" />
        </li>
        <li data-artist="Millasota" data-title="Poppin Bottles Freestyle" data-album="Welcome To Millasota The Mixtape" data-info="" data-image="audios/welcome/welcome.jpg" data-duration="334">
            <div class="amazingaudioplayer-source" data-src="audios/welcome/poppin bottles freestyle.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/welcome/poppin bottles freestyle.ogg" data-type="audio/ogg" />
        </li>
    </ul>
    <div class="amazingaudioplayer-engine" style="display:none;"><a href="http://amazingaudioplayer.com" title="jquery music player">html5 mp3 player</a></div>
</div>
<!-- End of body section HTML codes -->

</div> <!-- end of player4-->

<!--sart of player5 -->

<div id="player5" style="margin:100px auto;">

<!-- Insert to your webpage where you want to display the audio player --> <div id="amazingaudioplayer-5" style="display:block;position:relative;width:320px;height:auto;margin:0px auto 0px;"> <ul class="amazingaudioplayer-audios" style="display:none;"> <li data-artist="Millasota" data-title="Bout To Blow" data-album="" data-info="" data-image="" data-duration="222"> <div class="amazingaudioplayer-source" data-src="audios/bout to blow/Bout to blow.mp3" data-type="audio/mpeg" /> <div class="amazingaudioplayer-source" data-src="audios/bout to blow/Bout to blow.ogg" data-type="audio/ogg" /> </li> </ul> <div class="amazingaudioplayer-engine" style="display:none;"><a href="http://amazingaudioplayer.com" title="mp3 player for website">jquery audio player</a></div> </div> <!-- End of body section HTML codes -->

</div>

<!--end of player5 -->

<div id="d1"><a href="music/Bout to blow.zip">Download The Single Bout To Blow</a></div>

<!--start of player6--> <div id="player6"style="margin:100px auto;">

<!-- Insert to your webpage where you want to display the audio player -->
<div id="amazingaudioplayer-6" style="display:block;position:relative;width:320px;height:auto;margin:0px auto 0px;">
    <ul class="amazingaudioplayer-audios" style="display:none;">
        <li data-artist="Millasota" data-title="CropCircleCologne" data-album="" data-info="" data-image="" data-duration="195">
            <div class="amazingaudioplayer-source" data-src="audios/crop/track1.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/crop/track1.ogg" data-type="audio/ogg" />
        </li>
    </ul>
    <div class="amazingaudioplayer-engine" style="display:none;"><a href="http://amazingaudioplayer.com" title="jquery music player">html5 audio player</a></div>
</div>
<!-- End of body section HTML codes -->

</div> <!--end of player6-->

<div id="d2"><a href="music/track1.zip">Download The Single CropCircleCologne </a></div>

<div id="player7"tyle="margin:100px auto;">

<!-- Insert to your webpage where you want to display the audio player -->
<div id="amazingaudioplayer-7" style="display:block;position:relative;width:320px;height:auto;margin:0px auto 0px;">
    <ul class="amazingaudioplayer-audios" style="display:none;">
        <li data-artist="Millasota Ft. Janey Neal" data-title="Its Not Real Wide Awake" data-album="" data-info="" data-image="" data-duration="228">
            <div class="amazingaudioplayer-source" data-src="audios/notreal/millasota_millasota-janey-neal-its-not-real-wide-awake.mp3" data-type="audio/mpeg" />
            <div class="amazingaudioplayer-source" data-src="audios/notreal/millasota_millasota-janey-neal-its-not-real-wide-awake-ogg.ogg" data-type="audio/ogg" />
        </li>
    </ul>
    <div class="amazingaudioplayer-engine" style="display:none;"><a href="http://amazingaudioplayer.com" title="audio player for website">jquery audio player</a></div>
</div>
<!-- End of body section HTML codes -->

</div>

<div id="d3"><a href="audios/notreal/itsnotrealwideawake.zip">Download The Single Its Not Real Wide Awake </a></div>

<p><!-- end .content --></p> </div>

<div class="footer"> <p>Copyright © 2013 Millasota. All rights reserved.</p> <!-- end .footer --> </div> <!-- end .container --> </div>

</body> </html>

2 Answers

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

jose garcia. Please put your code in something like Codepen, or Github. After that please give a link to your code webpage. Then delete the code that you currently have on the page. Right now it's just too much for one forum post.

hum4n01d
hum4n01d
25,493 Points
hum4n01d
hum4n01d
25,493 Points

Try using something like normalize.css (https://necolas.github.io/normalize.css/) to attempt to fix browser inconsistencies.