Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Border length of text 1

Status
Not open for further replies.
dmacster

dmacster

Technical User
Jan 28, 2005
670
US
Is there a way to make a top and bottom border that is only as wide as the line of text? I've been trying and can't seem to get the border above and below (no side borders) to only extend however wide the text is.

I also tried using overline and underline, which worked for length, but butted right onto to the text. Or does anyone know of how to make the overline and underline properties offset - sort of like a baseline shift in programs like Quark?

Thanks,
Donna
 
Sort by date Sort by votes
This example should do it across browsers for you:

Code: 
.myHead {
  width:auto;
  font-size:1.1em;
  line-height:1.6em;
  border-top:1px solid black;
  border-bottom:1px solid black;
  padding: 0.5em;
}
...
<h3 class="myHead">Some text goes in here</h3>

Hope that makes some sense!
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
I'll try it, Jeff. Thanks. I'll let you know how it works.

Donna
 
Upvote 0 Downvote
Jeff -

I tried that, but could not get it to display - copied your css exactly - but for the name (mine's a paragraph class)

CSS
Code: 
.address {
  width: auto;
  font-size: 1.1em;
  line-height: 1.6em;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 0.5em;
}

and HTML
Code: 
<body>
<p class="address">here's some stuff that would have border above and below hoping</p>
<p class="address">only to have this run the length of the text</p>
</body>

Ideas?

Thanks,
Donna
 
Upvote 0 Downvote
It looks like it's a non-starter. You will have to set the widths of each block-level item manually (use ems so they scale). The borders work... just not the widths... sorry :(

Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks anyway Jeff - I appreciate your timely answers.

I'll see how I can work it.


Donna
 
Upvote 0 Downvote
If you want borders only around text, you should add that to an inline element, such as span:
Code: 
<p><span style="border-top: 1px solid black; border-bottom: 1px solid black;">here's some stuff that would have border above and below hoping</span></p>
 
Upvote 0 Downvote
Most excellent, Vrag! A star to you - it works.

Thanks,
Donna
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
814
spamjim
spamjim
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
253
jjgupta915
jjgupta915
lupidol
  • Locked
  • Question
Table's title row's rounded corners border 1
Replies
2
Views
192
lupidol
lupidol
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
248
ChrisHirst
ChrisHirst
coldbohemia
  • Locked
  • Question
I'm inserting a text file into a we
Replies
2
Views
181
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top