My button dissappears in ie7

HTML & CSS
1

Why is it that when I do this code

<html>
<head>
<title></title>
<style type="text/css">
#submitlogout {
 width:69px;
 height:26px;
 text-indent:-9999px;
 overflow:hidden;
 border:0;
 background:url(images/LogOutButton.png) no-repeat 0 0;
 cursor:pointer !important; cursor:hand;
}
#submitlogout:hover {
 background-position:0 -26px;
}
</style>
</head>
<body>
<button type='submit' id='submitlogout' name='LogOut'>Submit</button>
</body>
</html>

at this location
http://bobssaltandfeed.com/buttonnoworkey.php

my button is not there for IE7?

2

Oh okay, one too many "b"s in the url

Why is it then that when I use the exact same code (that I posted earlier) it works on other pages?
Well the thing is that is not the exact same code, on that page the button is nested in a table cell which is nested in a form. It is probably setting up a whole new algorithm in IE which is effecting it somehow.

Please tell me that page is the old site and that you are rebuilding it.
The page is a mess with all the absolute positioning, non semantic html and inline css. :frowning:

You are using divs for what should be list items in your main menu, not to mention that they are nested in a span.

<span id="Menu">
<div class='Spacer'>&nbsp;</div>
<div class='MenuLink'><a href='index.php' title='Home'>Home</a></div>
<div class='MenuLink'><a href='products.php' title='Products'>Products</a></div>
<div class='MenuLink'><a href='events.php' title='Events'>Events</a></div>
<div class='MenuLink'><a href='oocomingsoon.php' title='Order Online'>Order Online</a></div>
<div class='MenuLink'><a href='contactus.php' title='Contact Us'>Contact Us</a></div>
</span>

The same type of abuse is going on for the page title. It should simply be a heading.


<div class="style1" id="PageTitle"><span id="LeftPageTitle">Order Online</span></div>

I’ll stop there because all that is beyond the scope of your thread but as I mentioned I suspect it all has something to do with why things are rendering different in IE7 on that page.

3

http://bobssaltandfeed.com/oosignin.php

4

For example:
http://bobbssaltandfeed.com/oosignin.php

That page gives a 404 error
[URL=“http://bobbssaltandfeed.com/oosignin.php”]

5

Your code works beautifully. Why is it then that when I use the exact same code (that I posted earlier) it works on other pages? For example:
http://bobbssaltandfeed.com/oosignin.php

6

Did I put the wrong doctype?
No, that doctype did fix IE8 but IE7 seems to have other issues. About the doctype though, always use a strict doctype when you are building a new page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

Transitional doctypes are for old pages that are in transition, that is they are undergoing code updates.

From looking at the SitePoint Reference I see that the button element is known to be buggy in IE.

It looks like IE7 is choking on the text-indent:-9999px; It seems to be taking the entire button off screen with it. :eye:

I fixed it by wrapping the text in a span and then using margin-left:-9999px to hide the text. You should be wrapping form elements up in a block element too.

This code works in IE7/8 and FF, I didn’t test any further than that.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Button Test</title>

<style type="text/css">
.logout {
    width:69px;
    float:left;/*optional*/
}
#submitlogout {
    width:69px;
    height:26px;
    /*text-indent:-9999px; chokes IE7*/
    overflow:hidden;
    border:0;
    background:url(images/LogOutButton.png) no-repeat 0 0;
    cursor:pointer;
}
#submitlogout span {
    margin-left:-9999px;/*hide text off screen in a span*/
}
#submitlogout:hover {
    background-position:0 -26px;
}
</style>

</head>
<body>

    <div class="logout">
        <button type='submit' id='submitlogout' name='LogOut'><span>Log Out</span></button>
    </div>
    
</body>
</html>
7

Okay, I put

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

but it still doesn’t work. Did I put the wrong doctype?

8

It is not working in IE8 either.

Why is it that when I do this code

Because you don’t have a doctype, you have ALL versions of IE in quirksmode.