Board Info/Statistics Alignment

[weedfanatic]

Forum URL: eobud.boards.net
Hello. I hate to have to ask for help on this, but I can't figure out how to fix my alignment issues with my home template.
Basically, the bottom 'current users online' + 'Online in last 24 hours' tables, need to be positioned like the members/top part.

I tried to get this working myself for a while, but can't figure out how to do it properly unfortunately.
I don't know how to keep those two bottom tables in a fixed position/side by side like how the top tables are.

Having more or less lines in these tables, effects the tables contents positions. (Well for the 24 hours table anyways.)
It should always look like this below:


-When the 'Online in last 24 hours' table shows too many members, the table, or its content anyways, gets moved up.
(It shows the content aboved the black line/seperator)

-When I'm logged in, both bottom tables are not aligned/spaced like how the top tables are, and one table is higher.
Example:


-When I'm logged out/no members are logged in, same thing, except the 24 hours table is positioned even higher.
Example:


-To avoid confusion, I want the tables to be positioned exactly as the first image shows.
-One other thing I would like to know that's related, is how to remove the inner border for only board info/statistics tables.
(I know it looks like it is removed, but it's just the same color as the board info/statistics background.) =d

Any help with this would be really appreciated!!!

[Tumbleweed]

I took a look via "view elements" and I can see different elements have different sizes but I can't see where in the css it is coming from. I do think using the hr tag as you did (in the middle of a td tag) with 200%  is part of the problem but not all of it.   You would have been better off ending the table there, adding the hr tag and starting a new table for the "Users Currently Online" and "Users Online in the Last 24 Hours". (Just to elaborate a little bit, when I view elements (the hr tag) on your page and click on that line, it shows the hr line going totally off the screen but highlights only the left td tag area (as is logical) and also shows like 3 pixels padding on top/bottom. If you know how to view elements, try that on the hr tag and you'll see what I mean.)

But since I can't pin point the exact issue may I ask if you added all your css changes to the info center to the bottom of your style sheet or did you go within the default css and edit there? I ask because if you did add all changes to the bottom of your style sheet, if you posted your template and the css you added associated with it, I'm sure I could find the problem. If you don't want to post it you could pm it to me.

I'll keep looking at your coding but as I said, so far I do not see what is making things different sizes. Just by a few pixels but definitely different.

Also in each of the td tags before those users online/online in 24 hours, it might be helpful to vertically align to the top and then use padding to move it down a few pixels. It seems to be trying to align in the middle although even that seems to fail and especially is noticeable when only two lines are on users online left side and then on the right  24 hours side there are 3 lines. But I'm speculating somewhat here. Just can't say for sure unless I actually get to see your coding. 

[weedfanatic]

EDIT: It might help to check my other site also which is using the same template, but without the hr and CSS mod.
eoguide.boards.net

Jun 14, 2016 12:50:47 GMT -8 Tumbleweed said:

I took a look via "view elements" and I can see different elements have different sizes but I can't see where in the css it is coming from. I do think using the hr tag as you did (in the middle of a td tag) with 200%  is part of the problem but not all of it.   You would have been better off ending the table there, adding the hr tag and starting a new table for the "Users Currently Online" and "Users Online in the Last 24 Hours". (Just to elaborate a little bit, when I view elements (the hr tag) on your page and click on that line, it shows the hr line going totally off the screen but highlights only the left td tag area (as is logical) and also shows like 3 pixels padding on top/bottom. If you know how to view elements, try that on the hr tag and you'll see what I mean.)

But since I can't pin point the exact issue may I ask if you added all your css changes to the info center to the bottom of your style sheet or did you go within the default css and edit there? I ask because if you did add all changes to the bottom of your style sheet, if you posted your template and the css you added associated with it, I'm sure I could find the problem. If you don't want to post it you could pm it to me.

I'll keep looking at your coding but as I said, so far I do not see what is making things different sizes. Just by a few pixels but definitely different.

Also in each of the td tags before those users online/online in 24 hours, it might be helpful to vertically align to the top and then use padding to move it down a few pixels. It seems to be trying to align in the middle although even that seems to fail and especially is noticeable when only two lines are on users online left side and then on the right  24 hours side there are 3 lines. But I'm speculating somewhat here. Just can't say for sure unless I actually get to see your coding. 

Hey, thanks for the reply! Yea I know what you mean in regards to inspecting elements. I do notice what you mean about the hr going off page, I wouldn't have noticed it went off page unless you told me to inspect element, thanks! Unfortunately I don't think that's the problem. It may be part of the problem like you said, but I've completely removed it, and tested multiple different things, including trying to manually align everything, keep the tables constantly the same distance I want from top whether or not new lines/less line are added/removed, ect.

The only 'CSS Info center' modification I added was to the bottom of my style sheet to change the background color.

.stats > .content {
   background-color: #450003;
}
I thought for sure it was a issue in the home template at first, possibly with the hr like you said, but maybe it is in part the modification to the CSS i'm using also like you've said. I just didn't think it would overwrite/mess anything else related to the info center if that's the case, but maybe it does?

I know somewhere in my home template I messed up the users currently online table, because after removing both my CSS modification, and the hr in my home template, that table is still spaced away too far down. This seems to happen only when there is no staff/members on. (shows only two lines in the table instead of three.)

-When I remove both the hr and the CSS modification I posted, when logged in, everything does align properly.
-When both no staff/members are on, the users online 24 hours table aligns properly, but not the users currently online table.

After a bit of fiddling, the only thing I can think, is first of all, I likely messed something up in my user currently online table.
(I was editing the home template quite a bit, so I likely removed one simple line. I justy can't find it. =/)

Second of all, I still have the original seperator/inner border added, which is probably causing issues especially cause the hr. (I don't know how to remove it for strictly the info center, I just changed the BG of info center to the same color.. xD

Yea I have no problem at all posting my template, I appreciate you taking the time to help me!
I know you probably don't need me to post the whole template, but better to be safe than sorry!
HOME TEMPLATE:
$[news]
{foreach $[category]}
$[category.anchor]
<div class="container boards">
<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>
<div class="content cap-bottom">
$[category.board_list]
</div>
</div>
{/foreach}



{if $[legend]}
<div class="container legend">
<div class="title-bar"><h2><font color="#F2FF00">(BUD) CUSTOM PAGES (WIP) </h2></font></div>
<div class="content">

       <table>
       <tr>
         
       <a id="LeadersZone" href="http://eobud.boards.net/page/Leaders_Zone" target="_blank" class="link2"> <font color="#590101"> BUD LEADERS SECTION</font> </a>
       &nbsp&nbsp    
       <a id="MembersZone" href="http://eobud.boards.net/page/Members_Zone" target="_blank" class="link2"> <font color="#590101"> BUD MEMBERS SECTION</font> </a>
       &nbsp&nbsp    
       <a id="CodePlayground" href="http://eobud.boards.net/page/Code_Playground" target="_blank" class="link2"> <font color="#590101"> CODE PLAYGROUND</font> </a>
       
       &nbsp&nbsp
       <a id="EmberRed" href="http://eobud.boards.net/page/Ember_Red" target="_blank" class="link2"> <font color="#590101"> Ember Red MMO</font> </a> </br>
       <span><img src="http://storage.proboards.com/5501826/a/4P1RStcdBZop65U8_q9v.gif" style="margin:0px 600px"><br/>
                                       
           
           
                                       <table>
                                           <tbody>
                                               
                                           </tbody>
                                       </table>
                                   </td>
                               </tr>
                           </table>
                       </td>
                   </tr>
               </tbody>
           </table>
       </div>
   </div>
{/if}


{if $[show_stats]}
   <div class="container stats">
       <div class="title-bar"><h2><font color="#F2FF00">EOBUD INFORMATION &amp; STATISTICS</h2></font></div>
       <div class="content">
           <table>
               <tbody>
                   <tr>
                       <td>
                           <table>
                               <tr>
                                   <td class="icon">$[image.stats]</td>
                                   <td class="info">
                                       <table>
                                           <tbody>
                                               <tr><th><font color="#FF0000">Total Topics: <font color="#fefd01">$[total_threads] &nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
<tr><th><font color="#FF0000">Total Posts: <font color="#fefd01">$[total_posts]</th></tr>
                                       {if $[last_updated_thread]}<tr><th><font color="#ffffff">Newest Post: $[last_updated_thread.recent_link] <br><font color="#ffffff">Post Created By: $[last_updated_thread.last_post.created_by]&nbsp&nbsp<font color="#000000">[$[last_updated_thread.last_post.created_on]] &nbsp $[last_thread.recent_link]</th></tr>{/if}
<tr><td>$[recent_threads_link] - $[recent_posts_link]</td></tr>
                                           </tbody>
                                       </table>
                                   </td>
                               </tr>
                           </table>
                       </td>
                       <td>
                           <table>
                               <tr>
                                   <td class="icon">$[image.members]</td>
                                   <td class="info">
                                       <table>
                                           <tbody>
                                               <tr><th><font color="#FF0000">Total Members: <font color="#fefd01">$[total_members]</td></tr>
<tr><th><font color="#FF0000">Most Users Online: <font color="#fefd01">$[most_users_online] <span class="small">$[most_users_online_date]</span></td></tr>
                                               <tr><th><font color="#ffffff">Newest Member: <font color="#fefd01">$[newest_user.name]</td></tr>
                                               <tr><th><font color="#ffffff">Welcome to EOGuide, $[newest_user]!</td></tr>
<tr><td>$[birthdays_today_link]</td></tr>
                                           </tbody>
                                       </table>
                                   </td>
                               </tr>
                           </table>
                       </td>
                   </tr>
                   
                       <td>
                           
                            <table>                                                              
                                <tr>
                                   <td class="icon">$[image.online]</td>
                                   <td class="info last">
                                       <table>
                                           <tbody>
                                               <tr><th><font color="#ffffff">Users Currently Online</th></tr>
<tr><td>$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, {if $[view_guests_online_link]}<a href="#" class="$[view_guests_online_link.class]">{/if}$[total_guests_online] Guest{if $[total_guests_online] != 1}s{/if}{if $[view_guests_online_link]}</a>{/if}.</td></tr>
<tr><td>
{foreach $[online_user]}
$[online_user]{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}$[online_user.comma]
{/foreach}                                                    
{if $[total_online_not_shown]}
, and <a class="$[view_active_members_link.class]" href="$[view_active_members_link.href]">$[total_online_not_shown] more...</a>                                                                                                      
                                                   {/if}  
                                           </tbody>
                                       </table>
                                   </td>
                               </tr>
                           </table>
                       </td>
                            <td>
                              <table>
                                   <tr>
                                   <td class="icon">$[image.online_24]</td>
                                   <td class="info last">
                                       <table>
                                           <tbody>                                                
                                               <tr><th><font color="#ffffff">Users Online in the Last 24 Hours</th></tr>
                                               <tr><td>$[total_staff_online_24] Staff, <a class="$[view_active_members_link_24.class]" href="$[view_todays_active_members_link.href]">$[total_members_online_24] Member{if $[total_members_online_24] != 1}s{/if}</a>, $[total_guests_online_24] Guest{if $[total_guests_online_24] != 1}s{/if}.</td></tr>
                                               <tr><td>{foreach $[online_user_24]}$[online_user_24]{if $[online_user_24.invisible]} <span class="small">(invisible)</span>{/if}$[online_user_24.comma]{/foreach}{if $[total_online_not_shown_24]}, and <a class="$[view_active_members_link_24.class]" href="$[view_todays_active_members_link.href]">$[total_online_not_shown_24] more...</a>{/if}</td></tr>
                                           </tbody>
                                       </table>
                                   </td>
                               </tr>
                           </table>
                       </td>
                   </tr>
               </tbody>
           </table>
       </div>
   </div>
{/if}

[Tumbleweed]

Thanks for that. 

You have a ton of red errors in there because you aren't nesting things right. You should have no red errors. I don't know if that is causing the issue but to give you an example this doesn't even have closing tags for the font and the <th> is closed with a </td>


This: <tr><th><font color="#FF0000">Total Members: <font color="#fefd01">$[total_members]</td></tr> 

It should be: <tr><th><font color="#FF0000">Total Members:</font> <font color="#fefd01">$[total_members]</font></th></tr>


I'll need to go through all your coding and fix the errors to see if that fixes anything.    

 Edit: Fixed all your nesting errors and there were a lot. It is important you close a span tag, font color tag within the td tag and make sure your breaks are either <br>  or <br/> and your nonbreaking spaces have the semicolon on the end.  Anyway, since I fixed all your errors, you may have to go back and change the font color as it may have messed a couple up.

Alright, weedfanatic . Seems ProBoards has some secret css that I can't over-ride without messing up where the icon sits in that last online in 24 hours section. If I add "vertical-align:top" to this class.....stats .content > table > tbody > tr > td.....in the default ProBoards css it affects only that last 24 hours box for some reason and it DOES fix where the Users Online in the Last 24 Hours sits so it is even with Users Currently Online, but like I said, the icon then follows suit.

I also tried targeting that last online in 24 hours by adding this..
.stats .content > table > tbody > tr > td:last-child { border-left-width: 0px; width: 57%; vertical-align:top;}

...which also fixed it but same issue, the icon was not in the middle then. Nothing I tried would budge that icon back to the middle using css. So I gave up.


So the only thing I could do to fix it was some gerrymandering with inline style with these two lines which is in the template I posted below.

<td class="icon" style="padding-top:8px;padding-bottom:8px; vertical-align:middle!important;">$[image.online_24]</td>

<td class="info last" style="padding-top:0px;padding-bottom:0px; vertical-align:top!important;">


Here is the whole Home template:



 
$[news]
{foreach $[category]}
$[category.anchor]
<div class="container boards">
<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>
<div class="content cap-bottom">
$[category.board_list]
</div>
</div>
{/foreach}



{if $[legend]}
<div class="container legend">
       <div class="title-bar"><h2><font color="#F2FF00">(BUD) CUSTOM PAGES (WIP)</font> </h2></div>
<div class="content">

        <table>
            <tbody>
        <tr>
          <td>
       <a id="LeadersZone" href="http://eobud.boards.net/page/Leaders_Zone" target="_blank" class="link2"> <font color="#590101"> BUD LEADERS SECTION</font> </a>
              
       <a id="MembersZone" href="http://eobud.boards.net/page/Members_Zone" target="_blank" class="link2"> <font color="#590101"> BUD MEMBERS SECTION</font> </a>
              
       <a id="CodePlayground" href="http://eobud.boards.net/page/Code_Playground" target="_blank" class="link2"> <font color="#590101"> CODE PLAYGROUND</font> </a>
            
       <a id="EmberRed" href="http://eobud.boards.net/page/Ember_Red" target="_blank" class="link2"> <font color="#590101"> Ember Red MMO</font> </a> <br>
       <span><img src="http://storage.proboards.com/5501826/a/4P1RStcdBZop65U8_q9v.gif" style="margin:0px 600px"></span><br>
                                       
            </td>
            </tr>
               </tbody>
           </table>
       </div>
   </div>
{/if}


{if $[show_stats]}
   <div class="container stats">
       <div class="title-bar"><h2><font color="#F2FF00">EOBUD INFORMATION & STATISTICS</font></h2></div>
       <div class="content">
           <table>
               <tbody>
                   <tr>
                       <td class="to_the_top">
                           <table>
                               <tr>
                                   <td class="icon">$[image.stats]</td>
                                   <td class="info">
                                       <table>
                                           <tbody>
                                               <tr><td><font color="#FF0000">Total Topics:</font><font color="#fefd01">$[total_threads]</font>     </td></tr>
                                               <tr><td><font color="#FF0000">Total Posts: </font><font color="#fefd01">$[total_posts]</font></td></tr>
                                            {if $[last_updated_thread]}
                                               <tr><td><font color="#ffffff">Newest Post: $[last_updated_thread.recent_link]</font> <br>
                                                 <font color="#ffffff">Post Created By: $[last_updated_thread.last_post.created_by]</font>  <font color="#000000">[$[last_updated_thread.last_post.created_on]]   $[last_thread.recent_link]</font></td></tr>{/if}
<tr><td>$[recent_threads_link] - $[recent_posts_link]</td></tr>
                                           </tbody>
                                       </table>
                                   </td>
                               </tr>
                           </table>
                       </td>
                       <td class="to_the_top">
                           <table>
                               <tr>
                                   <td class="icon">$[image.members]</td>
                                   <td class="info">
                                       <table>
                                           <tbody>
                                               <tr><td><font color="#FF0000">Total Members:</font> <font color="#fefd01">$[total_members]</font></td></tr>
                                               <tr><td><font color="#FF0000">Most Users Online:</font><font color="#fefd01">$[most_users_online] <span class="small">$[most_users_online_date]</span></font></td></tr>
                                               <tr><td><font color="#ffffff">Newest Member: </font><font color="#fefd01">$[newest_user.name]</font></td></tr>
                                               <tr><td><font color="#ffffff">Welcome to EOGuide, $[newest_user]!</font></td></tr>
<tr><td>$[birthdays_today_link]</td></tr>
                                           </tbody>
                                       </table>
                                   </td>
                               </tr>
                           </table>
                       </td>
                   </tr>
                   <tr>
                       <td>
                           
                      <table>
<tr>
<td class="icon">$[image.online]</td>
<td class="info last">
<table>
                                           <tbody>
                                               <tr><th><font color="#ffffff">Users Currently Online</font></th></tr>
<tr><td>$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, {if $[view_guests_online_link]}<a href="#" class="$[view_guests_online_link.class]">{/if}$[total_guests_online] Guest{if $[total_guests_online] != 1}s{/if}{if $[view_guests_online_link]}</a>{/if}.</td></tr>
<tr><td>
{foreach $[online_user]}
$[online_user]{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}$[online_user.comma]
{/foreach}                                                    
{if $[total_online_not_shown]}
, and <a class="$[view_active_members_link.class]" href="$[view_active_members_link.href]">$[total_online_not_shown] more...</a>                                                                                                      
                                                   {/if}  
                                                   </td>
                                               </tr>
                                           </tbody>
                                       </table>
</td>
</tr>
</table>
                       
                       </td>
<td>
<table>
<tr>
<td class="icon" style="padding-top:8px;padding-bottom:8px; vertical-align:middle!important;">$[image.online_24]</td>
<td class="info last" style="padding-top:0px;padding-bottom:0px; vertical-align:top!important;">
<table>
                                           <tbody>                                                
                                               <tr><th><font color="#ffffff">Users Online in the Last 24 Hours</font></th></tr>
                                               <tr><td>$[total_staff_online_24] Staff, <a class="$[view_active_members_link_24.class]" href="$[view_todays_active_members_link.href]">$[total_members_online_24] Member{if $[total_members_online_24] != 1}s{/if}</a>, $[total_guests_online_24] Guest{if $[total_guests_online_24] != 1}s{/if}.</td></tr>
                                               <tr><td>{foreach $[online_user_24]}$[online_user_24]{if $[online_user_24.invisible]} <span class="small">(invisible)</span>{/if}$[online_user_24.comma]{/foreach}{if $[total_online_not_shown_24]}, and <a class="$[view_active_members_link_24.class]" href="$[view_todays_active_members_link.href]">$[total_online_not_shown_24] more...</a>{/if}</td></tr>
                                           </tbody>
                                       </table>
</td>
</tr>
</table>
                       </td>
                   </tr>
               </tbody>
           </table>
       </div>
   </div>
{/if}




On a side note, I don't know why the tabbing is off when I post this in code tags here but hopefully when you paste it in your home template it will straighten up. Also, it's always a good idea to save your old home template, as a 'just in case' or 'reference' thing.

[weedfanatic]

Hey. First off, thank you very much for all your help and effort, I really do appreciate all the time you've put in to help me!

About red errors, it did not show any errors for me so I figured it was ok, since it worked fine like that before. Even though there was nesting issues like you said.

About the tag errors, thanks I did notice it didn't look right in alot of areas. I haven't learned/used html extensively so I didn't exactly know what tags caused the issues/how to fix it. I'll have to brush up on my html/css. xD

About backing up templates, I'm usually good for doing this with everything I do, but clearly not in this case. x(
I'll make sure to not be lazy, and back up templates even when just minorly modified, thanks.

About your fix with inline style, thanks I would have not known how to do that! It's odd there would be hidden CSS overwriting it, if that's the case.

It seems to be pretty close to working right, with the exact template you changed for me, thanks!
The only problem I notice currently, is the current users online tables text still seems to go too low when it has 2 lines.
(When current user online table has 2 lines and Online last 24 hours table has 3 lines)

-Ok now I know why it was messed up in the first place, and why your changes didn't work the way they should have/why you're thinking of CSS overwriting your changes.

-It's because I set a 90% forum width a WHILE ago. xD I've changed it to a fixed width now: 900px and that seems to have fixed it!

Thank you very much for all the help, and I wish I realized this sooner, so you didn't have to go through all the trouble you did..

Edit: It seems there is no available option in the CSS to change the Info Inner Border height.
Is there a way I can remove the info inner border that divides/seperates the left tables from the right tables, while keeping the inner border that divides/seperates the top tables from the bottom tables?
(Like in the first image in the original post.)

[Tumbleweed]

Jun 15, 2016 10:42:23 GMT -8 weedfanatic said:

Hey. First off, thank you very much for all your help and effort, I really do appreciate all the time you've put in to help me!

You're welcome. 

About red errors, it did not show any errors for me so I figured it was ok, since it worked fine like that before. Even though there was nesting issues like you said.
About the tag errors, thanks I did notice it didn't look right in alot of areas. I haven't learned/used html extensively so I didn't exactly know what tags caused the issues/how to fix it. I'll have to brush up on my html/css. xD

Just to clarify, there isn't an error that pops up per say. Just in the template anywhere where you see red. (The exception is in the wrapper template where there are two red errors that are acceptable(I guess you could say) and default with the template.

About backing up templates, I'm usually good for doing this with everything I do, but clearly not in this case. x(
I'll make sure to not be lazy, and back up templates even when just minorly modified, thanks.

About your fix with inline style, thanks I would have not known how to do that! It's odd there would be hidden CSS overwriting it, if that's the case.

I was sort of kidding about "hidden" css. I just couldn't find where to change it and finally gave up.

It seems to be pretty close to working right, with the exact template you changed for me, thanks!
The only problem I notice currently, is the current users online tables text still seems to go too low when it has 2 lines.
(When current user online table has 2 lines and Online last 24 hours table has 3 lines)

-Ok now I know why it was messed up in the first place, and why your changes didn't work the way they should have/why you're thinking of CSS overwriting your changes.

-It's because I set a 90% forum width a WHILE ago. xD I've changed it to a fixed width now: 900px and that seems to have fixed it!

Thank you very much for all the help, and I wish I realized this sooner, so you didn't have to go through all the trouble you did..

I'm just glad you figure it out and don't worry about me going through your stuff. I wouldn't do it if I didn't enjoy it.

Edit: It seems there is no available option in the CSS to change the Info Inner Border height.
Is there a way I can remove the info inner border that divides/seperates the left tables from the right tables, while keeping the inner border that divides/seperates the top tables from the bottom tables?
(Like in the first image in the original post.)

I knew there was something I forgot to tell you/or do and that was remove one tag I left inadvertently (so I could see the text) and the other some tags left intentionally. I know you found where I had the gray background and the intentional class tags was to test how to find a way to replace the hr tag you had. And so in comes the class I left that says,  "to_the_top". (It's in your template in the first td tag below the 'content".)

Anyway, If you go to your style sheet first go to about line 1302 and find this and the border should be changed to what I have it there:

.stats .content > table > tbody > tr > td { border:0px; border-right-width: 0px; border-bottom-width: 0px; width: 43%; }

and then add this to the bottom:

.stats .to_the_top{border-bottom:2px solid black!important;
}


Hopefully, that is what you were wanting.

[weedfanatic]

Jun 15, 2016 21:17:00 GMT -8 Tumbleweed said:

Jun 15, 2016 10:42:23 GMT -8 weedfanatic said:

Hey. First off, thank you very much for all your help and effort, I really do appreciate all the time you've put in to help me!

You're welcome. 

About red errors, it did not show any errors for me so I figured it was ok, since it worked fine like that before. Even though there was nesting issues like you said.
About the tag errors, thanks I did notice it didn't look right in alot of areas. I haven't learned/used html extensively so I didn't exactly know what tags caused the issues/how to fix it. I'll have to brush up on my html/css. xD

Just to clarify, there isn't an error that pops up per say. Just in the template anywhere where you see red. (The exception is in the wrapper template where there are two red errors that are acceptable(I guess you could say) and default with the template.

About backing up templates, I'm usually good for doing this with everything I do, but clearly not in this case. x(
I'll make sure to not be lazy, and back up templates even when just minorly modified, thanks.

About your fix with inline style, thanks I would have not known how to do that! It's odd there would be hidden CSS overwriting it, if that's the case.

I was sort of kidding about "hidden" css. I just couldn't find where to change it and finally gave up.

It seems to be pretty close to working right, with the exact template you changed for me, thanks!
The only problem I notice currently, is the current users online tables text still seems to go too low when it has 2 lines.
(When current user online table has 2 lines and Online last 24 hours table has 3 lines)

-Ok now I know why it was messed up in the first place, and why your changes didn't work the way they should have/why you're thinking of CSS overwriting your changes.

-It's because I set a 90% forum width a WHILE ago. xD I've changed it to a fixed width now: 900px and that seems to have fixed it!

Thank you very much for all the help, and I wish I realized this sooner, so you didn't have to go through all the trouble you did..

I'm just glad you figure it out and don't worry about me going through your stuff. I wouldn't do it if I didn't enjoy it.

Edit: It seems there is no available option in the CSS to change the Info Inner Border height.
Is there a way I can remove the info inner border that divides/seperates the left tables from the right tables, while keeping the inner border that divides/seperates the top tables from the bottom tables?
(Like in the first image in the original post.)

I knew there was something I forgot to tell you/or do and that was remove one tag I left inadvertently (so I could see the text) and the other some tags left intentionally. I know you found where I had the gray background and the intentional class tags was to test how to find a way to replace the hr tag you had. And so in comes the class I left that says,  "to_the_top". (It's in your template in the first td tag below the 'content".)

Anyway, If you go to your style sheet first go to about line 1302 and find this and the border should be changed to what I have it there:

.stats .content > table > tbody > tr > td { border:0px; border-right-width: 0px; border-bottom-width: 0px; width: 43%; }

and then add this to the bottom:

.stats .to_the_top{border-bottom:2px solid black!important;
}


Hopefully, that is what you were wanting.

Thank you very much, that is exactly what I was trying to do with the hr tag originally. This way is much better!
You have been such a big help!

I noticed that first code you posted in my css but had no idea what to do with it, or if it was the correct code to edit. D;

.stats .content > table > tbody > tr > td { border: @info_inner_border; border-right-width: 0px; border-bottom-width: 0px; width: 43%; }I would have never known about the last code you posted either. Thanks for saving me loads of trouble! xD

.stats .to_the_top{border-bottom:2px solid black!important;
}
Oh and thanks for the heads up about the tag. I'll remove it.

[Tumbleweed]

Jun 15, 2016 21:46:31 GMT -8 weedfanatic said:

Jun 15, 2016 21:17:00 GMT -8 Tumbleweed said:

You're welcome. 

Just to clarify, there isn't an error that pops up per say. Just in the template anywhere where you see red. (The exception is in the wrapper template where there are two red errors that are acceptable(I guess you could say) and default with the template.

I was sort of kidding about "hidden" css. I just couldn't find where to change it and finally gave up.

I'm just glad you figure it out and don't worry about me going through your stuff. I wouldn't do it if I didn't enjoy it.
I knew there was something I forgot to tell you/or do and that was remove one tag I left inadvertently (so I could see the text) and the other some tags left intentionally. I know you found where I had the gray background and the intentional class tags was to test how to find a way to replace the hr tag you had. And so in comes the class I left that says,  "to_the_top". (It's in your template in the first td tag below the 'content".)

Anyway, If you go to your style sheet first go to about line 1302 and find this and the border should be changed to what I have it there:

.stats .content > table > tbody > tr > td { border:0px; border-right-width: 0px; border-bottom-width: 0px; width: 43%; }

and then add this to the bottom:

.stats .to_the_top{border-bottom:2px solid black!important;
}


Hopefully, that is what you were wanting.

Thank you very much, that is exactly what I was trying to do with the hr tag originally. This way is much better!
You have been such a big help!

I noticed that first code you posted in my css but had no idea what to do with it, or if it was the correct code to edit. D;

.stats .content > table > tbody > tr > td { border: @info_inner_border; border-right-width: 0px; border-bottom-width: 0px; width: 43%; }I would have never known about the last code you posted either. Thanks for saving me loads of trouble! xD

.stats .to_the_top{border-bottom:2px solid black!important;
}
Oh and thanks for the heads up about the tag. I'll remove it.

Wait, I didn't say to remove anything, just to edit and add. 

But yes, just remove the bold and replace with border:0px;


.stats .content > table > tbody > tr > td { border: @info_inner_border; border-right-width: 0px; border-bottom-width: 0px; width: 43%; }

[weedfanatic]

Jun 15, 2016 21:50:38 GMT -8 Tumbleweed said:

Jun 15, 2016 21:46:31 GMT -8 weedfanatic said:

Thank you very much, that is exactly what I was trying to do with the hr tag originally. This way is much better!
You have been such a big help!

I noticed that first code you posted in my css but had no idea what to do with it, or if it was the correct code to edit. D;

.stats .content > table > tbody > tr > td { border: @info_inner_border; border-right-width: 0px; border-bottom-width: 0px; width: 43%; }I would have never known about the last code you posted either. Thanks for saving me loads of trouble! xD

.stats .to_the_top{border-bottom:2px solid black!important;
}
Oh and thanks for the heads up about the tag. I'll remove it.

Wait, I didn't say to remove anything, just to edit and add. 

But yes, just remove the bold and replace with border:0px;


.stats .content > table > tbody > tr > td { border: @info_inner_border; border-right-width: 0px; border-bottom-width: 0px; width: 43%; }

Sorry this part confused me. xD I knew right after removing that's not what you meant. haha

I knew there was something I forgot to tell you/or do and that was remove one tag I left inadvertently (so I could see the text) and the other some tags left intentionally. I know you found where I had the gray background and the intentional class tags was to test how to find a way to replace the hr tag you had. And so in comes the class I left that says, "to_the_top". (It's in your template in the first td tag below the 'content".)

And no worries, I understood what you meant the first time when you posted the first of the two css codes. I only posted the default version, because I was just saying, that before you posted the modified one, I had noticed the default code, but had no idea how to change it, or if that was the correct code to modify. That's all. Thanks again!!

[Tumbleweed]

O.k. Got it. And you're welcome.

[weedfanatic]

Jun 16, 2016 2:04:09 GMT -8 Tumbleweed said:

O.k. Got it. And you're welcome.

I hate to have to be a bother again in this matter, but I noticed I'm still having issues with the users currently online table being bumped down. When the users online last 24 hours table has more lines, the users currently online table still bumps down. Everything else seems to work perfectly regarding your changes to my home template/CSS though.


I've tried to mess around and fix it myself, but in this situation I'm useless. xD I noticed the same thing happens when in windowed mode, which slightly bothers me, but I mostly just care about this issue in full screen. I'm going to keep trying to get this to work, but any help would be appreciated, as I've failed up to this point. :*(

[Tumbleweed]

Jun 21, 2016 18:35:56 GMT -8 weedfanatic said:

Jun 16, 2016 2:04:09 GMT -8 Tumbleweed said:

O.k. Got it. And you're welcome.

I hate to have to be a bother again in this matter, but I noticed I'm still having issues with the users currently online table being bumped down. When the users online last 24 hours table has more lines, the users currently online table still bumps down. Everything else seems to work perfectly regarding your changes to my home template/CSS though.


I've tried to mess around and fix it myself, but in this situation I'm useless. xD I noticed the same thing happens when in windowed mode, which slightly bothers me, but I mostly just care about this issue in full screen. I'm going to keep trying to get this to work, but any help would be appreciated, as I've failed up to this point. :*(

I guess it isn't exactly surprising something would go awry when typically the current users/ 24 hour users had a full row for themselves. This will be hard for me to replicate since I just have test sites with no members but myself but I'll look at it again and see if I can come up with something. My fix was a hacky fix since I just couldn't override something in there but I do have a couple things to try so wish me luck.

And anyone else has some thoughts on it, feel free to jump in. 

[weedfanatic]

Jun 21, 2016 22:55:18 GMT -8 Tumbleweed said:

Jun 21, 2016 18:35:56 GMT -8 weedfanatic said:

I hate to have to be a bother again in this matter, but I noticed I'm still having issues with the users currently online table being bumped down. When the users online last 24 hours table has more lines, the users currently online table still bumps down. Everything else seems to work perfectly regarding your changes to my home template/CSS though.


I've tried to mess around and fix it myself, but in this situation I'm useless. xD I noticed the same thing happens when in windowed mode, which slightly bothers me, but I mostly just care about this issue in full screen. I'm going to keep trying to get this to work, but any help would be appreciated, as I've failed up to this point. :*(

I guess it isn't exactly surprising something would go awry when typically the current users/ 24 hour users had a full row for themselves. This will be hard for me to replicate since I just have test sites with no members but myself but I'll look at it again and see if I can come up with something. My fix was a hacky fix since I just couldn't override something in there but I do have a couple things to try so wish me luck.

And anyone else has some thoughts on it, feel free to jump in. 

Hey, sorry for the slow reply. Had a long day yesterday and needed sleep bad. xd
Ah it's no worries at all. I really appreciate everything you've done to help me!

I'm going to keep trying to test and figure out a hacky way to do this, I'm sure something could work. Yes, good luck to you on this if you decide to try. Don't feel like you have an obligation though!

About not having enough members, I just temporarily changed my two account names to 15+ characters each or w.e the max limit is. Saved me some troubles. =d Windowed mode with long character names would make it easier to replicate/test.

Thanks again for all your help, I'll keep trying to get this figured out one way or another!

[Tumbleweed]

I finally got some time to look at it again, was busy and then my cable internet was doing some work in my area and my internet was up, then down, then up a minute and down again all day until just a few minutes ago.

Actually, I went back to that test site I was messing with this on and I had created a couple other test members so I took your advice and made their names long (thanks for that) but right now they aren't showing up in 24 hour users so will see if they show tomorrow later or tomorrow. 

[weedfanatic]

Jun 22, 2016 23:22:34 GMT -8 Tumbleweed said:

I finally got some time to look at it again, was busy and then my cable internet was doing some work in my area and my internet was up, then down, then up a minute and down again all day until just a few minutes ago.

Actually, I went back to that test site I was messing with this on and I had created a couple other test members so I took your advice and made their names long (thanks for that) but right now they aren't showing up in 24 hour users so will see if they show tomorrow later or tomorrow. 

Sorry to hear about your internet, at least it's good now.

The members names aren't showing up in the 24 hours for you? From trying to fix/align things you mean?

I've been going through trial and error, but still no success on my part. =/