• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

CSS Help Text Over IMG

blah19

Still learning
#1
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">&copy; 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,
 
#2
MSIE doesnt support CSS properly, it has the poorest quality CSS support of any other currently existing browser.
Welcome to the world of web design and the ensuing headaches caused by MSIE's buggy CSS implementation, this is commonly known as the IE-Factor

If MSIE had an EditCSS plugin then I would give it a shot to try and make it work, but it doesnt so I cant really do much. Basically its a case of you going though and messing with little pieces of code here and there until it works on both, or you could use PHP to test the User Agent string for MSIE and serve a different css file based on that. Maybe with less candy in it, or simply alternative css to obtain the same effect

PHP:
<?php 
$css = "style.css";

if (eregi("MSIE", $_SERVER['HTTP_USER_AGENT'])) {
    $css = "msie.css";
}
?>
Then in your HTML code use this (as I see you are using HTML and not XHTML) in your tag to include the style sheet
PHP:
<link href="<php? echo $css; ?>" ref="stylesheet" type="text/css">
 

Members online

No members online now.

Latest posts

Latest profile posts

Hello, is there anybody in there? Just nod if you can hear me ...
Xie
What a long strange trip it's been. =)

Forum statistics

Threads
61,961
Messages
673,239
Members
89,016
Latest member
ernestrojasn