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

CSS and Forum Pages

Discussion in 'Troubleshooting and Problems' started by Xarcell, Dec 21, 2010.

  1. Xarcell

    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?
     
  2. Jake Bunce

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

    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.
     
    Jake Bunce likes this.
  4. Brogan

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

    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
     
    Jo. and Xarcell like this.
  6. Xarcell

    Xarcell Well-Known Member


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

    Kier XenForo Developer Staff Member

    messageText and ugc are not required, just baseHtml.
     
  8. Brogan

    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.
     

Share This Page