Solved

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

Posted on 2013-01-24
4
237 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Go is an acronym of golang, is a programming language developed Google in 2007. Go is a new language that is mostly in the C family, with significant input from Pascal/Modula/Oberon family. Hence Go arisen as low-level language with fast compilation…
The purpose of this article is to demonstrate how we can use conditional statements using Python.
This theoretical tutorial explains exceptions, reasons for exceptions, different categories of exception and exception hierarchy.
The viewer will learn how to clear a vector as well as how to detect empty vectors in C++.

840 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