Header not aligning correctly in table

[GoogleCodeExporter]

What steps will reproduce the problem?
1. joomla 3.1
2. place plugin syntax into an article and use "table element with rows and 
cells" in table strategy
3.Make table width = "0"

The header row does not line up with the content below it. The header seems to 
be aligning to the left while the content is center aligning. This makes the 
Download header have no content under it and the Name header has the download 
icon and so on. Attached is a screenshot.

What version of the product are you using? On what operating system? version 
2.7. 

Original issue reported on code.google.com by dru1...@gmail.com on 2 Jun 2013 at 11:42

Attachments:

• [Screen Shot 2013-06-02 at 7.39.05 PM.png](https://storage.googleapis.com/google-code-attachments/mp3-browser/issue-22/comment-0/Screen Shot 2013-06-02 at 7.39.05 PM.png)

[GoogleCodeExporter]

I observe the same problem. It seems specific to Firefox, as opposed to IE 
doing a better job. Didn't try other browsers. There is something funky going 
on with colspans.

Original comment by sanderverh on 3 Jun 2013 at 8:11

• Changed state: Accepted

[GoogleCodeExporter]

Further research reveals that this occurs with the Bootstrap styling. Adding 
the following to the template fixed it for me:

/* fix for mp3 browser table */
.row:before, .row:after {
  content: none;
}

Reference:

http://www.totaalsoftware.com/products/all-products/4-mp3-browser

Original comment by sanderverh on 4 Jun 2013 at 3:22

• Changed state: Invalid

[GoogleCodeExporter]

What is the template name that this code should be inserted into? And what line?

Original comment by dru1...@gmail.com on 14 Jun 2013 at 8:13

[GoogleCodeExporter]

If my analysis is correct, you are having a template that's based off of 
Bootstrap.

But I am talking about whatever is your currently-active front-end template.

There is no specific location. I prefer to throw my own customizations in at 
the top.

Original comment by sanderverh on 14 Jun 2013 at 9:36

[GoogleCodeExporter]

Oh. In the bootstrap CSS file?
I'll try. 

Original comment by dru1...@gmail.com on 14 Jun 2013 at 9:49

[GoogleCodeExporter]

I go to Extensions, Template Manager, click on the name in the Template column, 
and I get the page "Template Manager: Customise Template".

Then I look under Stylesheets, and find whatever looks to be the main template 
file, e.g. css/template.css, and go and edit that one.

Original comment by sanderverh on 14 Jun 2013 at 9:53

[GoogleCodeExporter]

Thanks I will try that. What is weird is the original mp3browser plugin formats 
fine in mp3. Of course I lose all of your great features if I keep that one. 

If this does not how can I just remove the header row or align it center? 

Original comment by dru1...@gmail.com on 14 Jun 2013 at 10:00

[GoogleCodeExporter]

Sorry for the cryptic response before. I was trying to say that the original 
mp3browser plugin formats fine in joomla 3. It is not really responsive but it 
doesn't look bad on smartphones. 

In any case I hope your recommendation works because I can make good use of 
your extra features.

One additional question: if I want to use a different player what files should 
I modify?  

Original comment by dru1...@gmail.com on 14 Jun 2013 at 10:29

[GoogleCodeExporter]

The original plugin did not have the second row with additional details. Adding 
that one introduced the usage of colspan's, which seems not to sit well with 
some templates.

Take a look here to override player code, without even changing source files:

http://code.google.com/p/mp3-browser/wiki/PlayerCode

Original comment by sanderverh on 16 Jun 2013 at 5:26

[GoogleCodeExporter]

I tried using that link to figure out how to override the player. I went to the 
tab in the plugin backend where it has the default code and tried replacing 
"%4" with the URL of where I saved the new player.  It didn't work. 

And then I tried wiping out all the code and just entering in the URL but it 
still didn't work. 

I added a comment on your page saying I am trying to use an HTML5 player. I 
found one at jplayer.com. 

Original comment by dru1...@gmail.com on 16 Jun 2013 at 12:29

[GoogleCodeExporter]

I think you would replace just %4 only when you are using another Flash movie 
as the player. If you're using a HTML5 player I think the entire code snippet 
in the configuration will change. Please create a separate issue if you feel 
there's something really not working.

Original comment by sanderverh on 17 Jun 2013 at 6:04

[GoogleCodeExporter]

find your template.css inside your templates folder and add the code mentioned 
in the other post. Just add the code to the top of your file.

/* fix for mp3 browser table */
.row:before, .row:after {
  content: none;
}

Original comment by laurens....@gmail.com on 16 Oct 2014 at 1:25

[GoogleCodeExporter]

Thank you, sanderverh.  That worked

Original comment by ptrista...@gmail.com on 12 Jan 2015 at 4:55