Text (On Background Image) Misbehaving

SpeedMule · Apr 25, 2004

I have two pieces of Information Text on one of my pages. The first sits on top of a .jpg image and keeps tidily within the size constraints of the image. The height of the text (controlled by an external CSS) is 12px. It is coded as follows:

<TD background="images/2_21.jpg" WIDTH=163 HEIGHT=99 ALT=""><div id="maintext">
I would excercise some caution and avoid these foods
for the moment.</div></TD>

For some reason the next string of text which should be displayed on my html page in a long single line actually appears as a tall, narrow column of wrapped text with only one or two words to a line. It has ignored the constraints of its .jpg - 549px wide x 22px high and is coded as follows:

<TD background="images/2_03.jpg" WIDTH=549 HEIGHT=22 ALT=""><div id="maintext">
Always check the sources of the product and ask questions if need be.</div></TD>

Can I stop this line of text breaking?
Any help would be much appreciated.

Note: Unlike with the correctly formatted text, if I right-click on the background of the problem text and select properties there is no sign of a .jpg. This background image should be long and shallow but instead is tall and narrow. Evidently, 03.jpg has not been displayed!

Vragabond · Apr 25, 2004

The only thing I can see is using id in two places on the same page. If that is continous code. Other than that, it is hard to tell what is wrong. The background should not really affect the behaviour of the element. Background fills the element but does not affect the size. If the width/height of the element are less than the image, the image will be cropped, if bigger, the image will be repeated (unless stated otherwise in css). Are what you are showing us two different tables? What is the css that is defining the maintext div? If you add borders to the second cell of your table, is the cell as big as you specified? If you put the

http://www.myserver.com/page/

images/2_03.jpg in your address bar, is the image displayed?

BillyRayPreachersSon · Apr 25, 2004

Make sure both the second TD and inside DIV have a width of 549 pixels and a height of 22 pixels.

Hope this helps,
Dan

SpeedMule · Apr 26, 2004

Thanks for your reply Vragabond. Yes, the two areas of code are different tables. Also, yes, the 2_03.jpg appears perfectly in the browser's address bar. In more depth, this code reads as follows:

<link rel="stylesheet"
type="text/css"
href="ts.css"/>

</HEAD>
<BODY> <div align="center">

<TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>

<TR>
<TD COLSPAN=4>
<IMG SRC="images/2_02.jpg" WIDTH=251 HEIGHT=22 ALT=""></TD>
<TD background="images/2_03.jpg" WIDTH=549 HEIGHT=22 ALT=""><div id="spen">
I would excercise some caution and avoid these foods
for the moment.</div></TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=22 ALT=""></TD>
</TR>

The style "spen" which controls the text is listed below.
("maintext" controls the other text I mentioned and the formatting is correct)
#maintext {color:white; font-family:arial; font-size:12}
#spen {color:black; font-family:arial; font-size:12}
#center {position:absolute; center}

Note in both cases, the background .jpgs are easily large enough to hold the formatted text.
Hope this sheds more light for you.
Cheers and thanks again.

ChrisHunt · Apr 26, 2004

Maybe it's objecting to the extra, unclosed <TR> tag at the start of the table. Maybe it's objecting to the image between two </TD> tags. Validate your page (

http://validator.w3.org/

) and see if that fixes anything.

Failing that, maybe it's the unnecessary <div> that's throwing it. Try this instead:

Code:

<TD background="images/2_03.jpg" WIDTH=549 HEIGHT=22 ALT="" id="spen">
I would excercise some caution and avoid these foods
for the moment.</TD>

More things to check: make sure you aren't referencing the same id in more than one place, or just use classes instead. Try using CSS to define the width/height/background of the cell instead of deprecated tag attributes. Don't forget to specify units for numeric non-zero CSS values:

Code:

#spen {color:black; font-family:arial; font-size:12[b]px[/b]}

Enough lines of enquiry to be going on with?

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

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!

Text (On Background Image) Misbehaving

SpeedMule

Technical User

Vragabond

Programmer

BillyRayPreachersSon

Programmer

SpeedMule

Technical User

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor