Solved

Layer background color spilled over form's corners.

Posted on 2004-08-09
13
263 Views
Last Modified: 2013-12-24
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>
0
Comment
Question by:dl2y
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
  • +1
13 Comments
 
LVL 1

Expert Comment

by:MrBic
ID: 11758497
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
 
LVL 8

Expert Comment

by:tonsofpcs
ID: 11758644
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
 

Author Comment

by:dl2y
ID: 11759703
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
NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

 
LVL 31

Expert Comment

by:seanpowell
ID: 11763786
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
 

Author Comment

by:dl2y
ID: 11767853
Hi Sean,

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

Regards,
David
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11768048
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 11768087
It will have to wait a bit though - I will be back, sorry.
0
 
LVL 8

Expert Comment

by:tonsofpcs
ID: 11769563
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
 

Author Comment

by:dl2y
ID: 11770326
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
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
ID: 11772011
>>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
 

Author Comment

by:dl2y
ID: 11790200
Thanks Sean, I will try that.
Can you post the image you modified so I can try.
Again, Thanks
0

Featured Post

Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Now that Expression Web 4.0 (http://www.microsoft.com/expression/products/Upgrade.aspx) is free if you buy or have the full version of Expression Web 3.0, now is the best time to  migrate from FrontPage to Expression Web (http://www.frontpage-to-exp…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
The purpose of this video is to demonstrate how to make a WordPress Site faster and smaller in size by cleaning up the database. This will be demonstrated using a Windows 8 PC. Plugin WP Optimize will be used. Go to your WordPress login page. T…

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question