Basic CSS debugging in Internet Explorer 8 using compatibility mode_问答_开发者

Basic CSS debugging in Internet Explorer 8 using compatibility mode

开发者 https://www.devze.com 2023-02-11 14:08 出处：网络

Okay, I\'m not doing anything fancy here, but it\'s driving me crazy that I can\'t get it to work. I\'m having trouble with the button formatting on a form, but only in Internet Explorer 7.

Okay, I'm not doing anything fancy here, but it's driving me crazy that I can't get it to work.

I'm having trouble with the button formatting on a form, but only in Internet Explorer 7.

I have a simple form:

<div id="menusearch">
     <form id="searchform" method="get" action="process.php">
        <div>
            <input type="text" value="" name="s" id="s_name" class="input_text"  />
            <input type="submit" class="button submit" accesskey="s" value="" />
        </div>
    </form>
</div>

The CSS for the button is as follows:

#menusearch .button {
    margin: 0;
    width:97px;
    height:30px;
    background-image: url('images/search.png');
    background-repeat:no-repeat;
    background-position:left top;
    border: none;
}

The background image is just a simple button image, but in Internet Explorer 7 it's just showing a standard default button without the image. It works in every other browser I've tried it in. Help would be appreciated.

Now, I'm using Internet Explorer 8 (compatibility mode) and the developer tools to check it out and see what's going wrong and I've noticed something weird. For certain lines of CSS, it seems to be ignoring them. So in the above for example, the developer tool shows as follows:

background-image: url(images/search.png); BORDER-BOTTOM-STYLE: none

And it's showing this all as one line without the tick boxes, like it's not recognizing this as separate CSS rules. I can find other places in my CSS where I'm using background-image just fine and other places where I've set the borders as well. I've copied and pasted over the CSS code and still get the same errors.

What am I doing wrong?

EDIT

Okay, I've stripped it down and found that my problem is actually in my Document Type Declaration,

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

I remove it, and it works. So then, I need to change my original question to the following: What should my Document Type Declaration be? I've never really understood the different ones and have always just used the same one...

so, the trimmed down source code as requested:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">
            #menusearch .button {
                margin: 0;
                width:97px;
                height:30px;
                background-image: url('http://www.netbsd.org/images/download-icon-orange.png');
                background-repeat:no-repeat;
                background-position:left top;
                border: none;
            }
        </style>
    </head>
    <body>
        <div class="hspace">
            <div id="mspace">
                <div id="menu">
                    <div id="menusearch">
                        <form id="searchform" method="get" action="process.php">
                            <div>
                                <input type="text" value="" name="s" id="s_name" class="input_text"  />
                                <input type="submit" class="button submit" accesskey="s" value="" />
                            </di开发者_如何学编程v>
                        </form>
                    </div>
                </div>
            </div>

I've left off the Document Type Declaration.

The fix in this case is remarkably simple. Change your border, like this:

border: 0 solid #000

And it's fixed. Who knows why, IE7 is crazy.

You can keep your original doctype.

You may be better off using input type="image" which can take an image src like this:

<input type="image" src="/path/to/image.png" value="Submit" />

The issue with this way, however, is that a rollover state would have to be done with JavaScript code. If you need more control over the button through CSS you could also use a <button> tag which Internet Explorer can style better than a standard input type="submit".

This is how I solved it for my case,