Mostrando diferente en Internet Explorer y Google Chrome

As you can see on the image, 2 things are not showing good in I.E.

In I.E. the 'home' link image is partly missing and the 'nav' menu is not at the correct place. In Google Chrome the 'home' link image is showing correctly, it's supposed to stick out a little. The position are correct in Google Chrome.

LINK to the files

So problems: I.E. - Home link partly missing - Position of the menu is not good

How to fix them? Thank you.

enter image description here

. Php

<?php

    include 'includes/connection.php';

    $query = "SELECT * FROM products";

    $result = mysql_query($query);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
    <head>
        <meta http-equiv="content-type" 
        content="text/html;charset=utf-8" />
        <title>-</title>
        <link href="includes/style.css" rel="stylesheet" type="text/css" />
    </head> 
        <body>
            <div class="wrapper_1">
                <div class="header">
                    <div id="nav">
                        <table summary="header">
                            <tr>
                                <td>
                                    <ul>
                                        <li class="home"><a href="index.html"></a></li>
                                    </ul>
                                </td>
                                <td>
                                    <ul>
                                        <li class="about"><a href="manage.html"></a></li>
                                    </ul>
                                </td>
                                <td>
                                    <ul>
                                        <li class="contact"><a href="contact.html"></a></li>
                                    </ul>
                                </td>
                                <td>
                                    <ul>
                                        <li class="facebook"><a href="https://www.facebook.com/"><img src="includes/images/f_logo.png" alt="facebook" /></a></li>
                                    </ul>
                                </td>
                                <td>
                                    <ul>
                                        <li class="twitter"><a href="www.twitter.com"><img src="includes/images/t_logo.png" alt="twitter" /></a></li>
                                    </ul>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="content" id="positions">
                    <?php while($products = mysql_fetch_array($result)) {?>
                        <table style="float: left;" width="473" align="left" background="includes/images/box.gif" width="473" height="285">
                            <tr>
                                <td width="35%" height="100%" id="title"><?php echo $products['products'];?></td>
                                <td width="70%" height="100%" id="desc"><?php echo $products['description'];?></td>
                            </tr>
                        </table>
                    <?php
                    }       
                    ?>
                </div>
            </div>
        </body>
</html>

. Css

body{
    text-align:center; 
    background-image : url(images/web_bg.png);
}
.wrapper_1{
    width:953px;margin: 0 auto;
}
.header{
    background-image : URL(images/header_bg.png);
    width: 953px;
    height: 100px;
}
.content{
    background-image : URL(images/content_box.png);
}
.footer{
    background-image : url(images/l_copyright.png);
    width: 950px;
    height: 27px;
}

/* ID's */

#positions{
    margin-top: 20px;
}
#title{
    color:red; 
    padding-bottom: 240px; 
    padding-left: 25px;
}
#desc{
    color:blue; 
    padding-bottom: 135px; 
    padding-left: 
    5px;
}

/* NAV */

#nav {
    float : left;
    width: 953px;
}
#nav li {
    float : left;
    list-style-type : none;
}
#nav .home a {
    background-image : url(images/header_home.png);
    background-repeat : no-repeat;
    width : 400px;
    height : 54px;
    margin-left : -60px;
    margin-top : 10px;
    display : block;
}
#nav .about a {
    background-image : url(images/header_about.png);
    background-repeat : no-repeat;
    width : 64px;
    height : 13px;
    margin-left : 230px;
    margin-top : 30px;
    display : block;
}
#nav .contact a {
    background-image : url(images/header_contact.png);
    background-repeat : no-repeat;
    width : 64px;
    height : 13px;
    margin-left : -10px;
    margin-top : 30px;
    display : block;
}
#nav .facebook a {
    background-image : url(images/t_logo.png);
    background-repeat : no-repeat;
    width : 26px;
    height : 26px;
    margin-left : 10px;
    margin-top : 30px;
    display : block;
}
#nav .twitter a {
    background-image : url(images/f_logo.png);
    background-repeat : no-repeat;
    width : 26px;
    height : 26px;
    margin-left: -30px;
    margin-top : 30px;
    display : block;
}
#nav .home a:hover {
    background : url(images/header_home_light.png);
    background-repeat : no-repeat;
    width : 400px;
    height : 54px;
    margin-left : -60px;
    margin-top : 10px;
    display : block;
}
#nav .about a:hover {
    background : url(images/header_about_light.png);
    background-repeat : no-repeat;
    width : 64px;
    height : 13px;
    margin-left : 230px;
    margin-top : 30px;
    display : block;
}
#nav .contact a:hover {
    background : url(images/header_contact_light.png);
    background-repeat : no-repeat;
    width : 64px;
    height : 13px;
    margin-left : -10px;
    margin-top : 30px;
    display : block;
}

preguntado el 08 de noviembre de 11 a las 16:11

There is no doctype? Try adding one... -

Adding a doctype did nothing. Same story.. Something else? But thanks for the link though -

Does the html validate? That is something I would check first. Can you post the resulting html source code. -

Can you put up a link to this code running on your server? -

1 Respuestas

If you float items in IE7, their closest parent shuold have width, try giving #nav width.

respondido 09 nov., 11:11

then try give to the next parent width. almos 99% of cases when floating items breaking in IE7 its parents width issue. - solo

Can you give a look at the codes? I can't manage to get it working .. dl.dropbox.com/u/41330678/nid.rar - MOTIVECODEX

It's really hard to understand from the code what you want exactly, anyway try this: #nav .home a { background-image : url(images/header_home.png); background-repeat : no-repeat; width : 400px; height : 54px; left: -68px; margin-right: -68px; margin-top : 10px; display : block; position:relative; }; and it shuold work, just take care to the :hover class. - solo

I'm rewriting the code with tables etc. After one day of testing solutions, I thought it might be easier to just start over. And it was. It works now. I hate I.E. biggest bug browser. Real waste of time. Anyways thank you for your help - MOTIVECODEX

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.