Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

DIV overlapping... *calendar pop up*

Posted on 2001-08-07
10
Medium Priority
?
841 Views
Last Modified: 2013-11-28
I have a div style calendar popup, and up to now had no problems with it... ... UNTIL I had something under the place where the calendar pops up.  It has transparent background @.@ I've tried changing the CSS of it, the DIV and everything... I hope someone here could tell me how to make it non transparent =o)

meaning I can see the underlying text on the calendar div section... it's annoying >.<

The script doesn't really matter that much.
I believe it's just a property of the DIV the Calendar uses "Div" and "Div2" respectavely that isn't set right...



code for page is:

<html>
<head>
<!-- POPUP CALENDAR SUPPORT STARTS -->
<link rel="stylesheet" type="text/css" href="calendar.css">
<script src="calendarControl.js"></script>
<script src="calendarPopup.js"></script>
<script src="anchorPosition.js"></script>
<script src="popupWindow.js"></script>
<!-- POPUP CALENDAR SUPPORT ENDS -->
</head>
<body>

Date Picker example:

<!-- DIV used by calendar popup control-->
<div id="calendarDiv" class="calendar" style="position: absolute;" align=center></div>
<div id="calendarDiv2" class="calendar" style="position: absolute;" align=center ></div>

<table width="100%">
     <tr><td>Name:</td><td><input type="text" name="firstname"></td></tr>
     <tr><td>Surname:</td><td><input type="text" name="surname"></td></tr>
     <tr>
          <td>Date:</td>
          <td>
               <input type="text" name="date" disabled></input>
                <!-- Calendar will position on ANCHOR element-->              
                <a id="calendarAnchor"/>&nbsp;</a> <!-- MUST NOT BE EMPTY -->
               <button onclick="showCalendar('calendar1');">
               <img src="calendar.gif"><br>
          </td>
          <td>
               <input type="text" name="date2" disabled></INPUT>              
               <a id="calendarAnchor2"/>&nbsp;</a> <!-- MUST NOT BE EMPTY -->
               <button onclick="showCalendar('calendar2');">
               <img src="calendar.gif">
               </button>
          </td>
     </tr>
     <tr>
          <td colspan=3>
               <input></input><br><input></input>
               <input></input><BR><input></input>
               <input></input><!--just stuff to demonstrate the 'transparency mess up'-->
          </td>
     </tr>

</table>

<script language="JavaScript">

// Initiate calendars
createPopupCalendar("calendar1", "date", "calendarDiv", "calendarAnchor");
createPopupCalendar("calendar2", "date2", "calendarDiv2", "calendarAnchor2");
</script>

</body>
</html>



Well hope you can help :)

~Ixeus
0
Comment
Question by:The_Brain
[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
  • 3
  • 2
  • +1
10 Comments
 
LVL 19

Expert Comment

by:webwoman
ID: 6359369
Give the div a background color. Or even easier, give the table in the div a background color. It can be white.
0
 
LVL 1

Author Comment

by:The_Brain
ID: 6359732
tried that @.@
didn't turn out as simple as that
0
 
LVL 2

Expert Comment

by:TenTonJim
ID: 6359904
Try changing the z-index property for the overlapping divs, placing one behind the other, and using a background color...


The one you want behind (underneath so to speak) set to

.div2
{
z-index:-1;
}

and then try setting a background-color property in div1 as webwoman suggested.

.div1
{
background-color: #FFFFFF;
}

Jim s.

0
Better audio for more successful meetings

Challenge: S&ME was tired of poor audio quality of Skype for Business calls in mid-sized meeting and training rooms. They were looking for a reliable and cost efficient solution to replace the existing conferencing system.

 
LVL 10

Expert Comment

by:dij8
ID: 6360354
If the background color doesn't work you could try a background image.  Say a 1x1 pixel colored image (about 64bytes in weight).  And then resize it to fit the DIV.
0
 
LVL 19

Accepted Solution

by:
webwoman earned 450 total points
ID: 6361249
You tried this?

<table width="100%" bgcolor="#FFFFFF">

and it didn't work? I find that very hard to believe...
0
 
LVL 1

Author Comment

by:The_Brain
ID: 6363017
Well you see,

The whole page is fine, the CALENDAR pop up, is the problem. Sure the colour of the table works.  But the problem isn't that.  The calender's background is transparent, it has absolute position, (i.e. at the place where the edit box is).  And anything under the calendar... well shows up... I've edited tweaked everything about the calendar's div section, I could change part of the background (the text background which worked, but the most of it was still transparent) the selection and the headings, but it still had a generic background was still transparent.

 So nothing I do to the underlying Form, it's the calendar DIV that has a transparency background that wouldn't go away... =/

 Sorry if this is confusing, but I do html all day, and know the stuff, and this one really has me stumped >.<

 I'm probably overlooking something very stupid... but it's not those suggested things :(

(I'll try the last 2 after I get the calendar's machine online)


~Ixeus

0
 
LVL 19

Expert Comment

by:webwoman
ID: 6364764
FORM? If you've got a form under the popup, it's NOT going to go away, never is going to go away, and nothing you do to the div will hide it. Forms are ALWAYS on top. The only way you can have it not be on top is to surround that with a div and hide the entire form when you show the calendar.

Nothing else will do it.

If you had said that before, it would have made this a lot faster...
0
 
LVL 10

Expert Comment

by:dij8
ID: 6365342
And why will the form always be on top? Because they have a z-index of infinity.  And you can not change it.

If you do put the form in a div then you have to put the WHOLE form in the div and hide the WHOLE form because if you put some of it in a div (or any other form of layer) then in Netscape it will be separated from teh rest of the form.
0
 
LVL 1

Author Comment

by:The_Brain
ID: 6383775
Even though you didn't exactly give me the right answer in this case, you inspired me to look into more backgrounds,, I decided to rewrite this HUGE page into stylesheets and I style sheeted the calender and gave properties to TR of calendar and it works now :)
even with something like form under it.

Thx for the inspiration ;)

~Ixeus

(sorry no A, you didnt' provide an "Exellent!!!" answer :p)
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6384127
No problem... glad you got it to work!
0

Featured Post

[Video] Create a Disruption-Free Workspace

Open offices have their challenges. And Sometimes, it's even hard to work at work. It's time to reclaim your office and create a disruption-free workspace. With the MB 660, you can:

-Increase Concentration
-Improve well-being
-Boost Productivity

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Read this article and get to know some best tips for outsourcing client PPC work to a white label PPC agency.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

719 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