Hi, Im trying to Code a page with a topbar and left links layout I want to move text over the topbar img by using a negative margin-top, It looks great in most browsers like FireFox and Netscape, But in IE it is covered by the Topbar img, I do not want to make it a BG img becase it will not strech or shrink, only cut, so my question is, How do you put text in a strechable image without actualy imbedding it into the img? Heres my code:
<title>Engineering Studies</title>
<link href="../snd/Styles1.css" rel="stylesheet" type="text/css">
</head>
<body>
<table height="100%" width="100%" border="0" cellpadding="0" cellspacing="0" id="mainbody">
<tr>
<td width="209" height="15"><img src="Tl.jpg" width="209" height="140"></td>
<td width="100%"><div align="left"><img src="TopBar.jpg" width="100%" height="140"></div></td>
</tr>
<tr>
<td width="209" background="Extention.jpg" class="centertop">
<p><a href="../index.htm" class="leftlinks">Home</a></p>
<p><a href="../Substation Design/index.htm" class="leftlinks">Substation Design</a></p>
<p><a href="../Transmission Line Design/index.htm" class="leftlinks">Transmission Line Design</a></p>
<p><a href="../Distribution Line Design/index.htm" class="leftlinks">Distribution Line Design</a></p>
<p><a href="../Relaying and Controls/index.htm" class="leftlinks">Relaying and Controls</a></p>
<p><a href="../Engineering Studies/index.htm" class="leftlinks">Engineering Studies</a></p>
<p><a href="../Project Management/index.htm" class="leftlinks">Project Management</a></p>
<p><a href="../Contact Us/index.htm" class="leftlinks">Contact Us</a></p>
<p><a href="../About Us/index.htm" class="leftlinks">About Us</a></p>
<p><a href="../Order/index.htm" class="leftlinks">Order</a></p>
<BR><BR><BR>
</td>
<td valign="top" width="100%">
<!--Body-->
<div class="title">Engineering Studies</div><BR>
<div class="body">*Content Required*</div><BR>
<div class="center"><div class="print2">© 2004 MK Power Solutions, All rights reserved</div></div>
</td>
</tr>
</table>
</body>
</html>
And Heres the relavent CSS:
.title
{
text-align:center;;
margin-top:-110px;
font-size:50px;
text-decoration:none;
color:#000000;
}
Thanks,
<title>Engineering Studies</title>
<link href="../snd/Styles1.css" rel="stylesheet" type="text/css">
</head>
<body>
<table height="100%" width="100%" border="0" cellpadding="0" cellspacing="0" id="mainbody">
<tr>
<td width="209" height="15"><img src="Tl.jpg" width="209" height="140"></td>
<td width="100%"><div align="left"><img src="TopBar.jpg" width="100%" height="140"></div></td>
</tr>
<tr>
<td width="209" background="Extention.jpg" class="centertop">
<p><a href="../index.htm" class="leftlinks">Home</a></p>
<p><a href="../Substation Design/index.htm" class="leftlinks">Substation Design</a></p>
<p><a href="../Transmission Line Design/index.htm" class="leftlinks">Transmission Line Design</a></p>
<p><a href="../Distribution Line Design/index.htm" class="leftlinks">Distribution Line Design</a></p>
<p><a href="../Relaying and Controls/index.htm" class="leftlinks">Relaying and Controls</a></p>
<p><a href="../Engineering Studies/index.htm" class="leftlinks">Engineering Studies</a></p>
<p><a href="../Project Management/index.htm" class="leftlinks">Project Management</a></p>
<p><a href="../Contact Us/index.htm" class="leftlinks">Contact Us</a></p>
<p><a href="../About Us/index.htm" class="leftlinks">About Us</a></p>
<p><a href="../Order/index.htm" class="leftlinks">Order</a></p>
<BR><BR><BR>
</td>
<td valign="top" width="100%">
<!--Body-->
<div class="title">Engineering Studies</div><BR>
<div class="body">*Content Required*</div><BR>
<div class="center"><div class="print2">© 2004 MK Power Solutions, All rights reserved</div></div>
</td>
</tr>
</table>
</body>
</html>
And Heres the relavent CSS:
.title
{
text-align:center;;
margin-top:-110px;
font-size:50px;
text-decoration:none;
color:#000000;
}
Thanks,