CSS Layering question - Netscape vs. IE

I am trying to layer text over an image.  The image is displayed as a simple <IMG SRC> statement, and the text uses the following stylesheet:

.indent  {
       font-size : 14px;
      margin-top : -20px;
       margin-left : 50px;
       font-family : Arial;
}

This works perfectly in IE4 -- the text is indented 50 pixels, and overlaps the bottom 20 pixels of the graphic.

In Netscape (4.0), however, the image lays on top of the text instead of the text laying on top of the image.  

How can I specify the text to be on top of the graphic in both browsers?

-Elliott
LVL 1
jelloAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

oubelkasCommented:
To let this work under NS use the <ILAYER> </ILAYER> tags.

Joseph
0
jelloAuthor Commented:
Joseph...

Tell me how, and pick up your points, my friend.

-Elliott
0
jelloAuthor Commented:
Edited text of question.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

rmgalanteCommented:
Try surrounding the IMG tag with DIV tags and give this DIV id a z-index of 0.  Then give your .indent class a z-index of 1.
0
oubelkasCommented:
Well, just replace the tags, but since you don't want this, I'll check out the let it work both on IE and NS.

Joseph
0
jelloAuthor Commented:
no joy  :(

I added

z-index : 1

to my indent class, and surrounded my IMG tag with

<DIV STYLE="z-index=0">

Any other ideas?

-Elliott
0
oubelkasCommented:
Maybe this :

<html>
<head>
<style type="text/css">
..indent  {
  font-size : 14px;
  margin-top : -20px;
  margin-left : 50px;
  font-family : Arial;
}
</style>
</HEAD>
<body>
<img src="myimage.jpg">
<script language="javascript">
<!--
 if (navigator.appName=="Netscape") {
   document.write("<ilayer id='myNSlayer' CLASS='indent'>text</ilayer>");
}
 else if (navigator.appName=="Microsoft Internet Explorer") {
   document.write("<div id='mylayer' CLASS='indent'>text</div>");
}
//-->
</script>

</body>
</html>

Joseph

0
oubelkasCommented:
Mind this :

...ident it must be .ident of course
0
jelloAuthor Commented:
Ok we're getting closer.

A couple of problems still ingering...

1)The text has hyperlinks and parenthases in it.  The angle brackets are gumming up the script.

2)When a hyperlink portion of the text is over the graphic in IE, it LOOKS like a hyperlink, but it is not clickable.

(as a side note, this whole thing is frustrating the $#!+ out of me.  I upped the point value on this question.)
0
larholmCommented:
1. Put a \ before every special character inside the document.write.

F.eg.

   document.write("<ilayer id='myNSlayer' CLASS='indent'><a href=\"blabla.html\" onmouseover=\"doOver\(\)\"> text</a></ilayer>");


2. Put the z-index property back and give the text the highest z-index number.

/THor
0
oubelkasCommented:
You can escape them with \ or use ' instead of "

Then this must be solved and I don't think it'd be FAIR if larholm would get the points.

larholm> I don't know why you posted this as an answer, because you only solved a little bit of the problem, I gave the code and a question came out when I gave it, you posted an answer on this and this is cool, but you'd better post it as a comment.

jello> I hope you don't just accept larholm's answer, if you have any questions left on this, just ask me ok?

Joseph
0
jelloAuthor Commented:
Hi guys.

I won't be able to actually try any of ths until Monday, so I'm afraid we have to sit tiight until then.

Larholm, I agree with Joseph.  He has been working on this with me, and has been steering me in the right direction.  I appreciate your help, and I'll throw you a few points for it, but Oubelkas will most likely be getting the full value of the question.

I'll be back Monday after testing these ideas out, and I'll let you guys know how it all works.

-Elliott
0
oubelkasCommented:
OK, glad you noticed.

Joseph
0
larholmCommented:
Hi all

I posted it as an answer to the last specified question, not to "steal" all the credit for this question.

I'm just glad if I was of any help ;)

/Thor
0
oubelkasCommented:
Well, you might do this with a comment in the future, ok? 'Coz is wouldn't be fair if now you'd get all the creditz.

Joseph
0
jelloAuthor Commented:
Ok, I implemented the suggestions you guys made....

I put the slashes before the quotation marks in my text blocks.  They work fine.

I set the z-index to 1 in my style sheet.  The graphic still seems to sit on top of the text.  It is not blocking the text, so the graphic still appears underneath, but the cursor still turns into an arrow instead of a hand or an I-beam when moved to the overlapping text.

Also....

In Netscape my graphic is now moved downwards by about 30 pixels, so my alignment is all screwed up again.

let me know if you'd like me to post the updated code. Larholm, hang in there and I'll hook you up too.

(P.S. As a Web designer (albeit one with limited style sheet experience,) I have to say that I HATE the way Netscrape processes code.)

-Elliott
0
larholmCommented:
It would be nice with some updated code, yes ;)

/Thor
0
jelloAuthor Commented:
you got it.  A somewhat stripped down version...

<HEAD>
<STYLE TYPE="text/css">
 <!--
  .indent  {
       font-size : 14px;
      margin-top : -20px;
       margin-left : 50px;
       font-family : Arial;
      z-index : 1;
 }
 -->
 </STYLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">

<TABLE WIDTH=640 BORDER=0>
<TR>
      <TD><IMG SRC="images/pro1.gif" WIDTH=317 HEIGHT=52 ALT="" BORDER=0>
      <SCRIPT LANGUAGE="javascript">
      <!--
      if (navigator.appName=="Netscape") {
    document.write("<ilayer id='myNSlayer' CLASS='indent'>blah blah blah <A HREF=\"http://www.domain.com\" TARGET=\"_blank\">blah blah blah.</ilayer>");
      }
       else if (navigator.appName=="Microsoft Internet Explorer") {
       document.write("<div id='mylayer' CLASS='indent'>blah blah blah <A HREF=\"http://www.domain.com\" TARGET=\"_blank\">blah blah blah.</div>");
      }
      //-->
</SCRIPT>
</TD>
</TR>
</TABLE>

-Elliott
0
oubelkasCommented:
Well I've been working on this (I'm pretty new to layers too) and came up with this code, it works perfectly under IE AND NS. Maybe now your worst nightmares are over... :)

<html>
<head>
<style type="text/css">
..indent  {
  font-size : 14px;
  margin-top : 104px;
  margin-left : 14 px;
  font-family : Arial;
  position : absolute;
 }
</style>
</HEAD>
<body link="white">

<div id="imglayer" style="position:absolute;"><img src="http://www.digitalblasphemy.com/graphics/smalls/small_incognito.jpg"></div>
<div id="mylayer" CLASS="indent"><a href="mypage.html">the text over the image</a></div>

</body>
</html>

The picture is borrowed from digitalblasphemy.com. As you can see, because the position is absolute, the margin-top and -left work differently (now from clientwindow, instead of picture). But it works. AND the link isn't killed, the hand appears on both browsers. Good luck ;)

Joseph
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jelloAuthor Commented:
It looks great.  There is just one tiny point I forgot to mention....
I'm repeating this formatting with 5 graphics going down the page.  To use absolute positioning, I'll need a new class for each instance.

Here's what I did:  

1)I positioned all my grpahics on a white background, and extended it to fit 1024x768.

2)I positioned the text elements where I want them.

3)For the ones that didn't line up, I made additional classes, and used your Javascript to determine which class to use based on borwser.

My only problem now is that If the user's screen resolution is more than 1024x768, then the background with the images starts to tile.  This is easy to fix though.  I like your solution better than mine, and I will take it from here and try to implement it.

I won't have this stuff online for a while, but if you'd like to see it, then send me an e-mail at jello@voicenet.com , and I'll forward you the files.

FYI...Netscape's DevEdge site mentions that some of this stuff (like negative margins) produces "unpredictable results."

>Oubelkas, I'm going to accept your comment as an answer, and thanks for all your help.

>Larholm, Your backslash solution was helpful too, so e-mail me, and I'll set you up with 50 points.

Thanks, guys.

-Elliott
0
oubelkasCommented:
Thanks too Elliot. I'll mail you ;)

Joseph
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.