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.
Related
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
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 ?
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.
I have a little problem with my site, I have a bar and on it a box that float above the bar, everything works fine in IE, Firefox, Opera, but in Chrome and Safari the box that must be above the bar float by the bar side no above it.
#barraDerecha
{
width:240px;
background-color:#e5e5e5;
border-left:solid 2px #CCC;
border-bottom:solid 2px #CCC;
position:absolute;
margin-top:-10px;
margin-left:717px;
height:auto;
}
#barraDerecha #menu
{
display:block;
position:fixed;
width:220px;
}
barraDerecha is the container and menu is the box that goes above the container
Can somebody help me please?
Thanks in advance
Just in case someone is getting the same chrome behaviour.
It looks like chrome considers that the viewport of an element added to the DOM after the page is loaded (for instance, using jQuery.load()) is restricted to the containing div of this element.
I guess .asp is injecting your barraDerecha after document load, so it positions relative to its container.
Thanks for u answer Thor you can see the example in www.autos.ultimahora.com/altaanuncio.html
I can't put fixed to #barraderecha cause in that way my bar move with the menu
Here is who I use the class:
<div id="barraDerecha" >
<div id="barraRight" runat="server">
<div style="padding:10px;" id="menu" >
<div class="titulosAzules15">
<center>
<asp:Label ID="lblUsted" runat="server" Text="USTED ELIGÍO EL PLAN"></asp:Label>
<br />
<br />
<asp:Image ID="imgPlan" runat="server" />
<br />
<asp:Label ID="lblPrecio" CssClass="DestaquesBordo14" runat="server"></asp:Label>
<br />
</center>
</div>
</div>
</div>
</div>
You have to select a plan and then push on Siguiente button
Pardon me, but isn't #menu within #barraDerecha?
If so, it would only be natural that it would be fixed within #barraDerecha unless you specify the position furthermore.
#barraDecha {
position:fixed; top:0; left:0; }
A better description (perhaps a visual) would help i terms of describing the problem more accurately.
Here is the code sample
<div class="Layouts">
<asp:ContentPlaceHolder ID="Center" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server" />
<p> </p>
</div>
The CSS that styles the Layouts div is
.Layouts
{
background-color: White;
margin-top: 17px;
padding-top: 18px;
}
Nothing to crazy there!
The problem I am having is that without the "<p> </p>" the white background does not fill down behind whatever I put in the two ContentPlaceHolders (and no they don't have an over riding background!)
With the <p> </p> it all works as I wish... but not as I expect!
Am I doing something wrong or is it a browser or a Sharepoint issue? Is there a better fix than the space?
Is the ContentPlaceHolder's floated?
If so, try adding: overflow:hidden; to the .Layouts selector.