asp:TextBox rendering disabled in FireFox 23.0.1 - asp.net

I had a working asp:TextBox control in an old webforms app that broke when FireFox upgraded from version 22.0 to 23.0.1 tonight. The code looks like:
<asp:TextBox ID="txtChainDescription" TextMode="MultiLine" Rows="5" Width="350px" runat="server" />
That's all. This renders in Chrome as
<div class="cleditorMain" style="width: 500px; height: 150px;">
<div class="cleditorToolbar" style="height: 27px;">
<div class="cleditorGroup">
<div class="cleditorButton" title="Bold"></div>v class="cleditorGroup">
... etc., but renders in FireFox as
<div class="cleditorMain" style="width: 500px; height: 150px;">
<div class="cleditorToolbar">
<div class="cleditorGroup">
<div class="cleditorButton cleditorDisabled" title="Bold" disabled="disabled" style="background-color: transparent;"></div>
... etc. So the difference is that the editor button is disabled, and the textarea that needs to be edited seems completely disabled as well. So a couple questions:
1) Why is this happening?
2) What changed in Firefox from version 22.0 to 23.0.1 that would be responsible for this?

Without testing it I can't say for sure but my money would be on browser definition files, eg please see
http://www.hanselman.com/blog/BugAndFixASPNETFailsToDetectIE10CausingDoPostBackIsUndefinedJavaScriptErrorOrMaintainFF5ScrollbarPosition.aspx
There's probably an issue with the definition files not recognizing v23 in FF.

Related

Input control width restricted in asp.net

I have a webforms project in asp.net. I'm using bootstrap 3. I have an input control in a form group (in a panel). I cannot override the max width of my input control to make it fit into the col width I have set.
I've tried to amend/remove the input {max-width} attribute in Site.css but this doesn't make any difference. Any ideas?
<div class="row">
<div class="form-group" >
<label for="txtName" class="col-md-3 control-label">*Material Name:</label>
<div class="col-md-9">
<input runat="server" id="txtName" type="text" class="form-control" title="" required />
</div>
</div>
</div>
Site.css extract that I changed from max-width: 287px :
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 100%;
}
Use the developer to tools on any of the browser to check the element of input because you're using runat="server" for the input the id will render differently in the browser hence your styling is not applying. I've checked on my local dev with a demo page and the input id is being rendered as MainContent_txtName instead of txtName. Of course yours will/might be different. Once you have the correct id all you need to do is
#MainContent_txtName
{
max-width: 100px !important;
}
I hope that answers your question

What is proper way to Center a Label element using CSS in a asp.net .master page

I am trying to put together a asp.net webforms website for a church fellowship organization and I am having to learn to work with building this website from scratch using Visual Studio Express 2013 for Web's Empty asp.net Website Template and since I have never done websites before, I am having to search through the Internet for examples, most of my programming experience comes from C# and I just don't seem to be able to find a solution for this.
Anyway my problem is that I can't figure out how to Center a asp.net Label on the SiteMasterPage.master
<div class="header1">
<br />
<br />
<h1 class="auto-style1">Calvary Christian FellowshipGA, Inc.</h1>
<div style="align-items: center">
<asp:Label ID="Label1" runat="server" CssClass="ccfgaLabel" ForeColor="#0066FF" Text="Calvary Christian FellowshipGA, Inc."></asp:Label>
</div>
<br />
<br />
<p>
Informational Text here.
</p>
<br />
<p>
More Informational Text here.
</p>
</div>
I've tried a couple things the above being the latest, the only thing I've found that actually worked was to use:
<center>
MY Label
</center>
the only issue with this use of 'center' is that I get the 'center' is deprecated warning. I would like to be able to do this correctly, could someone give me some suggestions how to get this done.
I tried the following from a .css file.
.ccfgaLabel
{
display: inline-block;
width: 230px;
/*margin-left: 10px;*/
margin-left: auto;
margin-right: auto;
}
The only thing that seemed to work in it were the
width: 230px;
and
margin-left: 10px;
I would like to set this up inside the css file since this is all gonna be on a MasterPage.
*Edit: I should point out that the only reason I decided to try a Label was that I wanted a Bordered and Shaded, Box aspect around the Text and I hadn't yet tried to see if bordering and shading was possible just around specific Text centered in the middle of the page.
So, since the comment worked, here's the posted answer.
Instead of your align-items that you set on the wrapper div, use the text-align property, that is used to specify the alignment of inline content:
<div style="text-align: center">
<asp:Label ID="Label1" runat="server" CssClass="ccfgaLabel" ForeColor="#0066FF" Text="Calvary Christian FellowshipGA, Inc."></asp:Label>
</div>
Though I recommend you not to set it as an inline style. Rather, give the div an id or a class and leave the property on the stylesheet.
MDN text-align docs

asp.net div Images not displayed in few Client machine

I have developed a Web Application where i have these following pages and their corresponding Problematic tags.
Login Page :
<div id="maindiv" runat="server" style="background-image: inherit; height: 997px;">
<img id="Img1" runat="server" src="images/Login1.jpg"
style="width: 100%; height: 978px" alt="" />
Master Page:
<div id="Div1" style="position: absolute">
<img src="images/Circle_300.jpg" style="height: 132px; width: 159px" />
</div>
and
<div id="logo">
<asp:Panel ID="ImgagePanel" runat="server"
BackImageUrl="~/images/Logo_2.jpg" Height="100%"
Width="100%" > </asp:Panel>
</div>
I have all those Images under "images" directory in the application. the images are getting displayed well and good in all our office environment systems and outside client machines too. but the same not getting displayed in my real Client office systems..but the div tag with "Div1" alone is getting displayed in their systems.but not other images. Don't know where im going wrong. Please help me out.
One More Info: When I right click and save on the place where image is to be displayed i get "blockedpage.gif" instead of the real image in the site whereas I can save the images from my machine. is it something with their security settings ?

CSS window resizing problems in IE6

Although almost nobody supports IE6 anymore, I've been given the task to design an IE6-compatible webpage.
Here's the code:
<body style="background-color: #ccccdd;">
<form id="form1" runat="server"
style="margin: 0px 80px 0px 80px;
background-color: #f1f1f1;">
<div id="divPage" style="width: 100%">
<div id="divSelectOption" runat="server">
<div id="divInstruct" style="float: left;
position: relative;
display: inline-block;">
Select your gender:
</div>
<div style="margin-left: 10px;
display: inline-block;">
<asp:RadioButton ID="rbFemale" runat="server" style="display: block;"
Text="Female" GroupName="grpGender" Checked="true" />
<asp:RadioButton ID="rbMale" runat="server" style="display: block;"
Text="Male" GroupName="grpGender" />
</div>
</div>
</div>
</form>
</body>
Here's the problem:
If an IE6 browser opens the page (whether maximized or restored (meaning when the window only covers part of the screen)), all is displayed normally.
However, if the page is loaded when the browser is maximized, and then the user minimizes it, divInstruct gets pushed all the way to the right side of the window.
I apologize in advance if you feel that supporting IE6 is a waste of time, but these are the clients' demands.
I'd appreciate any help.
UPDATE: When I remove width: 100% from divPage's style attribute, the above problem is gone; however, this causes the margin attribute of form1 to stop working. (Only in IE6!)
I'd suggest checking your external css files carefully, if an invalid selector is passed into IE6, it ignores everything after it.
Also, ensure you're applying a css reset so you're starting from the same css state in each browser.
This doesn't feel like a typical IE6 problem to me. It feels like a coding problem that IE6 isn't able to resolve with the grace of its younger browser cousins.

Why is IE 7 allowing all my content to break past my DIV? (however it works in Chrome, Safari, etc)

If you use IE 7 and click on this site:
http://www.tlsadmin.com/tlsadmin/PortalHome.aspx
Then, navigate to:
TLS Admin
--\My Companies
------\Contoso
----------\Shared Contacts
You'll see how the list of contacts is all messed up and I can't scroll down. Anyone know why?
And if you're curious, it's my job to take this site as-is and make it production ready :)
I do not see an issue with the scroll bar, but with the floated contact cards. Clear your float after all the cards.
<div style="height: 100%; width: 100%; background-color: white;" id="ContactsGridUserControl1_ContactsAsDIVCallback">
<div class="outerContact">
<div class="contactLarge"></div>
</div>
<div class="outerContact">
<div class="contactLarge"></div>
</div>
<div class="outerContact">
<div class="contactLarge"></div>
</div>
<!--Rest of cards...-->
<br style="clear: left;" />
</div

Resources