Code broke without me changing anything

[Kitten4u]

Forum Link

This morning when I looked at my staff box in that tabbed table in the header of the forum, the code looked completely wrong. The names of the staff members are supposed to be next to the avatars, right above that black box with the text. I haven't touched the code since opening the site, and while I've modified the home template a bit my test site has the same issue and I haven't touched that site since the actual site opened.

Relevant bits of code:

Table itself
<div id="pro_staff" style="display: none; height: 290px;">
<table><tr><td class="staff-box" style="text-align: center; width: 300px; padding: 0px 100px 0px 120px;">
           <img src="http://s26.postimg.cc/t78lby3s5/nueav3.png">
           <a href="http://notoriousrp.boards.net/conversation/new/1">Kitten4u</a>
           <div>Kitten4u is the forum's code kitten.  She handles visual design and community management.  She enjoys ominous avatars and lurking.</div>
       </td>
       <td class="staff-box" style="text-align: center; width: 300px;">
           <img src="http://s30.postimg.cc/90rdiv819/Ip3vo3n100.png">
           <a href="http://notoriousrp.boards.net/conversation/new/2">Serpentarius</a>
           <div>Serp does balance, design, and events.  He has an unhealthy number obsession.  Currently overcoming his lurking tendencies.</div>
       </td></tr>
       <tr><td colspan="2" class="all-staff-link">
        <a href="http://notoriousrp.boards.net/conversation/new/1,2">Click this to PM all staff, click a name to PM one staff member</a>
       </td></tr></table>
</div>

CSS
.staff-box
{
   text-align: center;
   display: inline;
}
.staff-box img
{
   width: 100px;
   height: 100px;
   border: 10px solid #4697d9;
   float: left;
}
.staff-box a
{
   vertical-align: top;
   font-family: 'Trade Winds';
   background: #4697d9;
   color: #1a1a1e!important;
   text-align: center;
   font-size: 18px;
   padding: 5px;
   display: inline-block;
   margin-left: -20px!important;
   width: 150px;
   -webkit-transition: 300ms linear 0s;
   -moz-transition: 300ms linear 0s;
   -o-transition: 300ms linear 0s;
   transition: 300ms linear 0s;
}
.staff-box a:hover
{
   color: #1a1a1e!important;
   background: #dbdc10;
}
.staff-box div
{
   display: inline-block;
   background: #1a1a1e;
   height: 78px;
   border-right: 1px solid #000000;
   border-bottom: 1px solid #000000;
   vertical-align: top;
   margin: 0px;
   padding: 3px;
   width: 153px;
   float: left;
   text-align: justify;
   font-size: 11px;
}

[Tumbleweed]

Kitten4u ,

Sometimes our browsers cache a page and it looks right not showing the changes you may have made and then you come back later after all old data is deleted when you shut down the browser and the errors show up. Not saying this is what happened but just what I've experiences. I always do a hard refresh to make sure my changes are showing.

Anyway, try making this part inline-block instead of just inline, like you have it.


.staff-box
{
text-align: center;
display: inline-block;
}

[Kitten4u]

Yeah, I figured it was something like that since I had to restart my browser yesterday.  It still makes me paranoid about how long it's been like that since I still haven't touched it since the site opening.

Regardless, changing that line has fixed it.  Glad to have an easy problem for once!  Thanks!