CODEWITHSUNDEEP
csshtmlvisibility
D-Inventor
D-Inventor

Reputation: 480

div invisible in IE

I made some div's to make buttons, however some of these div's are invisible in IE. In other browsers this worked perfect, just not in IE. Some people said that it would be enough to just delete the browser cache. I did this, but it had no effect. I don't know what I did wrong. it is about these two div's:

    <div id="searchButtons">
        <!--Inside are the buttons, which are div's that are clickable using a hyperlink-->
        <a href="#" onclick="javascript:document.getElementById('SearchForm').submit();"><div id="searchButton" class="searchButton" style="width:70;">
            Search
        </div></a>
        <a href="#" onclick="javascript:document.getElementById('SearchForm').reset();"><div id="resetButton" class="searchButton" style="width:70; left:70;">
            Reset
        </div></a>
    </div>

    <div id="loginButtons">
        <a href="#" onclick="CheckLoginData(2)"><div id="LoginButton" class="loginButton" style="width:60;">
        <!--CheckLoginData(2) is a function, which checks if al inputs are entered, the parameter (2) has to do with the tabs I made in another part of this file-->
            Login
        </div></a>
        <a href="Register.php"><div id="Register" class="loginButton" style="left:60; width:70;">
            Register
        </div></a><br/>
        <a href="ForgotPassword.php" target="_blank">Forgot password</a>
    </div>

before the first div, there is a form which is submitted using this div.

The second div contains some buttons that are used to login, register or to go to forgot password page. These div's have some css:

div.loginButton,div.searchButton{
position:absolute;
color:blue;
background-color:FFFF99;
height:20;
transition:background-color 0.2s;
-webkit-transition:background-color 0.2s,transform 0.2s;
}
div.loginButton:hover,div.searchButton:hover{
position:absolute;
background-color:CCCC7A;
height:20;
transition:background-color 0.2s;
-webkit-transition:background-color 0.2s,transform 0.2s;
}
#loginButtons,#searchButtons{
position:absolute;
top:130;
height:25;
left:20;
width:140;
}

The strange part is that only the first hyperlink inside each div is invisible. The others are visible. I have tried to use the style attribute display, but it had no effect. I have no clue what I did wrong. Is there any sugestion?

Upvotes: 1

Views: 147

Answers (1)

David Randall
David Randall

Reputation: 770

Plugging that code straight into a blank page the links sit on top of each other due to the absolute positioning. Remove the absolute positioning and all your links should be visible.

Upvotes: 3

Related Questions