Question

I have a button created like so:

<div id = "userForgot">
<!-- Back button used -->
<button id = "forgotGoBack" onclick = "backToPage()" >< Back</button>
<!-- Form used to submit all membership info to be used on server -->
<form id = "ForgotForm" action = "/" onclick = "formURL(this)" method = "post" >

I cannot get it to show up on IE 7. This is the only item that will not display. I can locate the button (if I scroll over where it should be I get a pointer, and if I click where it should be it works. Here is my css that is used for all but IE 7:

 /*
  * The back button for the page
  */
 #forgotGoBack
 {
     z-index: 500;
     color: #fbfbfb;
     font-family: Arial;
     font-size: 11px;
     position: absolute;
     top: 400px;
     left: 305px;
     border: 0;
     padding: 0;
     background-color: transparent;    
 }
    #forgotGoBack:hover
    {
        cursor: pointer;
    }

Here is my code I use for IE 7 Only through this command:

<!--[if IE 7]><link rel="stylesheet" href="Styles/DefaultStyleForIE7.css" type="text/css" media="screen, projection"/><![endif]-->

/* Made back button visible */
#forgotGoBack
{
    z-index: 300;
    position: relative;
    color: Red;
    left: 0px;
    top: 0px;   
    display: block;
}

I made the color red because it would stick out on my page and I could see it easier. I also tried to move it to a different position with the left and top calls. I tried to use a position: relative call because I read that in some cases it fixes IE 7 issues like I am having. Regardless of the css I add to the IE 7 code the button will not move. I have also added code to the div holding the button in hopes that was the issue.

#userForgot
{
z-index: 200;
}

Any suggestions?

Answer 1

If there is a sibling float, it will be hidden. Try wrapping a div around the button and it should magically auto-appear. Don’t give the div any styles.

Otherwise, can you post all the markup around it?