CSS and Forum Pages

Xarcell

Well-known member
So i'm having a few css issues with forum pages.

I used a php callback to include a php file.

I tried to use css to control the cellspacing(border-spacing) with no avial. No matter if I use a class or id, it will not work. The table will not have any cellspacing. Even if I just use HTML, cellspacing="10".

I also have the similar problem's with lists. I have to put style="list-style: none;" in every LI just to get it to work.

Any thoughts?
 

Jake Bunce

XenForo moderator
Staff member
I can confirm the table cellspacing problem. I have isolated the cause to this template:

Admin CP -> Appearance -> Templates -> xenforo_reset.css

Your list problem might the same cause. Try temporarily emptying the contents of that template to see if it fixes your problem.
 

Kier

XenForo developer
Staff member
Your list problem will be resolved by surrounding your content with <div class="baseHtml">....</div>

As for your border spacing, can you paste some example code? I suspect you could resolve it with a little specificity doctoring.
 

Brogan

XenForo moderator
Staff member
I've been playing with this using css styling but I can't get cell-spacing to work, or border-spacing when it is done via css.

I suspect changing class names should resolve it so that's the next step.

Code:
<style type="text/css">
table {
border: 5px solid;
border-spacing: 30px !important;
}

td, th {
border: 2px solid red !important;
}
</style>

<div class="messageText ugc baseHtml">
	<table>
		<tr>
			<th>Column 1</th>
			<th>Column 2</th>
		</tr>
		<tr>
			<td>Cell 1</td>
			<td>Cell 2</td>
		</tr>
		<tr>
			<td>Cell 3</td>
			<td>Cell 4</td>
		</tr>
	</table>
</div>
 

Brogan

XenForo moderator
Staff member
OK, this works.

Code:
<style type="text/css">
table.cta {
border: 5px solid;
border-spacing: 30px;
border-collapse: separate;
}

table.cta td, table.cta th {
border: 2px solid red;
}
</style>

<div class="messageText ugc baseHtml">
    <table class="cta">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
    </table>
</div>

It wasn't the css class name, the crucial element is this: border-collapse: separate;
As long as you include that it should be fine.

The <div class="messageText ugc baseHtml"> is explained here: http://xenforo.com/community/threads/creating-a-page.5714/#post-85983
 

Xarcell

Well-known member
OK, this works.

Code:
<style type="text/css">
table.cta {
border: 5px solid;
border-spacing: 30px;
border-collapse: separate;
}

table.cta td, table.cta th {
border: 2px solid red;
}
</style>

<div class="messageText ugc baseHtml">
    <table class="cta">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
    </table>
</div>

It wasn't the css class name, the crucial element is this: border-collapse: separate;
As long as you include that it should be fine.

The <div class="messageText ugc baseHtml"> is explained here: http://xenforo.com/community/threads/creating-a-page.5714/#post-85983

Thanks, that worked. I didn't realize that <div class="messageText ugc baseHtml"> was needed...
 

Brogan

XenForo moderator
Staff member
That's true but if you want the text and URL links to match posts, including the shadow/button effect on hover, then those 2 classes are required.
 
Top