Layer background color spilled over form's corners.

Hi all,
I have a problem with layer's background spilled over corners of a form. Any help appreciated.

Following is the form's script.

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>


<div style="padding:-1px; position: absolute; width: 357px; height: 267px; z-index: 1; left: 12px; top: 57px; background-color:#00FFFF" id="layer1">
<table border="0" cellspacing="0" cellpadding="0" width="362">
  <tr>
    <td width="10" height="10" background="../../../web_test/mysite6/images/lt.gif"></td>
    <td background="../../../web_test/mysite6/images/top.gif"></td>
    <td width="10" height="10" background="../../../web_test/mysite6/images/rt.gif"></td>
  </tr>
  <tr>
    <td width="10" background="../../../web_test/mysite6/images/left.gif">&nbsp;</td>
    <td valign="top">
     &nbsp;<form method="POST" action="--WEBBOT-SELF--">
          <!--webbot bot="SaveResults" U-File="C:\WEB_TEST\mysite6\_private\form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" -->
          <p><font color="#00FFFF" face="Tahoma"><input type="radio" value="V9" name="R1"></font><font face="Tahoma" size="2">Hotel&nbsp;&nbsp;&nbsp;
          </font><font face="Tahoma">&nbsp;
          </font><font color="#00FFFF" face="Tahoma">
          <input type="radio" value="V10" name="R1"></font><font face="Tahoma" size="2">Flight
          + Hotel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font>
                  <font color="#00FFFF" face="Tahoma">
          <input type="radio" value="V11" name="R1"></font><font face="Tahoma" size="2">Car&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </font><font color="#00FFFF" face="Tahoma">
          <input type="radio" value="V12" checked name="R1"></font><font face="Tahoma" size="2">Flight</font></p>
          <p>&nbsp;<b><font face="Tahoma" size="1">Check-in:&nbsp;&nbsp; </font>
          </b><font color="#00FFFF"><SELECT NAME="doa_mm" CLASS="tpmenu" onChange="amadChange(this, document.hotsrchbox.doa_dd, document.hotsrchbox.dod_mm, document.hotsrchbox.dod_dd);">
                                   
          <OPTION VALUE="01" >January
          <OPTION VALUE="02" >February
          <OPTION VALUE="03" >March
          <OPTION VALUE="04" >April
          <OPTION VALUE="05" >May
          <OPTION VALUE="06" SELECTED>June
          <OPTION VALUE="07" >July
          <OPTION VALUE="08" >August
          <OPTION VALUE="09" >September
          <OPTION VALUE="10" >October
          <OPTION VALUE="11" >November
          <OPTION VALUE="12" >December
                                    </SELECT></font><b><font face="Tahoma" size="1">&nbsp;&nbsp;&nbsp;
          </font></b><font color="#00FFFF"><SELECT NAME="doa_dd" CLASS="tpmenu" onChange="amadChange(document.hotsrchbox.doa_mm, this, document.hotsrchbox.dod_mm, document.hotsrchbox.dod_dd);">
                                   
          <OPTION VALUE="01" >1
          <OPTION VALUE="02" >2
          <OPTION VALUE="03" >3
          <OPTION VALUE="04" >4
          <OPTION VALUE="05" >5
          <OPTION VALUE="06" >6
          <OPTION VALUE="07" >7
          <OPTION VALUE="08" SELECTED>8
          <OPTION VALUE="09" >9
          <OPTION VALUE="10" >10
          <OPTION VALUE="11" >11
          <OPTION VALUE="12" >12
          <OPTION VALUE="13" >13
          <OPTION VALUE="14" >14
          <OPTION VALUE="15" >15
          <OPTION VALUE="16" >16
          <OPTION VALUE="17" >17
          <OPTION VALUE="18" >18
          <OPTION VALUE="19" >19
          <OPTION VALUE="20" >20
          <OPTION VALUE="21" >21
          <OPTION VALUE="22" >22
          <OPTION VALUE="23" >23
          <OPTION VALUE="24" >24
          <OPTION VALUE="25" >25
          <OPTION VALUE="26" >26
          <OPTION VALUE="27" >27
          <OPTION VALUE="28" >28
          <OPTION VALUE="29" >29
          <OPTION VALUE="30" >30
          <OPTION VALUE="31" >31
     </SELECT></font>&nbsp;&nbsp; <font color="#00FFFF"> <SELECT NAME="doa_yy" CLASS="tpmenu">
          <OPTION VALUE="2004">2004
          <OPTION VALUE="2005">2005
          <OPTION VALUE="2006">2006
          <OPTION VALUE="2007">2007
     </SELECT></font></p>
     <p>&nbsp;<b><font face="Tahoma" size="1">Check-out: </font></b>
     <font color="#00FFFF">
     <SELECT NAME="dod_mm" CLASS="tpmenu">                                        
          <OPTION VALUE="01" >January
          <OPTION VALUE="02" >February
          <OPTION VALUE="03" >March
          <OPTION VALUE="04" >April
          <OPTION VALUE="05" >May
          <OPTION VALUE="06" SELECTED>June
          <OPTION VALUE="07" >July
          <OPTION VALUE="08" >August
          <OPTION VALUE="09" >September
          <OPTION VALUE="10" >October
          <OPTION VALUE="11" >November
          <OPTION VALUE="12" >December
     </SELECT></font>&nbsp;
     <font color="#00FFFF">
     <SELECT NAME="dod_dd" CLASS="tpmenu">                              
          <OPTION VALUE="01" >1
          <OPTION VALUE="02" >2
          <OPTION VALUE="03" >3
          <OPTION VALUE="04" >4
          <OPTION VALUE="05" >5
          <OPTION VALUE="06" >6
          <OPTION VALUE="07" >7
          <OPTION VALUE="08" SELECTED>8
          <OPTION VALUE="09" >9
          <OPTION VALUE="10" >10
          <OPTION VALUE="11" >11
          <OPTION VALUE="12" >12
          <OPTION VALUE="13" >13
          <OPTION VALUE="14" >14
          <OPTION VALUE="15" >15
          <OPTION VALUE="16" >16
          <OPTION VALUE="17" >17
          <OPTION VALUE="18" >18
          <OPTION VALUE="19" >19
          <OPTION VALUE="20" >20
          <OPTION VALUE="21" >21
          <OPTION VALUE="22" >22
          <OPTION VALUE="23" >23
          <OPTION VALUE="24" >24
          <OPTION VALUE="25" >25
          <OPTION VALUE="26" >26
          <OPTION VALUE="27" >27
          <OPTION VALUE="28" >28
          <OPTION VALUE="29" >29
          <OPTION VALUE="30" >30
          <OPTION VALUE="31" >31
     </SELECT></font>&nbsp;
     <font color="#00FFFF">
     <SELECT NAME="dod_yy" CLASS="tpmenu">
          <OPTION VALUE="2004">2004
          <OPTION VALUE="2005">2005
          <OPTION VALUE="2006">2006
          <OPTION VALUE="2007">2007
     </SELECT></font></p>
          <p>&nbsp;<b><span style="letter-spacing: -1pt; vertical-align: middle"><font size="2">City:</font></span><font size="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </font></b>
          <font color="#00FFFF">
          <INPUT TYPE="TEXT" NAME="city" SIZE="27" CLASS="tptext" OnClick="this.value='';"></font><b><font size="1">
          </font></b></p>
          <p style="margin-top: 0">
          <input type="submit" value="Find Best Rate" name="B1" style="float:right"></p>
          <p style="margin-top: -14px; margin-bottom: 0">&nbsp;</p>
          <p style="margin-top: -14px; margin-bottom: 0">&nbsp;</p>
          <p style="margin-top: -14px; margin-bottom: 0">
                  <p style="margin-top: -14px; margin-bottom: 0">
          <img border="0" src="file:///C:/WEB_TEST/mysite6/images/Arrow_Circle.gif" width="20" height="20"><u><b><font face="Tahoma" size="1">
          Advanced search options</font></b></u></p>
     </form>
</td>
    <td width="10" background="../../../web_test/mysite6/images/right.gif"></td>
  </tr>
  <tr>
    <td height="10" background="../../../web_test/mysite6/images/lb.gif"></td>
    <td background="../../../web_test/mysite6/images/btm.gif"></td>
    <td height="10" background="../../../web_test/mysite6/images/rb.gif"></td>
  </tr>
</table>
</div>
</body>
</html>
dl2yAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
seanpowellConnect With a Mentor Commented:
>>that seems to only correct the top right
That's the only image I modified...
In this case, the image is the form color inside, and white on the outside. (The white is necessary because you're filling the div that contains the form with a color.)

Just use any color inside, and rotate the images 3 times for the other corners...
0
 
MrBicCommented:
Do you want your form area to be white? If so, create a div inside the form tag and specify the back ground color to be white.

How has it spilled?
0
 
tonsofpcsCommented:
I don't understand what spill you are referencing.  I have the page open in IE, and i see a small cyan ( #00FFFF ) box with a form in it on a white body.  Can you explain further?
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
dl2yAuthor Commented:
Hi All,
If you look at the corners on a white page background, I guess, with any others background color instead of Aqua which is the background color of this form, You can see a triangle aqua color filled the space supposed to be the original form before
rounded. I open the same script I posted here with IE 6.0 I can see it.
If the form background set to be white and the table with default color which is white then the color is matched and you won't see it.
 To page editor: Yes, please move it to where ever might get a solution.

Thanks to all,
Regards,
David


0
 
seanpowellCommented:
David,

I'm having a hard time understanding your comments - so please bear with me...

>>I open the same script I posted here with IE 6.0 I can see it.
That's because you can see the corner images referenced in your script - and we can't.

I have to assume that the problem lies in that you have not given the edges of your corner image a transparent background, and so when you change any of the colors on the page, you see the problem.

Is this page online, it would be easier to know exactly what you meant if I could see the images you're using...
0
 
dl2yAuthor Commented:
Hi Sean,

I just posted the page at www.discountalltravel.com. You will get better idea when see it.

Regards,
David
0
 
seanpowellCommented:
Yes, its the way you're coloring the corner image.
Set the inside of the image to the background of your form, and the outside to the background of your web page.

Here's the top right as it should be:
http://www.pdgmedia.com/ee/Discountalltravel.html

There's something else I want to show you though...
0
 
seanpowellCommented:
It will have to wait a bit though - I will be back, sorry.
0
 
tonsofpcsCommented:
seanpowell: that seems to only correct the top right, but yes, the images need to be changed from transparent completely to transparent 'inside' and white [or page background] 'outside'.  
0
 
dl2yAuthor Commented:
Hi Sean,
How did you do the right corner?, Can we just do the same with the other corners.!
When you said transparent inside and out, Did you means match the color inside with page background color? I would like to
have the form with a little bit different color, so it look stand out.
Regards,
Dave
0
 
dl2yAuthor Commented:
Thanks Sean, I will try that.
Can you post the image you modified so I can try.
Again, Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.