• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

CSS and Forum Pages

Xarcell

Well-known member
#1
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
#2
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
#3
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
#4
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
#5
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
#6
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
#8
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.