CODEWITHSUNDEEP
htmlcss
MOTIVECODEX
MOTIVECODEX

Reputation: 2752

Showing different in Internet Explorer and 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;
}

Upvotes: 0

Views: 2553

Answers (1)

Alon
Alon

Reputation: 879

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

Upvotes: 1

Related Questions