Hello there,

I have designed a small text over the pictures on my site, and I am facing a slight issue. So, I have this picture of a DJ, and over it, text in a span class. Unfortunately, I had some issues with the span when placing a border onto it, so I solved it with two span id's, firstline and secondline, because the borders were messed up slightly. There was no right border on the first line, and no left on the second line, so that plays a trick, but now I found that on the right outside of the second line, there is no border... again. Nametext is just a define for a custom font, while dj-andyrobinson defines the image and the margins associated with it, both of which work ok for now.

Code:
    <div>
      <a href="../andyrobinson/index.html" class="dj-andyrobinson">
	  <p id="nametext"><span id="firstline">Andrew</span><br><span id="secondline">Robinson</span></p>
      </a>
    </div>
And the span id's defined within css...
Code:
#firstline{
	border-bottom:none;
}

#secondline {
	border-top:none;
}
What this boils down to is no border between the lines where <br> tag is placed, which is kind of what I want, no border in between two lines. But the issue is, I'm struggling to make a border on the empty outside of the second line. I am assuming it is a problem with the span and br, where the span creates another mini span or something similar, which is a little bit annoying. If so, is there a way of solving it? For example, I get this, and I'd require a border on the red dot. Any idea how to make that? I hope you get where I'm coming from. Cheers, below is an example...

robinson1.jpg