Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Layer background color spilled over form's corners.

Posted on 2004-08-09
13
Medium Priority
?
266 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
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 
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 2000 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
Suggested Courses

886 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