User Profile Tabs

Try changing it to show each line under another. The civil war skin does something like that:

http://efiction.hugosnebula.com/preview/viewuser.php?uid=1

and RedSimplicity:

http://efiction.hugosnebula.com/preview/viewuser.php?skin=RedSimplicity&uid=1

You should be able to download those on Tammy's site. Look through the 3.0 skins on this forum to find them and find where to download them from.

For your first problem, you need more margins or padding on #tabs span.(It doesn't matter really which, but I'd go with padding.) You have the font size set to 12, but your margins/padding only add up to 10 and that's why the text is overlapping. If you don't want more margins/padding on the right and left, you can just add margins/padding to the top and bottom by using the CSS shorthand "margin: Xpx Ypx" where X is the top/bottom and Y is the right/left. Same thing for padding.

The second issue sounds like a browser problem and I don't know if there is any way for you to fix it. It works fine in Firefox.

For your first problem, you need more margins or padding on #tabs span.(It doesn't matter really which, but I'd go with padding.) You have the font size set to 12, but your margins/padding only add up to 10 and that's why the text is overlapping. If you don't want more margins/padding on the right and left, you can just add margins/padding to the top and bottom by using the CSS shorthand "margin: Xpx Ypx" where X is the top/bottom and Y is the right/left. Same thing for padding.

The second issue sounds like a browser problem and I don't know if there is any way for you to fix it. It works fine in Firefox.

... Are you sure?

I've changed the padding on #tabs span to 5px, over all. Take a look at the link again and let me know if this is an improvement. http://www.themasque.net/efiction/viewuser.php?action=storiesby&uid=5

Also, I don't believe it's really a browser issue, as something similar happens in Firefox but rather than each character it'll split at the spaces between words. Here's a screenshot (taken before I added the extra padding)

Regarding breaks, that's what it's supposed to do (at least in Firefox). It breaks between words. I don't know of any way to make it treat the <span> as one element and break only after the tag is closed. If you don't want it to do that change the coding that separates each item from <span> to an unordered list. Look at my site to see if it works correctly for you:
http://www.timeturner.net/fics/viewuser.php?action=storiesby&uid=2 (Works for me in Firefox...)

Changing from <span> to a list will also allow you to set the margins so they the items don't overlap when moving to a new line. I told you wrong before though. You shouldn't have the smallest amount of padding (1-2px), then larger margins. This will make them look like they are sitting on top of each other. The padding is what's overlapping. If you don't want to use a list, then you'll need one element for margins, and one for padding so you'd have to add another tag to separate each item.

Where would I go to change them from spans to a list?

I thought it'd be profile.tpl, but it seems to refer to "{authorfields}" and I'm not sure where to edit that?

It's user.tpl. Mine looks like this

<!-- INCLUDE BLOCK : header -->
<div id="profile">
<!-- INCLUDE BLOCK : profile -->
{adminoptions}

</div>

<div id="tabs">
<ul>
<!-- START BLOCK : paneltabs -->
<li {class}>{linkcount}</li>
<!-- END BLOCK : paneltabs -->
</ul>
</div>
<div id="sort">{sort}</div>
{output}
<!-- INCLUDE BLOCK : listings -->
<!-- INCLUDE BLOCK : footer -->

This is the CSS:

/* The following declarations control the tabs */
#tabs {margin: 10px;}

#tabs ul {
padding: 1px 5px;
margin: 0px;
border-bottom: 1px solid #9F3E18;
font-size: .9em;
font-weight: bold;
}

#tabs li {
list-style: none;
margin: 1px;
padding: 3px;
display: inline;
}

#tabs li a {
padding: 3px;
background: #FBF0DC;
border: 1px solid #9F3E18;
color: #9F3E18;
text-decoration: none;
}

#tabs li a:hover {color: #9F3E18; background: #FBF0DC; }

#tabs #active a {background: #9F3E18; color: #FBF0DC;}

You can use the white-space CSS tag to keep the span from wrapping in the middle.

white-space: nowrap;