html question?????? PLEASE HELP?

  • Thread starter Thread starter cwebbatya
  • Start date Start date
C

cwebbatya

Guest
Building a website, looking to put text on an image I created. I've tried all sorts of different ways of coding to do this, heres an example

<body>
<div id="container">
<div><img src="cow.jpg" /></div>
<div style="position: absolute; left: 20px; top: 160px;">
<span style="font-weight: bold; color: #fff;">Moooooo...</span>
</div>
</div>
</body>


**PROBLEM being, when I switch from Firefox to Internet Explorer the placement of the text is different on the two? I'm frustrated. The settings are the same on each browser. Whats going on. Please help??
 
Okay, there are two reasonably quick ways, good practice and bad practice...

Good practice:
Create a div for the text and set the image as the background:
<div style="background: url('cow.jpg') no-repeat;">Moooooooooo...</div>

Bad practice:
Position both elements relatively. Assign the image a z-index of -1 and assign the text negative-positions to float it over the image, with a z-index of 0.
 
<body>
<table width="200">
<tr>
<td background="cow.jpg">Hello This is a Test </td>
</tr>
</table>
</body>
 
Back
Top