Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2013-01-24
4
Medium Priority
?
250 Views
Last Modified: 2014-03-11
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
0
Comment
Question by:Kim Neesgaard
  • 3
4 Comments
 
LVL 3

Expert Comment

by:Khilu
ID: 38814039
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
 

Author Comment

by:Kim Neesgaard
ID: 38814066
I have tried it but still the area-background is not shown.
0
 

Accepted Solution

by:
Kim Neesgaard earned 0 total points
ID: 39911734
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
 

Author Closing Comment

by:Kim Neesgaard
ID: 39919954
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
The goal of the tutorial is to teach the user how to use functions in C++. The video will cover how to define functions, how to call functions and how to create functions prototypes. Microsoft Visual C++ 2010 Express will be used as a text editor an…
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …
Suggested Courses

783 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question