same page renders differently from VS and prod server - asp.net

I have an ASP.NET webpage.
If I run it via VS server, I get a first rendering (localhost screenshot).
When I upload the same code on the prod IIS server, and browse the same page on the same browser of the same computer with the same parameters,
I get a very different rendering (IIS prod screenshot).
What can be the cause of this?
For instance, the top left image is apparently rendered with a different size. This is not something I would have expected?????
Code of the page if it helps (I don't think so).
<div class="container-fluid" >
<div class="row" style="background-color:#002337;">
<div class="col-md-3" >
<table id="Tableau_01" width="801px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="middle" bgcolor="#002337">
<img src="images/2016_page_html/Elements-pageHTML-Haut.png" alt="" width="220" height="200">
</td>
</tr>
<tr>
<td width="301" height="400" align="left" valign="top" bgcolor="#002337" style="margin-left: 50px;font-size: 0.80em; color: #FFF; font-family: News Gothic Medium, Helvetica, Verdana, Arial; line-height: 1.28em;">
<p style="margin-top: 20px; margin-bottom: 0px;margin-left: 50px;">
<asp:Image ID="i_imgLogoBleu" runat="server" Width="250px" />
</p>
<h3>
<p style="margin-left: 50px;">
<asp:Label ID="i_lblAdresse" runat="server" />
</p>
</h3>
</td>
</tr>
</table>
</div>
<div class="col-md-9 " style="background-color: #002337;height:600px;margin-top:50px" >
<form id="form1" class="form-horizontal" runat="server" >
<div class="" align="left" >
<div class="col-md-12" >
<telerik:RadScriptManager runat="server" ID="RadScriptManager1"></telerik:RadScriptManager>
<telerik:RadMediaPlayer ID="RadMediaPlayer1" runat="server" AutoPlay="True" Height="500px" Width="80%" Source="~/videos/video.mp4" BorderStyle="None" Skin="Silk" StartVolume="80" HDSource="~/videos/video.mp4">
</telerik:RadMediaPlayer>
</div>
</div>
</form>
</div>
</div>
<div class="row" style="background-color:#ffffff;" >
<div class="col-md-2"></div>
<div class="col-md-8">
<p style="padding-left: 15px; padding-top: 25px; font-family: Garamond, Georgia, Helvetica, Verdana; font-size: 2em; color: #002337;line-height: 1.2em; font-weight: bold;">
<asp:Label ID="i_lblContenu" runat="server" />
</p>
</div>
<div class="col-md-2">
<img src="images/2016_page_html/Elements-pageHTML-Bas.png" width="120" height="100" alt="logo_bas" name="logo_bas" id="logo_bas">
</div>
</div>
</div>
Thx in advance for sharing your knowledge.
A
Edit: the image difference does not look so obvious into the post. Do open both images into a new tab to really see the differences.
Main differences are:
size of the top left image
both image have a top blue frame and a bottom white frame. But on the localhost version, the white frame's height = the bottom image's height. On the prod version, the height is much bigger than this.

Related

Dynamically arrange images in aspx page

When I open my aspx page I have 3 images horizontally side by side on desktop. But I want to open my page in mobile with these images aligned in center vertically. The content on the page should remain same except the images.
Aspx page
<div class="row enrollmentStep">
<div class="col-xs-12 step-container">
<!-- Top Container -->
<div class="row inner-step-container">
<div class="col-xs-12 top-spacing">
<div align="center" class="row">
<div id="pageDescription" class="col-xs-12" runat="server"></div>
</div>
<table align="center" border="0" cellpadding="3" cellspacing="0" width="100%">
<tr>
<div align="center">
<asp:Image ID="qrCodeImage" runat="server" Height="200px" Width="200px" Visible="true" />
</div>
<div align="center">
<a id="secret" runat="server" class="txtLabel" visible="true" target="_blank"></a>
<td>
<div align="center">
<label id="siLabel" runat="server" for="siBox" class="txtLabel"></label>
</div>
</td>
</div>
</tr>
</table>
<div class="imgrow" align="center" visible="true">
<div class="top-spacing bottom-spacing" style="float: left; margin-left: 20%; margin-bottom: 0.5em; overflow:auto">
<a id="iTunesLink" runat="server" class="txtLabel" visible="true" target="_blank">
<asp:Image ID="itunes" Height="64px" Width="128px" runat="server" Visible="true" />
</a>
</div>
<div class="top-spacing bottom-spacing" style="float: left; align:center; margin-left: 20%; margin-bottom: 0.5em; overflow:auto">
<a id="play_storeLink" runat="server" class="txtLabel" visible="true" target="_blank">
<asp:Image ID="play_store" Height="64px" Width="128px" runat="server" Visible="true" />
</a>
</div>
<div class="top-spacing bottom-spacing" style="float: left; margin-left: 20%; margin-bottom: 0.5em; overflow:auto">
<a id="windows_storeLink" runat="server" class="txtLabel" visible="true" target="_blank">
<asp:Image ID="windows_store" Height="64px" Width="128px" runat="server" Visible="true" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>

CSS for width of asp:ListView

I've read that the ListView itself can't take CSS to adjust its width, but that you do it in the ItemTemplate, but I just can't get it. I'm trying to put three ListView controls side by side. Each control has an image and text to the right. Think Windows Explore file list, but only a single column with a name.
The text in each ListView will be less than 32 characters, so there should be plenty of room, but each ListView takes up more than 50% of the screen no matter what I've tried. CSS is not my strong suit.
Current CSS which is wrong
.lv_table{
width:500px;
border: 1px solid #ccc;
}
.lv_tr
{
width: 100px;
}
.list_view
{
border-style: solid;
border-width: 2px;
border-color: #000000;
}
.list_image
{
float: left;
display: inline-block;
}
.list_item_large
{
font-size: 1.6em;
color: #000000;
padding: 8px 0px 0px 0px;
margin: 0px auto;
display: inline-block;
text-align:left;
min-height: 32px;
}
ListView Controls
<table class="lv_table">
<tr class="lv_tr"><td class="list_view">
<asp:ListView runat="server" ID="lvwCategories" >
<LayoutTemplate>
<div style="width: 500px;">
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="list_image">
<img alt="" src='<%# "Styles/Images/" + Eval("category_icon") %>' height="32" width="32" />
</div>
<div class="list_item_large ">
<a href='sCategories.aspx?cat_id=<%# Eval("category_id")%>'><%# Eval("Cat_title")%></a>
</div>
</ItemTemplate>
<ItemSeparatorTemplate>
<div>
</div>
</ItemSeparatorTemplate>
<EmptyDataTemplate>
<div>
<img alt="" src="Styles/Images/ic_lw.png" height="48" width="48" />
</div>
<div>
<b>No Categories Found</b>
</div>
</EmptyDataTemplate>
</asp:ListView>
</td>
<td> </td>
<td class="list_view">
<asp:ListView runat="server" ID="lvwLists">
<LayoutTemplate>
<div style="width: 500px;">
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="list_image">
<img alt="" src='<%# "Styles/Images/" + Eval("category_icon") %>' height="32" width="32" />
</div>
<div class="list_item_large ">
<a href='sCategories.aspx?cat_id=<%# Eval("category_id")%>'><%# Eval("Cat_title")%></a>
</div>
</ItemTemplate>
<ItemSeparatorTemplate>
<div>
</div>
</ItemSeparatorTemplate>
<EmptyDataTemplate>
<div>
<img alt="" src="Styles/Images/ic_lw.png" height="48" width="48" />
</div>
<div>
<b>No Categories Found</b>
</div>
</EmptyDataTemplate>
</asp:ListView>
</td>
<td> </td>
<td class="list_view">
<asp:ListView runat="server" ID="lvwItems">
<LayoutTemplate>
<div style="width: 500px;">
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="list_image">
<img alt="" src='<%# "Styles/Images/" + Eval("category_icon") %>' height="32" width="32" />
</div>
<div class="list_item_large ">
<a href='sCategories.aspx?cat_id=<%# Eval("category_id")%>'><%# Eval("Cat_title")%></a>
</div>
</ItemTemplate>
<ItemSeparatorTemplate>
<div>
</div>
</ItemSeparatorTemplate>
<EmptyDataTemplate>
<div>
<img alt="" src="Styles/Images/ic_lw.png" height="48" width="48" />
</div>
<div>
<b>No Categories Found</b>
</div>
</EmptyDataTemplate>
</asp:ListView>
</td>
</tr>
</table>
You can change your .lv_table style width to 100% and give your .list_view style a width:33%; and remove all the inline width:500px; of your <div>'s in your LayoutTemplates.

asp.net how to know when this tab selected

This is my aspx code
<div id="tabs-1">
<table id="BookingTable" runat="server" class="tableResultClass">
<tr>
<th>ID</th>
<th>PlanTime</th>
</tr>
</table>
</div>
<div id="tabs-2">
<div id="circleG" style="margin-left: auto; margin-right: auto; padding-top: 50px; padding-bottom: 50px;">
<div id="circleG_1" class="circleG"></div>
<div id="circleG_2" class="circleG"></div>
<div id="circleG_3" class="circleG"></div>
</div>
</div>
<div id="tabs-3">
<p>
Date:
<input type="text" id="datepicker" runat="server">
</p>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Button ID="BookingForDate" runat="server" OnClick="BookingForDate_Click" Text="Search" />
<span style="color: red" id="errorDateMessage" runat="server"></span>
<div runat="server" id="circleG2" style="margin-left: auto; margin-right: auto; margin-left: 400px; padding-bottom: 60px;">
<div id="circleG_1" class="circleG"></div>
<div id="circleG_2" class="circleG"></div>
<div id="circleG_3" class="circleG"></div>
</div>
<table id="DateBookingTable" runat="server" class="tableResultClass">
<tr>
<th>ID</th>
<th>PlanTime</th>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
It is simple code that have three div as tabs.
I want to know which tab is selected in a specific moment. how please?
I think it is something about session but I don't know what it is
You can do the following:-
1) Declare a global variable.
2) Attach a onClick event for each div. Whenever this event is fired, set this global variable with the id of corresponding div.
3) Access this global variable in the required function.

asp:menu does not render properly

I'm trying to deploy a simple web application developped with VS2010 in ASP.NET
Everything's going fine on IIS locally on the development machine, but I encouter an issue once deployed on an Apache server : The menu does not render properly, it seems it does not take the CSS into account.
Does anyone already have such an issue ?
Thanks for your help !
[EDIT]
Appache version 2.2.22
Mono version 2.10.8.1
Site.Master :
<body>
<form runat="server">
<div class="page">
<div class="TopBlank"> </div>
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem Text="Google Maps">
<asp:MenuItem Text="HTML" Value="HTML" NavigateUrl="~/Map.htm"></asp:MenuItem>
<asp:MenuItem Text="ASPX" Value="ASPX" NavigateUrl="~/Map.aspx"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Liens.aspx" Text="Liens utiles"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
</form>
</body>
CSS :
.menu
{
padding: 4px 0px 4px 8px;
}
.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
.menu ul li a, .menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
.menu ul ul
{
margin-left: 10%;
}
The problem I identified is that when runnning on IIS, an asp:menu is converted into a HTML div whereas with mono it is converted into a HTML table. It seems that when running on mono, the CSS class is not found as shown in the source :
<!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" xml:lang="en">
<head><title>
</title><link rel="stylesheet" type="text/css" href="Styles/Site.css" />
<style type="text/css">
.ctl00_NavigationMenu_0 {background-color:White;}
.ctl00_NavigationMenu_1 {border-style:None;text-decoration:none;}
.ctl00_NavigationMenu_2 {}
</style></head>
<body>
<form name="aspnetForm" method="post" action="Arduino.aspx" id="aspnetForm">
[......]
<div class="clear hideSkiplink">
<a href="#ctl00_NavigationMenu_SkipLink">
<img alt="Skip Navigation Links" height="0" width="0" src="/WebSite/WebResource.axd?d=2OmH9jTSogXsrUt6aDvnYEihIak%3d_NWdhSxeypCYSJgIFnBFWuKjP9Rs%3d_f&t=634787585370000000" style="border-width:0px;" /></a>
<table cellpadding="0" cellspacing="0" border="0" id="ctl00_NavigationMenu" class="menu ctl00_NavigationMenu_2" IncludeStyleBlock="false">
<tr>
<td onmouseover="javascript:Menu_OverStaticLeafItem ('ctl00_NavigationMenu','0')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','0')">
<table id="ctl00_NavigationMenu_0i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;">Home
</td>
</tr>
</table>
</td>
<td style="width:3px;"></td>
<td onmouseover="javascript:Menu_OverItem ('ctl00_NavigationMenu','1',null)" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','1')">
<table id="ctl00_NavigationMenu_1i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;">Google Maps
</td><td>
<img src="/WebSite/WebResource.axd?d=2OmH9jTSogXsrUt6aDvnYEihIak%3d_sxBDVaG6ao8vAH1kuYRka4pbdXI%3d_f&t=634787585370000000" border="0" alt="Expand Google Maps" />
</td>
</tr>
</table>
</td>
<td style="width:3px;"></td>
<td onmouseover="javascript:Menu_OverStaticLeafItem ('ctl00_NavigationMenu','2')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','2')">
<table id="ctl00_NavigationMenu_2i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;">
Liens utiles
</td>
</tr>
</table>
</td>
<td style="width:3px;">
</td>
<td onmouseover="javascript:Menu_OverStaticLeafItem ('ctl00_NavigationMenu','3')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','3')">
<table id="ctl00_NavigationMenu_3i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;">
About
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="" id="ctl00_NavigationMenu_1s" style="visibility:hidden;position:absolute;z-index:1;left:0px;top:0px;">
<div id="ctl00_NavigationMenu_1cu" onmouseover="Menu_OverScrollBtn ('ctl00_NavigationMenu','1','u')" onmouseout="Menu_OutScrollBtn ('ctl00_NavigationMenu','1','u')" style="display:block;text-align:center;">
<img src="/WebSite/WebResource.axd?d=2OmH9jTSogXsrUt6aDvnYEihIak%3d_BDOep8uzgXhnBosTOAXwCS8Rjzo%3d_f&t=634787585370000000" alt="Scroll up" />
</div>
<div id="ctl00_NavigationMenu_1cb">
<div id="ctl00_NavigationMenu_1cc">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td onmouseover="javascript:Menu_OverDynamicLeafItem ('ctl00_NavigationMenu','1_0','1')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','1_0','1')">
<table id="ctl00_NavigationMenu_1_0i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:100%;white-space:nowrap;">
HTML
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td onmouseover="javascript:Menu_OverDynamicLeafItem ('ctl00_NavigationMenu','1_1','1')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','1_1','1')">
<table id="ctl00_NavigationMenu_1_1i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:100%;white-space:nowrap;">
ASPX</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<div id="ctl00_NavigationMenu_1cd" onmouseover="Menu_OverScrollBtn ('ctl00_NavigationMenu','1','d')" onmouseout="Menu_OutScrollBtn ('ctl00_NavigationMenu','1','d')" style="display:block;text-align:center;">
<img src="/WebSite/WebResource.axd?d=2OmH9jTSogXsrUt6aDvnYEihIak%3d_BiLWkNe4ZNGZnI7LWDxYAtinS8U%3d_f&t=634787585370000000" alt="Scroll down" />
</div>
</div>
<a id="ctl00_NavigationMenu_SkipLink"></a>
</div>
To be compared to the IIS version :
<div class="clear hideSkiplink">
<img alt="Liens Ignorer la navigation" src="/WebResource.axd?d=vNc13qxX3XhBCykqqeAM4K6DxyzXtiKPMSkmgOEeg_C2LMTfPWT8UVPq_FQ2dO_k8csGANppvDNQ8U1ILvqfCCUzXeU7VT9PTkQGnNHogQU1&t=634679288663570000" width="0" height="0" style="border-width:0px;" /><div class="menu" id="NavigationMenu">
<ul class="level1">
<li>
<a class="level1" href="Default.aspx">Home</a>
</li>
<li>
<a class="popout level1" href="#" onclick="__doPostBack('ctl00$NavigationMenu','Google Maps')">Google Maps</a>
<ul class="level2">
<li>
<a class="level2" href="Map.htm">HTML</a>
</li>
<li>
<a class="level2" href="Map.aspx">ASPX</a>
</li>
</ul>
</li>
<li>
<a class="level1" href="Liens.aspx">Liens utiles</a>
</li>
<li>
<a class="level1" href="About.aspx">About</a>
</li>
</ul>
</div>
<a id="NavigationMenu_SkipLink"></a>
</div>
Ok, after hours and hours to try to find the solution in the web.config, I finally found that the solution came from the version of mono-apache-server. I used the mono-apache-server2 instead of the 4.
I then installed the proper version, configured the virtual host and all is working fine now !
The anchor tag that ASP.NET puts in automatically adds the extra vertical space above the menu. An anchor tag gets put above the menu automatically and that screws up the rendering in Internet Explorer and Google Chrome. It works properly in Mozilla Firefox even with the anchor with the image.
To fix, add the SkipLinkText="" attribute to your ASP.NET menu control and that will fix the rendering issue.
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" SkipLinkText="">

div with dynamic elements pushing other div down

So, I have a predicament. My tabs are pushing down the content below it. Here is some of the code:
<div id="navigation">
<div id="test" class="blue">
<p>Home</p>
<p class="subtext">View/update contact information</p>
</div>
<div id="lessons" class="blue">
<p>Projects</p>
<p class="subtext">Create/open projects, view existing reports</p>
</div>
<div id="test" class="blue">
<p>Help</p>
<p class="subtext">If something doesn't work, click here</p>
</div>
</div>
<div id="contain3">
<table id="maintable" align="center" width="940" cellspacing="0" cellpadding="0" class="lessontablemain">
<tr align="center" valign="top">
<td height="500" cellpadding="0" cellspacing="0">
<!--<div id="maincontent">-->
<table align="left" cellspacing="4" cellpadding="4" style=" margin-top:10px; background-color:transparent; border: 0;" width="100%" class="textfont_charms">
<tr>
<td cellspacing="0" cellpadding="0" align="center" valign="top">
<br>
<!--template up-->
<!--side bar table below -->
<? include_once("sidebar.php"); ?>
</td>
<td cellspacing="0" cellpadding="0" width="100%" valign="top" align="center">
<table id="maintable" style=" margin-top:10px; background-color:transparent; border: 0;" cellspacing="0" cellpadding="0" height="100%" valign="top" width="100%">
<tr>
<td valign="top" align="center" width="100%" cellspacing="0" cellpadding="0" height="100%">
<div align="center" id="content" style="vertical-align: top;"></div>
</td>
</tr>
</table>
<!--template down-->
</div>
</td>
</tr>
</table>
</tr>
<tr valign="bottom">
<td style="background-color: #E2E2E2;">
<?
include('template/footer_tmpl.php');
?>
</td>
</tr>
</table>
</div>
Here is my css:
#contain3{
width:940px;
margin-left:auto;
margin-right:auto;
text-align:left;
/*position: absolute;*/
top: 137;
z-index: -1;
}
#navigation{
width:940px;
margin-left: 8px;
text-align:left;
font-family:"Lucida Grande","Lucida Sans",sans-serif;
font-size:12px;
top: 109;
/*position: absolute;*/
z-index: 2;
}
To see what I'm talking about, my site is: http://www.charmscorp.com/inspect/projects.php - click on the tabs up above. Don't mind the slowness of the site, it's a server issue... so you have to wait a few seconds for the tabs to initialize.
Also, as you can see, I commented out position absolute. I thought that would be the answer, but instead, it just put the tab div on top of the content... Please help, this is giving me a headache!
Instead of making the divs with class "blue" higher - and thus revealing the drop down - why don't you show() the paragraphs with class "subtext" themselves instead?
Have them set to display: none by default, and use JavaScript to reveal them. You'll need to set them to position: absolute also, so they don't push any content down.
ok, I fixed this. I made the position: absolute, and then margin-top:27px, which pushed the content div down to where I wanted it to be. Another problem arose though, which is IE related. I'll start a new thread for that one though, as it's a new problem. Thanks!

Resources