Silly IE9 screwed up my layout of my aspx page.
In chrome it looks perfect:
However in EI9, it messed up my layout and made it look like this:
I've figured out why it looks the way it does. Apparently IE9 encapsulated my "save Note" button, description label, and description textbox in a div and made it float right. And the reason why the maincontent holder is displayed double, is because IE duplicated it but in the duplicated contentholder, it has not controls or anything in it. Just the background color.
Here is the html it generated:
<div class="mainContentHolder">
<span style="display: none;">
<label>File</label>
<label style="width: auto;" id="lblCaseFileID">2011630988 - </label>
</span>
<h3 id="quickNoteHeader">Quick Note: 2011630988 / 10/04/2012 08:47:12 <div style="float: right;">USES CURRENT DATE AND TIME<div></div></div></h3><div style="float: right;"><div>
<span>
<label class="inlineLbl">Description</label>
<input style="width: 82%;" id="txtDescription" name="txtDescription" type="text">
<span style="color: red; display: none;" id="ctl02" class="validation" title="Description is required">*</span>
<input style="width: 75px;" id="saveNote" onclick="saveNewQuickNote()" name="saveNote" value="Save Note" type="button">
</span>
</div>
<input id="hidCaseFileID" name="hidCaseFileID" value="2011630988" type="hidden">
<input id="hidInvestigatorLoggedOnID" name="hidInvestigatorLoggedOnID" value="25" type="hidden">
</div>
<div class="mainContentHolder">
<div style="float: right;">
</div>
And this is my .aspx page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form id="form1" runat="server">
<div class="mainContentHolder">
<span style="display:none;">
<label>File</label>
<label style="width:auto;" runat="server" id="lblCaseFileID"></label>
</span>
<h3 runat="server" id="quickNoteHeader">Quick Note</h3>
<span>
<label class="inlineLbl">Description</label>
<input type="text" style="width:82%;" id="txtDescription" runat="server" />
<asp:RequiredFieldValidator class="validation" ErrorMessage="*" Display="Dynamic" ControlToValidate="txtDescription" ToolTip="Description is required" runat="server" />
<input type="button" ID="saveNote" style="width:75px;" Value="Save Note" runat="server" onclick="saveNewQuickNote()" />
</span>
</div>
<asp:HiddenField ID="hidCaseFileID" runat="server" />
<asp:HiddenField ID="hidInvestigatorLoggedOnID" runat="server" />
</form>
</body>
Any suggestions? I have no idea why IE did this or how to prevent it/fix it
EDIT:
css:.mainContentHolder
{
margin: 0px;
background-color: #f3f3f3;
border: solid 1px #a1a1a1;
min-width:890px;
width:920px;
height:50px;
}
.mainContentHolder h3
{
font-size:13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 20px;
margin-right: 1%;
}
.mainContentHolder label
{
font-size: 11px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 20px;
margin-bottom: 10px;
margin-right: 1%;
}
.mainContentHolder input
{
width:70px;
}
.ui-dialog
{
font-size:12px;
}
.ui-widget-header
{
background: #8D122B;
}
.ui-datepicker
{
font-size:12px;
}
#quickNoteHeader
{
color: Green;
}
EDIT - seems as though the layout does work in IE 10. But not IE9
correct your doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
and also set display block and width 100% of span
<span style="display:block;width:100%;">
<label class="inlineLbl">Description</label>
<input type="text" style="width:82%;" id="txtDescription" runat="server" />
<asp:RequiredFieldValidator class="validation" ErrorMessage="*" Display="Dynamic" ControlToValidate="txtDescription" ToolTip="Description is required" runat="server" />
<input type="button" ID="saveNote" style="width:75px;" Value="Save Note" runat="server" onclick="saveNewQuickNote()" />
</span>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<html xmlns="http://www.w3.org/1999/xhtml">
</head>
Is not valid HTML.
You want:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
And don't forget the closing </html> tag.
dear john when i put this code in my local website its working...
i think another css are conflict..
Related
<?
$time = $_POST['time'];
echo 'you have choosen '. $time;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.radio > input[type=radio]{
position:absolute;
margin-left:-99999px;
}
input[type=radio] + span{
cursor:pointer;
border:2px solid transparent;
}
span.active{
background-color:green;
}
.but1{
background-color:#009;
color:#FFF;
border:none;
border-radius:15px;
width:200px;
height:50px;
font-size:18px;
font-weight:bold;
border-radius:15px;
text-align:center;
padding:8px;
font-family:Verdana, Geneva, sans-serif;
float:left;
margin-left:10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form action="Untitled3.php" method="post">
<label class="radio" for="fb1">
<input id="fb1" type="radio" name="time" value="all day" checked />
<span class="but1 active">Available<br>All day</span>
</label>
<label class="radio" for="fb2">
<input id="fb2" type="radio" name="time" value="between 8-12"/>
<span class="but1">Between<br>8am - 12am</span>
</label>
<label class="radio" for="fb3">
<input id="fb3" type="radio" name="time" value="between 12-4" />
<span class="but1">Between<br>12pm - 4pm</span>
</label>
<input name="submit" type="submit" value="send" />
<script type="text/javascript">
$('.radio').click(function(){
if( $(this).find('input').is(":checked") ){
$('.radio span').removeClass('active');
$(this).find('span').addClass('active');
}
});
</script>
</form>
</body>
</html>
Why is it that when I add the submit button, the CSS doesn't work in IE, but fine in all other browsers. When I remove the button, the CSS works fine in all browsers?
Please help, this problem is driving my nuts, IE should be banned.
Live code with the button is http://goo.gl/LbSWQG
I have a following .aspx page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test Control</title>
<style type="text/css">
input[type="radio"][checked] +label
{
font-weight: bold;
color: Green;
}
input[type="radio"][disabled] +label
{
font-weight: bold;
color: Green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="radio" name="abc" value="val1" disabled="disabled"/>val1<br/>
<input type="radio" name="abc" value="val2"/>val2
<input type="radio" name="abc" value="val3"/>val3
</div>
</form>
</body>
</html>
Am I doing anything wrong here?
because the css styles that I defined in the tag are not getting implied on the page.
Here's the JSFiddle for the said sample
As per the code the disabled button should be of green color but it is not..
similarly for the checked one
You haven't declared labels for the radio buttons...Do this.
<input id="abc1" type="radio" name="abc" value="val1" disabled="disabled"/><label for="abc1">val1</label><br/>
<input id="abc2" type="radio" name="abc" value="val2" checked="checked"/><label for="abc2">val2</label>
You should put radio button text in label
<input type="radio" id="val1" name="abc" value="val1" disabled="disabled"/>
<label for="val1">val1</label>
And then you can use your css selectors
input[type="radio"]:checked+label
{
font-weight: bold;
color: Green;
}
input[type="radio"]:disabled+label
{
font-weight: bold;
color: Green;
}
I've been working on our company website this morning and I've hit a bit of a problem. I have the page formatted into two cells, one on the right and one on the left. The one on the right contains an image which is around 790 pixels wide. When I shrink the browser window to the point to where it will no longer fit, the whole cell jumps below the first cell. How can I prevent this from happening?
Code...
xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Test
</title>
<link href="StyleSheet1.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg2ODI4NzA2OWQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFCUNoZWNrQm94MU+tEbqmFYLAUCuNpKlG5GJdxlTP" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwKUzskuAuzRsusGAoznisYGAuzR9tkMAuzRirUFAoLk17sJArursYYIEh1rVMqwd3ohPqFy9J1P74IvCz4=" />
</div>
<div style = "padding-left:15%;">
<div class = "header">
<img src="images/logoclr.bmp" style="height:56px;width:253px;border-width:0px;" />
<input name="TextBox1" type="text" id="TextBox1" style="width:414px;" />
<input type="submit" name="Button1" value="Search" id="Button1" />
</div>
<br /><br /><br /><br /><br />
<div class="loginSide">
<div class = "internalBox">
Log On To Invoice Viewer
</div>
<br />
<span>Login ID:</span>
<br />
<input name="TextBox2" type="text" id="TextBox2" />
*<br />
<br />
<span id="Label1">Password</span>
<br />
<input name="TextBox3" type="text" id="TextBox3" />
*<br />
<br />
<input id="CheckBox1" type="checkbox" name="CheckBox1" />
Remember my Login ID<br />
<br />
<div style="padding-left:20px;"><input type="submit" name="Button2" value="Login" id="Button2" /></div>
<br />
</div>
<div class = "imageSide">
<img src="images/1_back11.jpg" style="border-width:0px;" />
</div>
</div>
</form>
</body>
</html>
css
body
{
background-color:rgb(227,227,225);
font-family:Verdana;
font-size:.8em;
margin-left:auto;
}
.loginSide
{
float:left;
border-width:1px;
border-right:0px;
border-color:rgb(186,107,255);
border-style:solid;
width:275px;
height:292px;
padding:10px;
background-color:rgb(223,232,237);
}
.imageSide
{
border-width:1px;
border-color:rgb(186,107,255);
border-style:solid;
width:792px;
padding:10px;
background-color:rgb(223,232,237);
float:left;
}
.internalBox
{
padding-left:50px;
padding-right:50px;
padding-top:5px;
padding-bottom:5px;
background-color:rgb(54,113,109);
color:White;
}
Try to set an id to the div that wraps everything (e.g. <div id="wrapper" style="padding-left:15%;">) and create a CSS selector for it where you specify a minimum width:
#wrapper {
min-width: 900px;
}
The width you should choose according to the minimum width where the image div doesn't wrap. Of course, now that you have a selector for the wrapper, you could move the padding-left into the CSS as well instead of having it inline.
Here's and example fiddle
You can try to make the width of your cells dynamic. If you use a percentage instead of a fixed width it will automatically adjust to the window size.
.imageSide
{
border-width:1px;
border-color:rgb(186,107,255);
border-style:solid;
width:70%;
padding:10px;
background-color:rgb(223,232,237);
float:left;
}
.loginSide
{
float:left;
border-width:1px;
border-right:0px;
border-color:rgb(186,107,255);
border-style:solid;
width:30%;
height:292px;
padding:10px;
background-color:rgb(223,232,237);
}
Just Don't provide the width of imageSide because it must adjust with remaining width of browser window while loginSide must stick to its own solid width.
Try this fiddle.
One more thing, you are using float: left in both loginSide and imageSide, just use it at loginSide, imageSide will than adjust automatically.
Here is the updated fiddle.
And, finally if you want your own code without any much altration, i got this also for you. :)
Here is the your second updated fiddle with imageSide width:792px also..
Cheers.. :)
Figured it out, I wrapped the image in this div:
<div style = "overflow: hidden;">
Scenario: I want to display the following through ASPX page
State : <dropdown>
zip : <textbutton>
Note that the ":" for both State & City should be same in all lines. Currently I am getting something below.
State : <dropdown>
zip : <textbutton>
I must be doing something wrong but don't know yet. Appreciate any inputs,
Here is my code so far,
<div style="text-align:center" >
<asp:Label runat="server" id="StateCategory" Text ="State:" CssClass="LabelLeftAligned" />
<asp:DropDownList runat="server" ID="StateDDown" DataTextField="Name" AppendDataBoundItems="true"></asp:DropDownList>
</div>
<div style="text-align:center" >
<asp:Label runat="server" id="lblzipCode" Text ="Zip:" CssClass="LabelLeftAligned" />
<asp:TextBox ID="txtboxZipcode" runat="server" MaxLength="5" />
</div>
and the class LabelLeftAligned is defined below in the stylesheet.
.LabelLeftAligned {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: black;
font-weight: bold;
text-align: left;
}
Turn the label into a block level element, give it a width and right align it.
Something like: (full example)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
.LabelRightAligned {
display:block;
width: 150px;
text-align:right;
float:left;
}
.ddl {
float:left;
margin-left:10px;
}
</style>
</head>
<body>
<div style="text-align:center;clear:both;">
<span class="LabelRightAligned">State:</span>
<select class="ddl">
<option value="volvo" />
<option value="chevy" />
</select>
</div>
<div style="text-align:center;clear:both;">
<span class="LabelRightAligned">zip:</span>
<input type="text" name="zip" id="zip" value="23423" class="ddl" />
</div>
</body>
</html>
example below:
You can use table formatting in CSS to achieve this. You would use layout for your rows and cells, and text-align to control the horizontal alignment.
Click here for a working demonstration.
<style type="text/css">
.table {
display:table;
border-collapse:collapse;
}
.table-row {
display:table-row;
}
.left-col {
text-align:right;
}
.right-col {
text-align:left;
}
.left-col, .right-col {
display:table-cell;
}
</style>
<div class="table">
<div class="table-row">
<div class="left-col">
Foobar:
</div>
<div class="right-col">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</div>
<div class="table-row">
<div class="left-col">
Bar:
</div>
<div class="right-col">
<asp:TextBox ID="txtTestB" runat="server"></asp:TextBox>
</div>
</div>
</div>
either table the data which in this case shouldn't be a problem based on the little bit I am seeing
<table>
<tr>
<td>State</td>
<td>:</td>
<td><dropdown></td>
</tr>
<tr>
<td>Zip</td>
<td>:</td>
<td><textbutton></td>
</tr>
</table>
OR
wrap the state and zip in a div and then float it left with a width on it
<div class="floatLeft">State</div> : <dropdown>
<div class="floatLeft">Zip</div> : <textbutton>
<style>
.floatLeft {float: left; width: 300px; }
</style>
I'm having problems with setting the div and body tags to dynamically expand over the inner contain.
Here is the HTML and CSS that I'm using, it is a little longer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title></title>
</head>
<style>
body, p, b, ul, li, div
{
padding:0;
margin:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
}
body
{
background:white;
}
.clearfix {
min-height: 1px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
#searchform
{
position:absolute;
height:110px;
clear:both;
}
#b2_sbox_middle
{
width:980px;
height:99px;
background:url('img.jpg') repeat-x;
border:1px solid #00CCCC;
}
#b2_inner_sf
{
margin-top:10px;
}
#sf_ch_container
{
clear:both;
margin-left:27px;
font-size:18px;
}
#sf_ch_formtitle
{
float:left;
width:202px;
font-size:18px;
text-align:left;
}
#sf_ch_stype
{
float:left;
}
.stype
{
float:left;
margin-left:27px;
text-align: left;
}
</style>
<body>
<div align="center" class="clearfix">
<div id="searchform" align="center" style="top:105px; width:980px; margin-left:-490px; left:50%;" class="clearfix">
<div id="b2_sbox_middle">
<div id="b2_inner_sf" class="clearfix" style="border:0px solid;">
<div id="sf_ch_container" class="clearfix">
<div id="sf_ch_formtitle">SEARCH </div>
<div id="sf_ch_stype"> SEARCH</div>
</div>
<div class="stype">
<input name="text" class="search-input" type="text" value="key" size="20" maxlength="50" />
</div>
<div class="stype" >
<input name="text2" class="search-input" type="text" value="key" size="20" maxlength="40" />
</div>
<div class="stype" >
<input name="text2" class="search-input" type="text" value="key" size="20" maxlength="40" />
</div>
<div class="stype" >
<input name="text2" class="search-input" type="text" value="key" size="20" maxlength="40" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you run the code in Firefox or Chrome press F12 and watch the height of the body tag and of the first div after the body, you will see that none have dynamically changed their height to include the inner content.
I don't know where the problems is in the CSS.
And a second problem, if you make a preview using IE v.6 you will see that all the input fileds are disorder wich I don't understand why??
Any help will be much appreciated!!
Since #searchform is absolutely positioned, its parents will have a height of 0. You can try:
body, body>div{min-height:100%;}
Here's a fiddle: http://jsfiddle.net/jEfMx/