Making text element taller

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Scott Rankin - 29 Aug 2003 14:33 GMT

Hello All,

I have a problem that I've been struggling with for a couple of days.
The situation is such: I have an image (19 pixels high) that is
followed by a text element which has a background image, also 19
pixels high. HTML looks like so:

<html>
<style type="text/css">
img
{
vertical-align: top;
}

span
{
font-size: 9px;
color:#000000;
background-image: url('2.gif');
}
</style>

<body style="background-color: #FF0000;">
<img src="1.gif"><span>Hello World</span>
</body>

</html>

The problem is that while the background image (2.gif) is 19 pixels
high, the text, being 9 px, does not become the same height as the
image, so some of the background image is missing. Does anybody know
of a way to make the text the same height as the image? I've tried
including the image in the <span> but then the background image shows
up behind the image, which I don't want.

Any help would be most appreciated!

Scott

Reply to this Message

Chris Morris - 29 Aug 2003 14:57 GMT

> The problem is that while the background image (2.gif) is 19 pixels
> high, the text, being 9 px, does not become the same height as the
> image, so some of the background image is missing. Does anybody know
> of a way to make the text the same height as the image? I've tried

font-size: 19px;

Possibly you're asking how to make the text *container* the same
height as the image.

line-height: 19px;

Now, there's a problem here if the user re-sizes the text or ignores
the text size specified, so test this one carefully at some larger
font sizes.

Signature

Chris

Reply to this Message

Jim Dabell - 29 Aug 2003 15:47 GMT

> The situation is such: I have an image (19 pixels high) that is
> followed by a text element which has a background image, also 19
> pixels high. HTML looks like so:

Posting a URL is preferred to pasting code into your post.

> <html>

[snip]

Please ensure your HTML and CSS is valid before asking for help.

<URL:http://validator.w3.org/>

Apart from anything else, you are triggering "quirks mode", where browsers
intentionally get things wrong to try and compensate for author mistakes.

[snip]

> span
> {
> font-size: 9px;

Setting font size in pixels is considered to be poor design. Read the
archives for this newsgroup to find out why.

[snip]

> The problem is that while the background image (2.gif) is 19 pixels
> high, the text, being 9 px,

The text will often _not_ be 9px. Your stylesheet is a set of suggestions,
nothing more. One of the most common ways to assert your preferences as a
user is to enforce a minimum font size or override the author's font-size
suggestions.

> does not become the same height as the
> image, so some of the background image is missing. Does anybody know
> of a way to make the text the same height as the image?
> I've tried including the image in the <span> but then the background image
> shows up behind the image, which I don't want.

[snip]

Include the image in the <span> element, and set a background for the image.

Signature

Jim Dabell

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2003

Making text element taller