Home/ Questions/Q 8494785
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T23:23:38+00:00

Below is my code for my website. It works perfectly on firefox but not

  • 0

Below is my code for my website. It works perfectly on firefox but not in chrome or safari. The only thing that doesn’t work is the navigation row displays to the right of the header picture and the home button is the full length of the header picture. I think it has something to do with the display:inline in the css but I’m note sure.

<html>
    <head>
        <title>Workouts</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
    <div id = "page">
            <table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
            <div id = "header">
                <tr>
                    <td>
                        <img src =images/header_logo2.png />
                    </td>
                </tr>
            </div>
                <tr class = "nav" height="30px" width="100%">
                    <td></td>
                    <td><a href="index.html">Home</a></td>
                    <td><a href="about.html">About</a></td>
                    <td><a href="workouts.html">Workouts</a></td>
                    <td><a href="trainers.html">Trainers</a></td>
                    <td><a href="contact.html">Contact</a></td>
                    <td></td>


                </tr>
                <tr class = "content" width="100%">
                    <td><img  width="100%" src="images/content.png" /></td>
                </tr>
            </table>
    </div>
    </body>
</html>

This is my stylesheet

* {
    margin-top:0;
    padding-top:0;
    padding-bottom: 0;
    margin-bottom: 0;
}
body{
    background:pink;
}
.border{
    background-color: #c92f51;
}
.nav a{
    text-decoration: none;
    color:pink;
}
.nav a:hover{
    color:gray;
}
.nav td{
    display: inline-table;
    width: 14.29%;
    height="30px";
    text-align: center;
    font-size: 24px;
    color:pink;

}
tr .content{
    background:#c92f51;
}
.content td{
    background:white;
    padding: 30px 30px 30px 30px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Every table row has to have the same number of columns. If you don’t, you need a colspan attribute to make up for it.

    Also you should not have <div> tags directly instead a table. How browsers handle these types of errors is not very consistent, so it’s best to fix them. Try changing:

    <table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
            <div id = "header">
                <tr>
                    <td>
                        <img src =images/header_logo2.png />
                    </td>
                </tr>
            </div>

    To

    <table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">

            <tr id = "header">
                <td colspan="7">
                    <img src =images/header_logo2.png />
                </td>
            </tr>

    And also add the same colspan on the last row:

    <tr class = "content" width="100%">
                    <td colspan=7><img  width="100%" src="images/content.png" /></td>
                </tr>

    More generally, using tables for layout like this is not good practice nowadays. If you search google for “css layouts vs tables” you can find out a lot more about it.

    • 0