Span br issue

HTML & CSS
1

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.

    <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…


#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…

2

I can’t see any way to do it in CSS, given your requirement that it overlays an image. If you could have a white background inside the box then it’s possible, by giving the first <span> {position:relative; top:1px; background:white;} and leaving the top border on the second <span>, which pulls the top span down by 1px so that it covers up the top border of the second <span>. Of course, that only works when you know which line of text is going to be longer.

I would say your two options are: (1) put the text in a <div> and have a rectangular box surrounding the whole lot, or (2) incorporate the text as part of the graphic with the border that you want.

3

Alright, I see, I’ll try making a div then in such case and see what the result will be like. I thought that this might be one of the ways out of this, however I did not want to suggest it, I thought it maybe possible to fix my code.

Thanks for your reply.

4

HI,

If I understand correctly then for ie8+ you could do something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {
	float:left;
	overflow:hidden;
	text-transform:uppercase;
	margin:10px;
	position:relative;
}
span {
	float:left;
	clear:left;
	border:1px solid red;
	border-bottom:none;
	position:relative;
	padding:5px;
}
span + span {
	border:1px solid red;
	border-top:none;
}
span:after, b.after {
	content:" ";
	display:block;
	position:absolute;
	left:100%;
	bottom:0;
	height:1px;
	width:999em;
	background:red;
}
span + span:after, span + span .after {
	top:0;
	bottom:auto;
}
/* ie7 fix */
span {  zoom:expression(  runtimeStyle.zoom=1,  insertAdjacentHTML('beforeEnd', '<b class="after"></b>')  );
}
/* if ie6 support is needed then drop the adjacent selector and add classnames to the span instead */
</style>
</head>

<body>
<p><span>Andrew </span><span>Robinson</span></p>
<p><span>Andrew with longer text </span><span>Robinson</span></p>
</body>
</html>

(I’ve added an expression fix for ie7 if support was required.)

Re this code:


<a href="../andyrobinson/index.html" class="dj-andyrobinson">
	  <p id="nametext"><span id="firstline">Andrew</span><br><span id="secondline">Robinson</span></p>
      </a>

Unless you are using html5 then it is not valid to nest a p element inside an anchor and indeed even if you are using html5 it’s still a risky thing to do because a lot of browsers can’t handle it nicely. I’ve seen many bugs now because of this html feature. Most times there is no need anyway as you can make the anchor display block and put it inside the block element anyway.