CSS Help Text Over IMG

blah19 · 12 Aug 2004

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%">

<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,

Geffy · 12 Aug 2004

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">

Khayman · 12 Aug 2004

is this code live anywhere so i can see what its supposed to be doing?

Glaanieboy · 12 Aug 2004

Nice little blog about the IE factor. Does there happen to be a list with known CSS/HTML bugs in IE?

blah19 · 1 Sep 2004

Hey, I found an alt way to do it, I used absolute positioning, take a look
Mk Power Solutions
thanks for the help all.

blah19 · 1 Sep 2004

err. sorry, go to one of the links... Thats where i used it About Us

CSS Help Text Over IMG

blah19

Still learning

Geffy

OSNN Veteran Addict

Khayman

I'm sorry Hal...

Glaanieboy

OSNN Veteran Addict

blah19

Still learning

blah19

Still learning

Members online

Affiliates

Latest profile posts

Forum statistics