![]() |
|
|
|
#1 |
|
I am using the following lines in a style sheet to produce a shadowed text
effect over an image. I have viewed the results in IE, but the text did not line up properly when viewed on a Netscape browser. .headc1 {font-family: Arial; font-weight: bold; color: #339900; font-size: 35px; position: absolute; top: 8px; left: 265px; z-index: 2;} .headc2 {font-family: Arial; font-weight: bold; color: #666666; font-size: 35px; position: absolute; top: 9px; left: 263px; z-index: 1;} .headc3 {font-family: Arial; font-weight: bold; color: #339900; font-size: 35px; position: absolute; top: 40px; left: 260px; z-index: 2;} .headc4 {font-family: Arial; font-weight: bold; color: #666666; font-size: 35px; position: absolute; top: 41px; left: 258px; z-index: 1;} .headc5 {font-family: Arial; font-weight: bold; color: #006600; font-size: 20px; position: absolute; top: 76px; left: 168px; z-index: 2;} .headc6 {font-family: Arial; font-weight: bold; color: #ffffcc; font-size: 20px; position: absolute; top: 77px; left: 167px; z-index: 1;} #imageleftcorner {position: absolute; top: 110; left: 110;} #imagetopleft {position: absolute; top: 7px; left: 7px;} The code goes something like this: <BODY LEFTMARGIN="2" TOPMARGIN="2"> <TABLE BORDER="0" ALIGN="left" CELLSPACING="0" CELLPADDING="0" BGCOLOR="ffffff" SUMMARY=""> <TR ALIGN="center" NOWRAP="yes"> <TD COLSPAN="3" BGCOLOR="006600" HEIGHT="110" ALIGN= "center" NOWRAP="yes"> <SPAN ID="imagetopleft"><IMG SRC="vswcdlogo.gif" WIDTH= "700" HEIGHT="98" ALT="" BORDER="0"></SPAN> <H1 CLASS="headc1">Text line 1</H1> <H1 CLASS="headc2">Text line 1</H1> <H1 CLASS="headc3">Text line 2</H1> <H1 CLASS="headc4"> Text line 2</H1> <H1 CLASS="headc5">Text line 3</H1> <H1 CLASS="headc6">Text line 3</H1> <SPAN ID="imageleftcorner"> <IMG SRC="leftcorner.gif" WIDTH="40" HEIGHT="40" ALT="" BORDER="0"></SPAN> </TD> </TR> .....etc I have yet to test it on other browsers.... Any suggestions on how to make it more cross-browser compatible? D. Comyn |
|
|