CSS/HTML Code Works on Local pc but Not on Test and Production Server

I have the following tags in my master page:

<body style="background-color: #FFFFFF; margin: 0px; padding: 0px; border-top:0px;">
    <form id="form1" runat="server">
    <div>
        <table width="100%" cellspacing="0">
            <tr>
                <td id="logo-left">
                </td>
                <td id="area-background">
                </td>
                <td id="logo-right">
                </td>
            </tr>
            <tr>
               <td id="logo-background">  
               <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="X-Small"
                        ForeColor="Black" Text="Version 1.3.0"></asp:Label><br />
               </td>
               <td id="display-area" colspan="2">
                <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"></asp:contentplaceholder>
               
                </td>
            </tr>
            <tr>
            <td id="bottom-stripe" colspan="3">
            </td>
            </tr>
        </table>
        </div>
    </form>
</body>

a I have a link to a css-file:

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

The css file looks like this:

body {

}
#logo-left {background-image: url('graphics/Design2007-left.jpg');
background-repeat: no-repeat; height: 65px; padding:0; width: 165px;
}

#logo-right {background-image: url('graphics/Design2007-right.jpg');
background-repeat: no-repeat;  height: 65px; width: 553px; padding: 0px;
}

#area-background {background-image: url('graphics/Design2007-background.jpg');
background-repeat: repeat; height: 65px; padding: 0px;
}

#logo-background {height: 800px; background-image: url('graphics/Design2007-background.jpg');
background-repeat: repeat; padding: 3px; vertical-align: top;
}

#display-area {vertical-align:top; padding: 5px; background-color:#e9e9e9;
}

#bottom-stripe {background-image: url('graphics/Design2007-goldbackground.jpg');
background-repeat: repeat; height: 20px;
}

The idea is to have a graphic in left and right corner and fill the middle to 100% with green 1x1 px.

This works without problems on my local pc - please see attachment. The problem is that when exactly the same tags is run on the test and production server, the middle pixels are not shown - please see attachment. I have several other applications build the same way that works on the same servers.

If I omit the right graphic, the middle 1x1 px ar actually shown.

I can not figure out this difference in functionality.

Do you have any suggestion? It will be very welcome!
EE.docx
Kim NeesgaardAsked:
Who is Participating?
 
Kim NeesgaardConnect With a Mentor Author Commented:
I made a lot of changes in these tags and finally I got it work. I think - not sure - that what got it work was adding style="table-layout:fixed" and then control the content in the first row of the table with:

<tr>
            <td class="top-stripe" style="width:165px;">&nbsp</td>
            <td class="top-stripe">&nbsp</td>
            <td class="top-stripe" style="width:553px">&nbsp</td>
</tr>

The tags that worked are here:

Masterpage

<body style="background-color: #FFFFFF; margin: 0px; padding: 0px; border-top:0px;">
    <form id="form1" runat="server">
    <div>
        <table width="100%" cellspacing="0" style="table-layout:fixed">
            <tr>
            <td class="top-stripe" style="width:165px;">&nbsp</td>
            <td class="top-stripe">&nbsp</td>
            <td class="top-stripe" style="width:553px">&nbsp</td>
            </tr>
            <tr>
            </tr>
            <tr>
                <td id="logo-left">
                </td>
                <td id="area-background">
                </td>
                <td id="logo-right">
                </td>
            </tr>
            <tr>
               <td id="logo-background">  
               <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="X-Small"
                        ForeColor="Black" Text="Version 3.2.0"></asp:Label><br />
                   <br />
                   <br />
                   &nbsp;</td>
               <td id="display-area" colspan="2">
                <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"></asp:contentplaceholder>
                   &nbsp;
                </td>
            </tr>
            <tr>
            <td id="bottom-stripe" colspan="3">
            </td>
            </tr>
        </table>
        </div>
    </form>
</body>

CSS-file

body {

}

#logo-left {background-image: url('graphics/Design2007-left.jpg');
background-repeat: no-repeat; height: 65px; padding:0; width: 165px;
}

#logo-right {background-image: url('graphics/Design2007-right.jpg');
background-repeat: no-repeat;  height: 65px; padding: 0px;
}

#logo-background {height: 800px; background-image: url('graphics/Design2007-background.jpg');
background-repeat: repeat; padding: 0px; vertical-align: top;
}

#display-area {vertical-align:top; padding: 5px; background-color:#e9e9e9;
}
td.top-stripe {background-image: url('graphics/Design2007-goldbackground.jpg');
background-repeat: repeat; height: 20px; padding: 0px;
}

#bottom-stripe {background-image: url('graphics/Design2007-goldbackground.jpg');
background-repeat: repeat; height: 20px;
}

#area-background {background-image: url('graphics/Design2007-background.jpg');
background-repeat: repeat; height: 65px; padding: 0px;
}
0
 
KhiluCommented:
Try to set width of wrapper div to 100% and put &nbsp; in every TD

#wrapper{width: 100%;}

#wrapper table {width: 100%;}

<div id="wrapper">
    <table width="100%" cellspacing="0">
            <tr>
                <td id="logo-left">
&nbsp;
                </td>
                <td id="area-background">
&nbsp;
                </td>
                <td id="logo-right">
&nbsp;
                </td>
            </tr>
</div>

Open in new window

0
 
Kim NeesgaardAuthor Commented:
I have tried it but still the area-background is not shown.
0
 
Kim NeesgaardAuthor Commented:
Rebuilding tags over and over again resulted in a solution that worked and I have used it on several other applications with good result.
0
All Courses

From novice to tech pro — start learning today.