Using Joomla...major spacing issue with their css class "contentpaneopen" Please help

Get Started
1

First of all, I want my body area (where the text goes) to have NO spacing in it on the sides…

I have determined that the table with the class “contentpaneopen” is causing the issues.

I decided to make my project temporarily public (even though it is work in progress) and provide the link to my site that has the problem:

http://www.bestofvideogames.com/need-for-speed-test

You’ll notice that the bottom “Need for Speed” image is having the spacing issues in IE7 and I have NO IDEA why. It is wrapped by the table “contentpaneopen” which I believe is causing the problems…but again, have no idea why this is.

I have inserted the following into the CSS, but it still seems there is spacing to the left of the Need for Speed Image. This only occurs in IE7 by the way.

HTML:

<table class=“contentpaneopen”>

<tbody><tr>
<td valign=“top”>

<img src=“/images/page_headers/needforspeedshift.jpg” height=“121” width=“973”>

CSS:

.contentpaneopen { padding: 0px;
margin: 0px;
}
table.contentpaneopen tr, table.contentpaneopen td {
padding: 0px;
margin: 0px;
}

table.contentpaneopen tr td img { padding: 0px; margin: 0px; }

table.contentpaneopen, table.contentpane {
	margin: 0;
	padding: 0;
	width: 100%;
}

img { padding: 0px; margin: 0px; }

I also know that some times white spaces in between things cause this problem, but I have no idea how to delete the white spaces in between the table, td, tr, tags…since they are so far embedded into the Joomla core code.

Thanks for your help!

Ryan

2

The spacing problem is affecting the area below it also…can see the containers for the two headers below the image jutting out slightly on the right of the layout.

I looked throught the code of the site using the Firebug plugin in Firefox and one of the things I noticed is that the div with the .belowimage class (right below the image affected in the html) had no formatting?..or rather I couldn’t find the class in the stylesheet(s). Also, when I hovered over that div in the html, the plugin highlighted the problem image as well as the area that div actually encompasses/affects. Might be something else to look at…just a thought.

3

Thanks for your reply! But I did find out the problem and here was the solution (it took me FOREVER to figure this one out!!):

I fixed the problem! I had to hack the file, but it was very easy…instructions here:

PROBLEM: Extra padding caused by the joomla table “contentpaneopen”

The table “contentpaneopen” will cause spacing issues in IE 7 because
it has no cellspacing or cellpadding defined for it!

FIX BELOW…

  1. To fix spacing caused by the table class “contentpaneopen” go to:

components/com_content/views/article/tmpl/default.php

  1. Find the second “contentpaneopen” table here:

<table class=“contentpaneopen”

  1. Then simply add cellspacing=0 and cellpadding=0 to table like this:

<table cellspacing=0 cellpadding=0 class=“contentpaneopen”

4

glad you found a solution. :slight_smile:
I’ll be sure to remember that fix in case I’m ever working in Joomla again.