Solved

Layer background color spilled over form's corners.

Posted on 2004-08-09
13
261 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
  • 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
VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

 
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

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

Suggested Solutions

When deciding to adopt any help desk solutions many factors should be explored before taking decisions. This will change from business to another but in general there are some kind of rule of thumb. Here are some quick tips: Do we need only ticket…
Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
The purpose of this video is to demonstrate how to properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp…
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…

803 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