XF 1.2 Formatting Problem

[MistyMeanor]

So I am trying to customize our "Staff" pages and I got mine put up, and my Co-Admin's just fine. I copy/pasted my co-admin's text writeup about herself she sent me via PC and then just added the <p></p> tags to create new paragraphs. It's the Help Additional Pages add-on that allows you to write staff bios and have your bio sitting beside your avatar.

I copied and pasted the CSS code for the staff pages that was already within the Staff page markup just exactly the way it was, other than changing the avatar image url.

Here is an example of the co-admins writeup which is below mine:

<xen:comment>*** Start - Copy between tags to repeat for each staff member ***</xen:comment>
       
        <div class="staffWrapper">
            <div class="staffUserBlock">
                <div class="staffavatarHolder">
                    <a data-avatarhtml="true" itemprop="photo" class="avatar" href="data/avatars/l/0/3.jpg">
                    <span style="background-image: url(data/avatars/l/0/3.jpg);" class="img l"></span></a>
                </div>
                <p class="staffuserText">
                <em itemprop="title">Amanda Eads<br>(aka: AmandaDi)<br>Co-Administrator</em>
                </p>
            </div>
        <p>As someone who once worked with Misty on a forum, I jumped at the chance to do it again when she told me she was starting this forum and wanted me to be her co-administrator - I said "Let's do it!" We had a really successful exotic pet forum for the years it was up and I even helped out the new owner when Misty decided to sell it. So I would like to think that with the two of us behind this forum AND our great staff, you are going to see another great forum succeed.</p>
<p>A little about me - I was diagnosed with SMA Type 1 at 9 months of age. I have never walked or crawled. My parents were told I wouldn't reach my first, second, or third birthday! I celebrated my 30 birthday in Dec 2012! As an Army Brat, I have lived in Germany and Kentucky, but we made Texas our home because the weather was better suited for my health. I got my first electric wheelchair when I was just shy of my 3rd birthday. I was in and out of the hospital for 6 to 8 weeks at a time with pneumonias and collapsed lungs. When when I was 8 the doctor said it was time to get trached. While I was angry then, I now know he saved my life! I haven't been hospitalized since I was trached! I only vent at night and that is just to allow me the extra energy and a solid night's sleep. I am able to suction out all the junk that used to invade my lungs and refuse to evacuate. Other than my trach, I am tube free. I do have rods in my back though from a spinal fusion when I was 10. I also have had two kidney stones pass (felt like I was dying!), one that just hangs out, and a cluster of galstones that pay rent and don't have parties when no one is watching, so they are allow to stay for now.</p>
<p>I got my service dog, Callie, from Canine Assistance in 2004. After meeting a guy there who was in a chair and had a vehicle adapted for him to drive, it became my mission to drive my own car. In 2009 I made that mission a success. I got my first vehicle with hand controls that allowed me to drive. I LOVE the freedom it gives me!</p>
<p>In 2010, I graduated with my Masters Degree in Human Resource Management with a 4.0 ... I have a total of 4 degrees! I got my first real job in June 2011 - I am an adjunct professor at Texas A&M - Central Texas. I love my job! I teach a variety of HR classes as well as Business Ethics. Some of my classes are face to face and some are online.</p>
<p>Family is really important to me! I am a dance mom (though I am not a mom, just an aunt) to my lovely 10 year old niece Alexis! She is the light of my life and she keeps me very busy! My 5 year old niece Ashlynn is a terror, but I love her nonetheless. I have 2 other nieces and 3 nephews but they all live in IN & KY. I have 2 brothers (one passed in Dec) and 1 sister. My brother, father of Alexis and Ashlynn, lives in Texas near me and my sister is in Indiana. I have 2 more nieces and 3 nephews in Indiana too.</p>
<p>I think that is me in as short of a message as I could get it!</p>
<hr />
        </div>
       
        <xen:comment>*** Finish - Copy between tags to repeat for each staff member ***</xen:comment>

So then moved on to one of my moderators. Now same thing... mod sent me a PC with the writeup text she wanted included. I copy/pasted it, made sure I had all beginning and ending code in correctly... but no matter what I try to do, it formats it in the wrong font and also will not do paragraph spacing. With a lot of work, I finally got it to put the spacing, but only if I used the <br> page break code. But, I tried copy/pasting her text in to "Pages" (Apple's "word") and that didn't work, and in TextEdit where I removed all formatting and repasted it again... same thing. It needs to be in the same font as the forum, Georgia 12pt.

The ONLY think I can think of is this particular moderator (as well as a few others, and unlike me and co-admin) have to use on-screen keyboards to type. They cannot use a standard computer keyboard. Although I have no idea why in the world it would do this just due to that. I asked the mod if she typed it up in any kind of 3rd party text editor, and she didn't. She said she typed it all up direct in to the PC message area.

Is there one tiny piece of html/css code I am overlooking that may be causing this? Or have I copy/pasted the beginning code and finish code for the staff pages incorrect or left on too much of one at beginning or end, or taken off too much? I also had thought that maybe the part about "StaffUserText" could be causing it, but I changed that to Georgia and it didn't work either...

So here is the code for hers:

<xen:comment>*** Start - Copy between tags to repeat for each staff member ***</xen:comment>
       
        <div class="staffWrapper">
            <div class="staffUserBlock">
                <div class="staffavatarHolder">
                    <a data-avatarhtml="true" itemprop="photo" class="avatar" href="data/avatars/l/0/29.jpg">
                    <span style="background-image: url(data/avatars/l/0/29.jpg);" class="img l"></span></a>
                </div>
            <p class="staffuserText">
                <em itemprop="title">Catherine Alexander<br>(aka: Catherine)<br>Moderator</em>
                </p>
            </div>
<p>I got involved with No Muscles? No Limits! not long after it first began; I saw about it on a Facebook MD group and the organisation and privacy elements really appealed to me. I became one of the moderators a little while after that. Because I'm from the UK, international members and night owls will probably see me on the forum the most, so if you see me online and need help or fancy a chat, just send me a "Conversation" (private message)! As well as moderating the entire forum, mostly my specific subforums, I love welcoming new members to the community, and starting and replying to threads about anything really!</p>
<p>A little about me - I'm 22 years old and live in the north west of England. I have congenital muscular dystrophy, which I was diagnosed with at around 18 months of age. My type of muscular dystrophy was quite rare at this time, so my parents were given a fairly bleak prognosis, which kept changing as I got older, the last one being my teenage years after which they gave up trying to predict the future! My condition has slowly deteriorated as I've got older - I use a ventilator as a Bipap 14-18 hours a day, have a cough assist machine and employ PAs for 24 hour care. I also experience severe chronic pain all over my body, especially in my back and hips.</p>
<p>I was brought up just like my brothers and sister, so I've always believed that practically everything was possible for me to do, one way or another. Plus we have always been very competitive, which definitely made me more determined to do as well as my siblings have. My proudest achievement is moving one and a half hours away from home to go to university. I had 24 hour care provided by volunteers, so I was kind of thrown in at the deep end, dealing with staff training and problems for the first time, as well as being a homesick fresher. It wasn't easy, I experienced lots of problems with my volunteers but I'm so glad I persevered! Unfortunately, I was unable to graduate with honours as I began getting severe hip pain 6 months before the end of my final year, but I still feel university is much more than just gaining a degree; I definitely became more confident and learned a lot about how to deal with having PAs. After I had to drop out of university I lived with my dad and sister for 18 months, and finally moved into my own adapted bungalow in July 2013, where I live independently, supported by a team of PAs which I employ myself.</p>
<p>In my free time, I love spending time on my various gadgets - I'm a bit of a geek, so you won't often see me without some piece of technology! I like watching TV; I'm into stand-up comedy and panel shows, sitcoms, some drama shows and documentaries. I'm also quite creative, mostly drawing, painting and creative writing, and I've just started writing a blog. Outside of home, I love clothes and shoe shopping, getting my nails done and going out for meals with family or friends.</p>
<hr />
        </div>
       
        <xen:comment>*** Finish - Copy between tags to repeat for each staff member ***</xen:comment>

And here is how it shows on the page:

 

[Neil E.]

I copied and pasted the CSS code for the staff pages that was already within the Staff page markup just exactly the way it was, other than changing the avatar image url.

I don't know anything about the addon you are using, but shouldn't the CSS exist only in one specific place? By this I mean the CSS template for the addon (or in EXTRA if you are further modifying it). You would have several sets of HTML code in their respective divisions and the CSS would apply to those divisions. That way all the divisions of a certain name would share the same styling.


HTML template would have:
<div class="staffWrapper">
<div class="staffUserBlock">
<div class="staffavatarHolder">

CSS template would have:
.staffWrapper
{
your styling here
}

.staffUserBlock
{
your styling here
}

.staffavatarHolder
{
your styling here
}