Question

I have a problem with my style sheet that I am using to create the page menu bar. Whenever a page does not have previous or next page the cell is empty and the CSS only applies a background image. Whenever I try to implement this solution the cells that make up the menu bar are moved around and everything is no longer aligned. I need help to try and figure out how I can fix this issue.

The following is the class that has been applied to the empty cell that is shown in the image as the grayed out back button.

td.menu-back-disabled {
    background-image: url('back_first.png');
    display: block;
    border-style: none;
    border-width: 0px;
    padding: 0px;
    height: 34px;
    width: 85px;    
}
li.menu-bar {
    list-style-type: none;
    background-image: url('top.png');
    background-repeat: repeat-x;
    border-style: none;
    border-width: 0px;
    padding: 0px;
    height: 34px;
    width: 100%;
}

This the html for the menu bar:

<table class="menu">
<br>
<tr>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=environment" class="menu-home">
</a>
</td>
<td class="menu-edit-selected">
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=upload&number=1&filter=1" class="menu-upload">
</a>
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=comments" class="menu-comments">
</a>
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=log&number=1" class="menu-log">
</a>
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=stats&number=1" class="menu-stats">
</a>
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=settings" class="menu-settings">
</a>
</td>
<td class="menu-bar">
</td>
<td class="menu-bar-right">
</td>
<td class="menu-back-disabled">
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=edit&number=2&filter=1" class="menu-next">
</a>
</td>
</tr>
</table>

Answer 1

Make sure your empty cells have   in them to be placeholders.

Also, try to avoid tables…

Edit:

Here is how my table looks at the moment. There should never be a place where the table will wrap to a new line since it’s only one column and width:100%;

CSS:

    <style type="text/css">
        #menu {
            width:100%;
        }
        #menu td {
            text-align:center;
        }
        .menu-bar {
            width:30%;
        }
    </style>

HTML:

    <table cellspacing="0" cellpadding="0" id="menu">
        <tr>
            <td>
                <a href="#" class="menu-home">Home</a>
            </td>
            <td class="menu-edit-selected">
                <a href="#" class="menu-home">Edit</a>
            </td>
            <td>
                <a href="#" class="menu-upload">Upload</a>
            </td>
            <td>
            <a href="#" class="menu-comments">Comments</a>
            </td>
            <td>
                <a href="#" class="menu-log">Log</a>
            </td>
            <td>
                <a href="#" class="menu-stats">Statistics</a>
            </td>
            <td>
                <a href="#" class="menu-settings">Settings</a>
            </td>
            <td class="menu-bar">&nbsp;</td>
            <td class="menu-bar-right">&nbsp;</td>
            <td class="menu-back-disabled">
                <a href="#" class="menu-next">Back</a>
            </td>
            <td>
                <a href="#" class="menu-next">Next</a>
            </td>
        </tr>
    </table>

Any changes from this are probably from padding, margins or set widths. The td.menu-bar and/or td.menu-bar-right cannot be set to width:100%; because it would mean the entire width of the table/row, not the cell.