Link to home
Start Free TrialLog in
Avatar of rkulp
rkulpFlag for United States of America

asked on

CSS Rendering Problem

I have a difference between the form in the IDE and the rendered form. The body of the form is centered in the page but is not as wide as the graphic at the top. The graphic is 800px wide but the body seems to render to 700px. The attached PDF file shows both pages. The CSS file is also attached. The original version was for 700px wide and was changed to 800px wide. I changed all the width entries to reflect the wider page. That is when the problem occurred. How do I find what was left unchanged? I have searched the entire project for 700px. Any suggestions would be greatly appreciated. TLC-IDE-vs-Render.pdf TLC.css
Avatar of HainKurt
HainKurt
Flag of Canada image

pdf does not help...
you should provide a link or full html source...
Avatar of rkulp

ASKER

HainKurt,

You can see from the PDF what it looks like. The source for the two pages is attached. Thanks for your quick response.
**************MasterPage Source*****************
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="TLC.master.vb" Inherits="TLC.TLC" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"  runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="Head" runat="server">
    </asp:ContentPlaceHolder>
 <!--   <link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" /> -->
    <link href="CSS/TLC.css" rel="stylesheet" type="text/css" runat="server" />
 <!--[if lt IE 7]>
        <link runat="server" rel="stylesheet"
            href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css"/>
    <![endif]-->

    <style type="text/css">
        .style1
        {
            width: 100px;
        }
    </style>

</head>
<body >
  <form id="form1" runat="server">
    <div id="pageWrapper">
      <div id="headerGraphic">
        <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/HeaderImage2.jpg" />  
      </div>
 
     <div id="bodyArea">
      <div id="bodyLeft">
        <br />
        <br />
        <table style="width: 100px">
            <tr>
                <td class="style1">
                  <asp:Menu ID="Menu1" runat="server"  
                    DataSourceID="SMDS1" Orientation="Vertical" 
                    StaticDisplayLevels="2" Height="50px" Width="100px" >
                  </asp:Menu>
                  <asp:SiteMapDataSource ID="SMDS1" runat="server" />
                <br />            
                </td>
            </tr>
            <tr>
                <td style="text-align: center" class="style1">
            <asp:LoginStatus ID="LoginStatus1" runat="server" 
            LogoutPageUrl="~/Default.aspx" LogoutAction="Redirect" />
            <br />
            
        <asp:LoginView ID="LoginView1" runat="server">
            <AnonymousTemplate>
                <br />
            </AnonymousTemplate>
            <LoggedInTemplate>
                <asp:Label ID="Label1" runat="server" Text="Welcome back,"></asp:Label>
                <asp:LoginName ID="LoginName1" runat="server" />
            </LoggedInTemplate>
            <RoleGroups>
                <asp:RoleGroup Roles="Admin">
                    <ContentTemplate>
                        Welcome back,<br />
                        <asp:LoginName ID="LoginName2" runat="server" />
                        <br />
                        <asp:HyperLink ID="lnkAdminBuildingRental" runat="server" 
                            NavigateUrl="~/BuildingRental.aspx">Building Rental</asp:HyperLink>
                        <br />
                        <asp:HyperLink ID="lnkAdminEditableCalendar" runat="server" NavigateUrl="~/Calendar.aspx">Editable Calendar</asp:HyperLink>
                        <br />
                        <asp:HyperLink ID="lnkAdminScheduling" runat="server">Scheduling</asp:HyperLink>
                    </ContentTemplate>
                </asp:RoleGroup>
                <asp:RoleGroup Roles="RentalMgr">
                    <ContentTemplate>
                        Welcome back,<br />
                        <asp:LoginName ID="LoginName3" runat="server" />
                        <br />
                        <asp:HyperLink ID="lnkRentalMgrBuildingRental" runat="server" 
                            NavigateUrl="~/BuildingRental.aspx">Building Rental</asp:HyperLink>
                        <br />
                        <asp:HyperLink ID="lnkEditableCalendar" runat="server" NavigateUrl="~/Calendar.aspx">Editable Calendar</asp:HyperLink>
                    </ContentTemplate>
                </asp:RoleGroup>
                <asp:RoleGroup Roles="Scheduler">
                <ContentTemplate>
                Welcome back, <br />
                <asp:LoginName ID="LoginName4" runat="server" />
                        <asp:HyperLink ID="lnkSchedEditableCalendar" runat="server" NavigateUrl="~/Calendar.aspx">HyperLink</asp:HyperLink>
                        <br />
                        <asp:HyperLink ID="lnkSchedScheduling" runat="server">Scheduling</asp:HyperLink>
                
                </ContentTemplate>
                </asp:RoleGroup>
                <asp:RoleGroup Roles="RegularMember">
                </asp:RoleGroup>
            </RoleGroups>
        </asp:LoginView>
            
                </td>
            </tr>
        </table>
    </div>
    <div id="bodyRight">
        <asp:ContentPlaceHolder ID="contentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
    </div>
   </div>

     <div id="footerArea">&copy 2011 Tullahoma Lions Club</div>
    
    </div>

  </form>
</body>
</html>

*******************************************************************************************************

*************************HTML for Displayed Page********************************************************

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/TLC.Master" CodeBehind="Default.aspx.vb" Inherits="TLC.CalendarPage" %>
<script runat="server">

    </script>


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  </ajaxToolkit:ToolkitScriptManager>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConflictDetection="CompareAllValues" 
            ConnectionString="<%$ ConnectionStrings:TLCCMembersOnlyConnectionString %>" 
            DeleteCommand="DELETE FROM [BldgUser] WHERE [ReservationID] = @original_ReservationID AND [LastName] = @original_LastName AND (([FirstName] = @original_FirstName) OR ([FirstName] IS NULL AND @original_FirstName IS NULL)) AND (([Address1] = @original_Address1) OR ([Address1] IS NULL AND @original_Address1 IS NULL)) AND (([Address2] = @original_Address2) OR ([Address2] IS NULL AND @original_Address2 IS NULL)) AND (([City] = @original_City) OR ([City] IS NULL AND @original_City IS NULL)) AND (([State] = @original_State) OR ([State] IS NULL AND @original_State IS NULL)) AND (([Zip] = @original_Zip) OR ([Zip] IS NULL AND @original_Zip IS NULL)) AND (([Phone] = @original_Phone) OR ([Phone] IS NULL AND @original_Phone IS NULL)) AND (([Organization] = @original_Organization) OR ([Organization] IS NULL AND @original_Organization IS NULL))" 
            InsertCommand="INSERT INTO [BldgUser] ([LastName], [FirstName], [Address1], [Address2], [City], [State], [Zip], [Phone], [Organization]) VALUES (@LastName, @FirstName, @Address1, @Address2, @City, @State, @Zip, @Phone, @Organization)" 
            OldValuesParameterFormatString="original_{0}" 
            SelectCommand="SELECT [LastName], [FirstName], [Address1], [Address2], [City], [State], [Zip], [Phone], [Organization], [ReservationID] FROM [BldgUser] ORDER BY [LastName], [FirstName], [Organization]" 
            UpdateCommand="UPDATE [BldgUser] SET [LastName] = @LastName, [FirstName] = @FirstName, [Address1] = @Address1, [Address2] = @Address2, [City] = @City, [State] = @State, [Zip] = @Zip, [Phone] = @Phone, [Organization] = @Organization WHERE [ReservationID] = @original_ReservationID AND [LastName] = @original_LastName AND (([FirstName] = @original_FirstName) OR ([FirstName] IS NULL AND @original_FirstName IS NULL)) AND (([Address1] = @original_Address1) OR ([Address1] IS NULL AND @original_Address1 IS NULL)) AND (([Address2] = @original_Address2) OR ([Address2] IS NULL AND @original_Address2 IS NULL)) AND (([City] = @original_City) OR ([City] IS NULL AND @original_City IS NULL)) AND (([State] = @original_State) OR ([State] IS NULL AND @original_State IS NULL)) AND (([Zip] = @original_Zip) OR ([Zip] IS NULL AND @original_Zip IS NULL)) AND (([Phone] = @original_Phone) OR ([Phone] IS NULL AND @original_Phone IS NULL)) AND (([Organization] = @original_Organization) OR ([Organization] IS NULL AND @original_Organization IS NULL))">
            <DeleteParameters>
                <asp:Parameter Name="original_ReservationID" Type="Int32" />
                <asp:Parameter Name="original_LastName" Type="String" />
                <asp:Parameter Name="original_FirstName" Type="String" />
                <asp:Parameter Name="original_Address1" Type="String" />
                <asp:Parameter Name="original_Address2" Type="String" />
                <asp:Parameter Name="original_City" Type="String" />
                <asp:Parameter Name="original_State" Type="String" />
                <asp:Parameter Name="original_Zip" Type="String" />
                <asp:Parameter Name="original_Phone" Type="String" />
                <asp:Parameter Name="original_Organization" Type="String" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="LastName" Type="String" />
                <asp:Parameter Name="FirstName" Type="String" />
                <asp:Parameter Name="Address1" Type="String" />
                <asp:Parameter Name="Address2" Type="String" />
                <asp:Parameter Name="City" Type="String" />
                <asp:Parameter Name="State" Type="String" />
                <asp:Parameter Name="Zip" Type="String" />
                <asp:Parameter Name="Phone" Type="String" />
                <asp:Parameter Name="Organization" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="LastName" Type="String" />
                <asp:Parameter Name="FirstName" Type="String" />
                <asp:Parameter Name="Address1" Type="String" />
                <asp:Parameter Name="Address2" Type="String" />
                <asp:Parameter Name="City" Type="String" />
                <asp:Parameter Name="State" Type="String" />
                <asp:Parameter Name="Zip" Type="String" />
                <asp:Parameter Name="Phone" Type="String" />
                <asp:Parameter Name="Organization" Type="String" />
                <asp:Parameter Name="original_ReservationID" Type="Int32" />
                <asp:Parameter Name="original_LastName" Type="String" />
                <asp:Parameter Name="original_FirstName" Type="String" />
                <asp:Parameter Name="original_Address1" Type="String" />
                <asp:Parameter Name="original_Address2" Type="String" />
                <asp:Parameter Name="original_City" Type="String" />
                <asp:Parameter Name="original_State" Type="String" />
                <asp:Parameter Name="original_Zip" Type="String" />
                <asp:Parameter Name="original_Phone" Type="String" />
                <asp:Parameter Name="original_Organization" Type="String" />
            </UpdateParameters>
        </asp:SqlDataSource>

        <asp:ObjectDataSource ID="odsBuildingUse" runat="server" 
            DeleteMethod="Delete" InsertMethod="Insert" 
            OldValuesParameterFormatString="original_{0}" SelectMethod="GetDataByReservationDate" 
            TypeName="TLC.dsBuildingTableAdapters.BuildingUseTableAdapter" 
            UpdateMethod="Update">
            <SelectParameters>
                <asp:ControlParameter ControlID="BuildingUseCalendar" DbType="Date" 
                    Name="ReservationDate" PropertyName="SelectedDate" />
            </SelectParameters>
            <DeleteParameters>
                <asp:Parameter Name="Original_ID" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="ReservationDate" Type="DateTime" />
                <asp:Parameter Name="ReservationType" Type="String" />
                <asp:Parameter Name="Contact" Type="String" />
                <asp:Parameter Name="ContactPhone" Type="String" />
                <asp:Parameter Name="ReservationID" Type="Int32" />
                <asp:Parameter Name="SerialID" Type="Int32" />
                <asp:Parameter Name="ReservationTitle" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="ReservationDate" Type="DateTime" />
                <asp:Parameter Name="ReservationType" Type="String" />
                <asp:Parameter Name="Contact" Type="String" />
                <asp:Parameter Name="ContactPhone" Type="String" />
                <asp:Parameter Name="ReservationID" Type="Int32" />
                <asp:Parameter Name="SerialID" Type="Int32" />
                <asp:Parameter Name="ReservationTitle" Type="String" />
                <asp:Parameter Name="Original_ID" Type="Int32" />
            </UpdateParameters>
        </asp:ObjectDataSource>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>

<table style="width:400px">

    <tr>
        <td align="center" >
            <br />
            <asp:DropDownList ID="drpCalMonth" runat="server" AutoPostBack="True"></asp:DropDownList>
            <asp:DropDownList ID="drpCalYear" runat="server" AutoPostBack="True"></asp:DropDownList>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Calendar ID="BuildingUseCalendar" runat="server" Height="184px" 
                ShowTitle="false" Width="400px" ForeColor="Black">
                <DayStyle HorizontalAlign="Center" VerticalAlign="Top" />
                <SelectedDayStyle BackColor="#00CCFF" Font-Bold="True" Font-Underline="True" 
                    HorizontalAlign="Center" VerticalAlign="Top" ForeColor="Black" />
                <SelectorStyle Font-Bold="True" Font-Underline="True" ForeColor="Black" 
                    HorizontalAlign="Center" VerticalAlign="Top" />
            </asp:Calendar>
        </td>
    </tr>
</table>
        
        </ContentTemplate>
    </asp:UpdatePanel>

<asp:Button ID="lnkFake" runat="server"   />

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="lnkFake"
    PopupControlID="ModalPanel" DropShadow="false" 
     OkControlID="OKButton">
</ajaxToolkit:ModalPopupExtender>

<asp:Panel ID="ModalPanel" runat="server" Width="300px" Height="400px" 
    BackColor="White" ForeColor="Black" BorderColor="Black" BorderStyle="Solid" 
    BorderWidth="2px" style="display:none" >
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
        
        <asp:DetailsView ID="dvBuildingUse" runat="server" AutoGenerateRows="False" 
            DataKeyNames="ID" DataSourceID="odsBuildingUse" Height="350px" 
            Width="250px" DefaultMode="ReadOnly" AllowPaging="True"> 
            <Fields>
                <asp:BoundField DataField="ReservationDate" HeaderText="ReservationDate" 
                    SortExpression="ReservationDate" />
                <asp:BoundField DataField="ReservationType" HeaderText="ReservationType" 
                    SortExpression="ReservationType" />
                <asp:BoundField DataField="Contact" HeaderText="Contact" 
                    SortExpression="Contact" />
                <asp:BoundField DataField="ContactPhone" HeaderText="ContactPhone" 
                    SortExpression="ContactPhone" />
                <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" 
                    ReadOnly="True" SortExpression="ID" />
                <asp:BoundField DataField="ReservationID" HeaderText="ReservationID" 
                    SortExpression="ReservationID" />
                <asp:BoundField DataField="SerialID" HeaderText="SerialID" 
                    SortExpression="SerialID" />
                <asp:BoundField DataField="ReservationTitle" HeaderText="ReservationTitle" 
                    SortExpression="ReservationTitle" />
            </Fields>
        </asp:DetailsView>

      </ContentTemplate>
</asp:UpdatePanel>
    
    <br />
<asp:Button ID="OKButton" runat="server" Text="Close" Visible="True" />

  
</asp:Panel>

    </asp:Content>

*************************************************************************************************************

Open in new window

did you check TLC.master page?
post the screenshot of page in browser...
post the html source, not the code to identify the issue...

better, can you provide a link?
SOLUTION
Avatar of HainKurt
HainKurt
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of rkulp

ASKER

I was able to get screen shots of the incorrect rendering and the correct renderng. I did not change code between the two images. User generated image User generated image
Avatar of rkulp

ASKER

HainKurt,

Thanks for sticking with me. I have no idea what caused the change. It was just as if something from the original web app was stuck on the old values and then got unstuck.