I'm creating a login page for a website. The scripting works perfectly under FireFox however under the evil empire's software it fails. Under IE the user cannot touch any of the buttons or fields for utterly no reason.

The cause of this is related to the fact that the form lies within a <div> whos background is a PNG file and I have used the CSS filter:; command to fix the stupid no PNG support IE 6 and lower has. I can create forms other places on the site that do not have backgrounds or that have jpg, gif backgrounds and they work fine. It is not a DIV overlapping issue as I checked and double checked my z-indexes.

Any help fixing this one... and no we can't kill gates but it'd be nice...

BlackWater

Need a URL or posted code please

Are you going to give us a link, or some code, or do we just have to guess?

Originally Posted by wayfarer07

Are you going to give us a link, or some code, or do we just have to guess?

Ladynred already requested it. Do you really need to ask the same thing a minute later? I don't have the time to spend all day on here checking this post every five minutes.


Merry Christmas. Thanks in advance.
CSS:

.content {
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/BkgdContent.png', sizingMethod='scale');
  width:920px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  z-index:0; }
 
.main_content_nosub {
  width:450px;
  margin-left:12px;
  font-family:Palatino;
  font-size:1em;
  z-index:3;
 }

Login Page:

<!-- CONTENT START -->
  <div class="content">

<!-- MENU START INCLUDE MENU.PHP-->
    <div class="menu">
      <?php 
        include("menu.php");
      ?> 
    </div>
<!-- END MENU -->

<!-- MAIN CONTENT START -->
    <div class="main_content_nosub">
    <form action="verify_login.php" method="post">
    <table width="80%" align="center" style="border:1px solid #d3dbeb; font-family:monospace;">
    
    <tr>
        <th colspan="2" style="font-size:1.2em; height:25px; text-align:left; font-family:monospace; background-color:#f5f8fb;">&nbsp;&nbsp;LOGIN</th>
    </tr>
    <tr>
        <td colspan="2"><br/></td>
    </tr>
    <tr>
        <td style="text-align:right;"><b>Username:&nbsp;</b></td>
        <td><input type="text" value="" name="Username" id="Username" /></td>
    </tr>
    <tr>
        <td style="text-align:right"><b>Password:&nbsp;</b></td>
        <td><input type="password" name="Password" value="" id="Password" /></td>
    </tr>
    <tr>
        <td colspan="2"><br/></td>
    </tr>
    <tr>
        <th colspan="2" style="text-align:center;"><input type="submit" name="submit" value="LOGIN" style="font-family:monospace; color:#0b328d; background-color:#fff; border-right:2px solid #000; border-top:2px solid #ccc; border-left:2px solid #ccc; border-bottom:2px solid #000; height:30px;" /></th>
    </tr>
    <tr>
        <td colspan="2"><br/></td>
    </tr>
    
    </table>
    </form>
    </p>
    </div>
<!-- END MAIN CONTENT -->

  </div>
<!-- CONTENT END -->

Ladynred already requested it.

We posted at the same time. Were no responses when I read it then posted. Didn't feel like taking it down.

I'm having a hard time seeing the problem, don't have IE6 installed on this computer, and have no local way to process the <?php> tags. Do you have a live posting of the page so we can see it in action?

The PHP tag is just for a quick edit menu. You should be able to remove the scripting between the <?php ?> tags. I have recently tested this script under IE 7+ and still the same problem. Since IE 7 has PNG support I want to say it is related to the filter:; commands I added for old browsers.

Regarding the code request, I apologize I'm used to difficult people on these and similar forums.

I didn't have any problem with that code in IE6. I was able to access all of the form fields, as well as the button. I used a DOCTYPE of XHTML 1.0 Transitional, since you didn't include one. Try changing the DOCTYPE, or eliminating the included menu, to see if it is somehow masking the form in IE6.

Uh... I still don't get IE or the cause of this problem. You told me it worked fine when you ran the script I posted. You also told me to look at the menu. I removed the:

<?php include('menu.php'); ?>

Section from the login page and saved it. I suddenly could use the form fields and buttons. I then added that section of script back to the exact same area I removed it from and saved the page. Upon reloading the login page, with the menu included, the forms suddenly worked.... They also started working across the entirety of the site after I did that.

So is it my scripting or does IE suck that bad.........

The first thing I see is that you're using z-index on the posted code. Z-index ONLY works on absolutely or relatively positioned elements, it has ZERO effect otherwise.

What is the menu doing, since I can't see that. Are you certain it's not overlapping the form ? I use Firebug to see this sort of thing.

So is it my scripting or does IE suck that bad

IE6 and below is horrid.. but I suspect something else is happening with the menu that I can't see.

The menu is nothing more than a PHP file that prints the links for the menu. Basically just a couple of echo() functions and one if/else statement that changes the status of the Login / Logout links.

Everything is working fine now. I really didn't change anything, saved the file without the menu and then with.