Need help positioning Audio Player plugin in header

  • Hi, I’m hoping someone can take a look at my code and help me out.

    I’ve added the WP Audio Player to my Header, below a ‘Featured Content Gallery’ plugin that I successfully replaced my header with.

    It looks OK in Chrome and Firefox. However, in Explorer (8), white spaces show up above and below the media player.

    This is probably because I have no idea what I’m doing, and just played around till it showed up in the right place, then positioned it with a workaround: The size of the Gallery Header should actually be 325px, but when it was left at 325px and I added the Audio Player, there were big white spaces above and below the player. So, as you’ll see in the code below, I’ve made the Gallery 298px, then dropped the Audio Player down 14px to cover the bottom white gap.

    How can I code this properly? (By the way, I’m using a custom theme someone made, that I believe was based on the Kubrick theme).

    The site is at https://alex-lambert.com

    Thanks in advance for your help!

    Here’s the code. I’m including everything from the Header down to the Navigation Menu, because there is also a “logo” that was hidden behind the Header to begin with – have no idea what it does or if it’s affecting things.

    Stylesheet code:

    /* begin Header */

div.art-Header
{
	margin: 0 auto;
	position: relative;
	z-index:0;
	width: 850px;
	height: 298px;
}

/* end Header */

/* begin Audioplayer */

div.art-Audioplayer
{
  position:relative;
  top:12px
}

/* end Audioplayer*/

/* begin Logo */
.art-Logo
{
	display : block;
	position: absolute;
	left: 11px;
	top: 45px;
	width: 829px;
}

h1.art-Logo-name
{
	display: none;
	text-align: center;
}

h1.art-Logo-name, h1.art-Logo-name a, h1.art-Logo-name a:link, h1.art-Logo-name a:visited, h1.art-Logo-name a:hover
{
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 26px;
font-style: normal;
font-weight: bold;
text-decoration: none;
	padding:0;
	margin:0;
	color: #1B517E !important;
}

.art-Logo-text
{
	display: none;
	text-align: center;
}

.art-Logo-text, .art-Logo-text a
{
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
	padding:0;
	margin:0;
	color: #3D3E3E !important;
}
/* end Logo */

/* begin Menu */

    Header:

    <div class="art-Header">
<?php include (ABSPATH . '/wp-content/plugins/featured-content-gallery/gallery.php'); ?></div>

<div class="art-Audioplayer">
<?php if (function_exists("insert_audio_player")) {
  insert_audio_player("[audio:https://alex-lambert.com/wp-content/uploads/2010/10/I-Didnt-Know.mp3,https://alex-lambert.com/wp-content/uploads/2010/10/Alex-Lambert-Imperfectly-Perfect-Demo.mp3,https://alex-lambert.com/wp-content/uploads/2010/10/Untouchable.mp3,https://alex-lambert.com/wp-content/uploads/2010/10/Dream-With-My-Eyes-Open.mp3|loop=yes]");
 } ?></div>

<div class="art-Logo">
    <h1 id="name-text" class="art-Logo-name">
        <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    <div id="slogan-text" class="art-Logo-text">
        <?php bloginfo('description'); ?></div>

</div>

<div class="art-nav">

Viewing 3 replies - 1 through 3 (of 3 total)

  • Having this same issue on my blog. Any instance of Audio Player has extra space above and below the player which is taking up a lot of screen realestate. Anyone know how to remove these extra paragraph (or whatever) divisions are being added?

    Thread Starter Kassandra_P

    (@kassandra_p)

    Hi, this issue has been resolved for us… unfortunately it wasn’t me who figured it out so I can’t really explain exactly what we did. Sorry od3rus.

    But basically they didn’t find a way to remove the extra paragraphs above and below the media player, they just played with the CSS positioning so that what we have above and below the media player was positioned overlapping (and hiding) the spaces. I think they also added these changes to the IE stylesheets so it works in IE as well (although movement is now a bit shaky in Firefox).

    Hope someone else works out a better solution…

    Thread Starter Kassandra_P

    (@kassandra_p)

    Here’s the code if it’s any help…
    The same has been posted into style.ie6.css and style.ie7.css.

    /* begin Header */

div.art-Header
<?php include (ABSPATH . '/wp-content/plugins/featured-content-gallery/gallery.php'); ?>
{
	margin: 0 auto;
	position: relative;
	z-index:0;
	width: 850px;
	height: 325px;
}

/* end Header */

/* begin Audioplayer */

div.art-Audioplayer
{
        position:relative;
	z-index: -1;
	top: -12px;
	height: 12px;
}

/* end Audioplayer*/

/* begin Logo */
.art-Logo
{
	display : block;
	position: absolute;
	left: 11px;
	top: 45px;
	width: 829px;
}

h1.art-Logo-name
{
	display: none;
	text-align: center;
}

h1.art-Logo-name, h1.art-Logo-name a, h1.art-Logo-name a:link, h1.art-Logo-name a:visited, h1.art-Logo-name a:hover
{
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 26px;
font-style: normal;
font-weight: bold;
text-decoration: none;
	padding:0;
	margin:0;
	color: #1B517E !important;
}

.art-Logo-text
{
	display: none;
	text-align: center;
}

.art-Logo-text, .art-Logo-text a
{
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
	padding:0;
	margin:0;
	color: #3D3E3E !important;
}
/* end Logo */

/* begin Menu */
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Need help positioning Audio Player plugin in header’ is closed to new replies.

Tags