D
D. Comyn
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?
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?