CSS Help Text Over IMG

blah19 · August 12th, 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** · August 12th, 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 Code:


			
<?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 Code:


			
<link href="<php? echo $css; ?>" ref="stylesheet" type="text/css">

**Khayman** · August 12th, 2004

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

**Glaanieboy** · August 12th, 2004

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

blah19 · September 1st, 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 · September 1st, 2004

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

August 12th, 2004	Top \| #1
blah19 Still learning Joined: August 2004 Location: Ohio Posts: 5 Reputation: 0 Power: 92	CSS Help Text Over IMG 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,

August 12th, 2004	Top \| #2
Geffy OSNN Veteran Addict Joined: March 2002 Location: United Kingdom Posts: 7,805 Reputation: 1490 Power: 213	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 Code: `<?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 Code: `<link href="<php? echo $css; ?>" ref="stylesheet" type="text/css">`  • blog • tumblog • lastfm • flickr • #rubyonrails • @twitter "I could be replaced with a very small shell script"

August 12th, 2004	Top \| #3
Khayman I'm sorry Hal... Joined: January 2002 Location: England Posts: 5,514 Reputation: 1210 Power: 191	is this code live anywhere so i can see what its supposed to be doing? "I'm on the server side. I don't know what side you're on"

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
new -> Text Document	Tuffgong4	Windows Desktop Systems	2	September 6th, 2007 3:23pm
big text everywhere.	bobsalot	Windows Desktop Systems	1	April 30th, 2006 9:26pm
cd text?	Kush	Windows Desktop Systems	2	July 17th, 2003 6:30pm
CD-Text	ZipTriX	General Hardware	1	August 22nd, 2002 10:35pm
Weird Text...	darklink1017	Windows Desktop Systems	3	July 30th, 2002 2:35am

Latest News Posts

Latest Forum Posts

Latest Member Blogs

August 12th, 2004	Top \| #4
Glaanieboy OSNN Veteran Addict Joined: March 2002 Location: The Netherlands Posts: 2,626 Reputation: 270 Power: 150	Nice little blog about the IE factor. Does there happen to be a list with known CSS/HTML bugs in IE?

September 1st, 2004	Top \| #5
blah19 Still learning Joined: August 2004 Location: Ohio Posts: 5 Reputation: 0 Power: 92	Hey, I found an alt way to do it, I used absolute positioning, take a look Mk Power Solutions thanks for the help all.

September 1st, 2004	Top \| #6
blah19 Still learning Joined: August 2004 Location: Ohio Posts: 5 Reputation: 0 Power: 92	err. sorry, go to one of the links... Thats where i used it About Us