Solved

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

Posted on 2013-01-24
4
248 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Get your Conversational Ransomware Defense e‑book

This e-book gives you an insight into the ransomware threat and reviews the fundamentals of top-notch ransomware preparedness and recovery. To help you protect yourself and your organization. The initial infection may be inevitable, so the best protection is to be fully prepared.

Question has a verified solution.

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

There is an easy way, in .NET, to centralize the treatment of all unexpected errors. First of all, instead of launching the application directly in a Form, you need first to write a Sub called Main, in a module. Then, set the Startup Object to th…
Whether you’re a college noob or a soon-to-be pro, these tips are sure to help you in your journey to becoming a programming ninja and stand out from the crowd.
This video teaches viewers about errors in exception handling.
The viewer will be introduced to the technique of using vectors in C++. The video will cover how to define a vector, store values in the vector and retrieve data from the values stored in the vector.

626 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