CSS and Forum Pages

[Xarcell]

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]

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]

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.

 

[Paul B]

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.

<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>

 

[Paul B]

OK, this works.

<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]

OK, this works.

<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...

 

[Kier]

messageText and ugc are not required, just baseHtml.

 

[Paul B]

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.