I am working on the application. Some of the css are not working in IE, whereas working in Firefox, such as Scrollbar, input types, placeholder, required etc. All of the things are working fine in Firefox as well as Chrome, but not in IE. My IE version is 9.
My Firefox view is
whereas my IE view is -
My css code is -
input[type="submit"]{
background:#3399cc;
width:100%;
border:0;
padding:4%;
font-family:'Open Sans',sans-serif;
font-size:100%;
color:#fff;
cursor:pointer;
transition:background .3s;
-webkit-transition:background .3s;
}
input[type="submit"]:hover{
background:#EE2C2C;
}
input[type="text"]{
width:100%;
background:white;
margin-bottom:2%;
margin-top:2%;
border:1px solid #ccc;
padding:4%;
font-family:'Open Sans',sans-serif;
font-size:95%;
color:black;
}
input[type="password"]{
width:100%;
background:white;
margin-bottom:2%;
margin-top:2%;
border:1px solid #ccc;
padding:4%;
font-family:'Open Sans',sans-serif;
font-size:95%;
color:black;
}
I tried to figure out the issue by so many ways such as change Compatibility View, try but unsucceed.
My html file is -
<%# page contentType="text/html; charset=UTF-8" %>
<%# page import="java.util.*" %>
<html>
<head>
<link rel="shortcut icon" href="images/imageIcon.png" />
<title> IETM Solutions </title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="styles/ietmLogin.css" type="text/css"></link>
<%
response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setDateHeader("Expires", 0); // Proxies.
response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
System.out.println("session -- A1 - " + session);
if(session != null)
{
session.invalidate();
session = null;
}
System.out.println("session -- A2 - " + session);
%>
</head>
<body>
<div id="LoginImage">
<div id="login">
<h1>IETM Document Management System</h1>
<form action="Login" method="post">
<table>
<tr>
<input type="text" name="user" placeholder="UserName" required = "true"/>
</tr>
<tr>
<input type="password" name="password" placeholder="Password" required = "true"/>
</tr>
<tr>
<input type="submit" value="Login"/>
</tr>
</table>
</form>
</div>
<%
String error = (String) request.getAttribute("error");
//System.out.println("error : "+ error);
if(error != null)
{
%>
<h4 align="center" style="color: red">Invalid User Name/Password</h4>
<% }
%>
</div>
</body>
</html>
Any suggestion/solution will be very helpful.
Thank you.
You have no doctype.
<!DOCTYPE html>
<html>
...
IE is rendering in Quirks Mode, which doesn't support most styles on <input> elements.
Seeing your HTML one question knocking me repeatedly. You drew a table only with <table> and <tr> tags but where is <td> tag which is equally required for drawing table as well? I just simply rewrote your html and it worked fine for me:
<form action="Login" method="post">
<table>
<tr>
<td>
<input type="text" name="user" placeholder="UserName" required="true" />
</td>
</tr>
<tr>
<td>
<input type="password" name="password" placeholder="Password" required="true" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Login" />
</td>
</tr>
</table>
</form>
IE9 is not smart enough to understand markup error. If this works fine in your case please don't forget to widen or style and for more room.
Related
I have made code for auto generated text boxes in an HTML growing table. I want to save values from these text boxes to a mysql database using netbeans but I don't know how I get the ids of each text box while they are auto generating..
My code is here..please help me if there is any solution for this problem..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Tue, 24 Mar 2015 06:41:28 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var rowCount = 1;
function addMoreRows(frm) {
rowCount ++;
var recRow = '<p id="rowCount'+rowCount+'"><tr><td><input name="name" type="text" size="17%" maxlength="120" /></td><td><input name="email" type="text" maxlength="120" style="margin: 4px 5px 0 5px;"/></td><td><input name="mobile" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td></tr> <img src="./image/close.png" /></p>';
jQuery('#addedRows').append(recRow);
}
function removeRow(removeNum) {
jQuery('#rowCount'+removeNum).remove();
}
</script>
</head>
<body>
<table rules="all" style="background:#fff;">
<tr>
<td style="font-size:14px;" >Name</td>
<td style="font-size:14px;">Email</td>
<td style="font-size:14px;">Mobile</td>
<td><span style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;" onclick="addMoreRows(this.form);">
<img style=" padding-left: 12px;" src="./image/add.png" />
</span>
</td>
</tr>
<form action="" method="POST">
<tr id="rowId">
<td><input type="text" name="name" size="17%"/></td>
<td><input type="text" name="email" /></td>
<td><input type="text" name="mobile" /></td>
</form>
</table>
<div id="addedRows"></div>
</td>
</tr>
<td><input type="submit"></td>
</table>
</body>
</html>
I'm trying to move the blue bottom bar to paste it to the top blue bar, but I can't find how, any help please?
screenshot: http://hpics.li/1b82a29
Fiddle
HTML code :
<%# page pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<script language="javascript">
var timeforhide;
function showMenu(menuID) {
clearTimeout(timeforhide)
document.getElementById('menu').style.visibility = 'visible'
}
function hideMenu(menuID) {
timeforhide = setTimeout("didHideMenu()", 700)
}
function didHideMenu() {
document.getElementById('menu').style.visibility = 'hidden'
}
</script>
</head>
<body>
<div>
<ul id="nav">
<li>Forum</li>
<c:if test="${!empty utilisateur }">
<li>Profil</li>
<li>Se déconnecter</li>
</c:if>
<c:if test="${empty utilisateur}">
<li>Se connecter</li>
<li>S'inscrire</li>
</c:if>
<li>Nous contacter</li>
<form method="post" action="<c:url value="/search"/>">
<input type="text" placeholder="recherche..." class="search"
required onFocus="showMenu('menu')" onBlur="hideMenu('menu')"/>
</form>
</ul>
<table id="menu"
style="position: absolute; visibility: hidden; margin-left: 850px; width: 400px; color: #ffffff;">
<tr>
<td>Recherche par :
<td><input type="radio" name="choice" value="sujet" checked />sujet</td>
<td><input type="radio" name="choice" value="post" />post</td>
<td><input type="radio" name="choice" value="utilisateur" />utilisateur</td>
</tr>
</table>
</div>
</body>
</html>
I think this is probably what you're after: http://jsfiddle.net/UQzQD/3/
You should start with a good CSS reset. I used * selector to reset padding and margin in this example and it looks like what I think you want in FF, Chrome, and Safari.
http://meyerweb.com/eric/tools/css/reset/
I fixed some errors in your HTML as well.
language="javascript" is obsolete, <form method="post" action="<c:url value="/search"/>"> isn't valid.
I have my margin: 0 auto looking good in Chrome but it's not working in IE9. In IE9 the entire site is static against left of the screen. I added a simple reset css statement based on some suggestions but they are not helping.
In main.css:
html, body {
padding:0;
margin: 0;
}
body {
background-color: gray;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.wrapper {
width: 1009px;
background-color:white;
border-style:solid;
border-color:#002663;
padding:5px;
margin: 0 auto;
margin-top:25px;
}
Updated: What the css looks like in IE's dev tools panel:
Can anyone see where I can make an improvement for IE? Thanks.
Update: actual html as requested:
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Search Page</title>
<!-- Hostname: VDDP03A-FAEF32A -->
<link rel="stylesheet" href="/CSA/styles/main.css" type="text/css" />
<link rel="stylesheet" href="/CSA/styles/smoothness/jquery-ui-1.8.10.custom.css" type="text/css" />
<script type="text/javascript" src="/CSA/scripts/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="/CSA/scripts/jquery-ui-1.10.3.js" ></script>
<script type="text/javascript" src="/CSA/scripts/jquery.validate.js" ></script>
</head>
<body >
<div class="wrapper">
<table width="100%" border="0" cellpadding="0" style="margin:0;">
<tr>
<td>
<img src="/CSA/images/logo.jpg" width="300" align="top-left" border="0" style="margin:0;" alt="myLogo">
</td>
<td width="50%">
<br />
<h2 style="font-weight:normal;align:right;color:#002663;margin:0;">Title</h2>
</td>
<td>
</td>
</tr>
</table>
<hr color="#002663" style="margin:0;">
<form name="form1" method="post" action="/CSA/web/CSA.do" style="margin:0;">
<input type="hidden" name="searchType" value="myValue">
<table width="1000px" border="0" cellpadding="0" style="margin:0;">
<col width="285px" />
<col width="300px" />
<col width="278px" />
<col width="137px" />
<tr style="margin:0;">
<td colspan="4">
<h4 style="color:#002663;margin-bottom:10;margin-top:3;">Search 1:</h4>
</tr>
<tr style="margin:0;">
<td style=" padding-left:100px; padding-bottom:0px; width:185px;" >
options :
<input type="radio" name="options" value="OP1" style="border:none;">
OP1
<input type="radio" name="options" value="OP2" style="border:none;">
OP2
</td>
<td>
Search Criteria : <input type="text" name="criteria" maxlength="20" size="20" tabindex="1" value="" id="searchField1">
</td>
<td style="min-width: 268px;">
Date :
<input type="text" name="lossDate" maxlength="10" size="11" value="07/19/2013" id="datepicker">
</td>
<td style="min-width: 138px;">
<input type="submit" name="submit" tabindex="3" value="Search" id="submit" style="margin-top:5;">
<input type="reset" name="reset" tabindex="4" value="Reset" id="reset" style="margin-top:5;">
</td>
</tr>
</table>
</form>
<!-- Three more forms similar to the above -->
<hr color="#b0b1b2" style="margin:3;">
<table table width="1000px" border="0" cellpadding="0">
<tr style="margin:0;">
<td style="margin:0;">
<h4 style="color:#002663" style="margin-bottom:8;margin-top:3;">Search Results:</h4>
</td>
</tr>
<div styleId="errors" style="margin:0;">
</div>
</table>
</div>
</body>
</html>
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The Doctype has to be the first thing in the document. It goes before the <html> start tag.
Putting it where you have it is both invalid and triggering of quirks mode (and in quirks mode, all sorts of things break).
Try adding margin:0 auto on your body tag
body {
/* background-position: 5px 5px;
background-repeat: no-repeat; */
background-color: gray;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 1010px;
margin: 0 auto; /* <--*/
}
Try
body, html {
padding: 0;
margin: 0;
}
Look up reset css when you get a chance http://www.cssreset.com/
Update:
I would suggest you take the width off of the body tag and put it in a div.
http://jsfiddle.net/KMDuw/2/
My fiddle shows a fixed width div using auto margin. If you take off the body css, you will see some space.
Can you also post your html please
I have a table and when I load the page in Firefox or chrome its shifted off the screen to the the right leading to most of the table disappearing, the table should be located in the middle of the screen and seems to be overlapping on the right outside of the page area.
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Small North Run</title>
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<link rel="stylesheet" href="default.css" type="text/css">
<link rel="stylesheet" href="sponsor.css" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1>SMALL NORTH RUN</h1>
</header>
<nav>
<ul id="navlist">
<li>HOME</li>
<li>TRAINING REGIME</li>
<li>FORUM</li>
<li>SPONSOR</li>
<li>CONTACT</li>
</ul>
</nav>
<hr id="hrnav" />
<div id="content">
<p>This page allows you to sponsor a particular runner. Just simply select the name of the runner you wish to sponsor from the drop down list, then enter the amount you wish to donate followed by a brief message for the runner and then your name. Once making a donation the runner you have sponsored will be notified by email that you have made a donation.</p>
<br/>
<br/>
<br/>
<br/>
<form method="post" action="test.php">
<table>
<tr><td><label>Runner:</label></td>
<td>
<select name="fullname">
<?php do{?>
<option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
<?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
</select>
</td>
</tr>
<tr><td><label>Donation (£):</label></td><td><input type="text" maxlength="9" value="0.00" name="donation"/></td></tr>
<tr>
<td>
<label>Message:</label>
</td>
<td>
<textarea name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea>
</td>
</tr>
</tr>
<tr><td><label>Your Name:</label></td><td><input type="text" maxlength="30" name="donator"/></td></tr>
<tr>
<td>
<tr><td><input id="submit" type="submit" value="Confirm Donation"/></td></tr>
</table>
</form>
</div>
</div> <!-- END WRAPPER -->
</body>
</html>
CSS
#content { text-align: left; margin: 2px; padding: 10px; }
#content p { font: font: 12px/1.5 Verdana, sans-serif; float: left; }
try to add a doctype :
for example, here is the HTML5 doctype
<!DOCTYPE html>
It seems to work fine for me.
Maybe you have a problem in your css?
EDIT:
The float style on your P tag is causing the trouble.
A simple solution could be to use a defloating-break-div (I'm not sure what the proper name is) underneath your P tag:
<div style="float:none;">
<br />
</div>
This causes the rest of your code to resume the normal layout
1) You have some errors in table structure
2) If you need to center table, you can setup it margin-left and margin-right auto.
There is possible table code with align:
<table style='margin: 0 auto;'>
<tr>
<td><label>Runner:</label></td>
<td>
<select name="fullname">
<?php do{?>
<option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
<?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
</select>
</td>
</tr>
<tr>
<td><label>Donation (£):</label></td>
<td><input type="text" maxlength="9" value="0.00" name="donation"/></td>
</tr>
<tr>
<td><label>Message:</label></td>
<td><textarea name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea></td>
</tr>
<tr>
<td><label>Your Name:</label></td>
<td><input type="text" maxlength="30" name="donator"/></td>
</tr>
<tr>
<td><input id="submit" type="submit" value="Confirm Donation"/></td>
<td> </td>
</tr></table>
If you still have troubles: post somewhere full HTML and CSS code for detailed analysis.
I have this table layout. I want to align the whole content to the right. So i'm using one cell with width: 100%;. Usually everything looks good and nice.
But there is something, which i don't understand. If the content in cell, which has colspan, becomes bigger than normal cell in this column (you can test this by clicking Click to test button), it brakes whole layout.
This happens on Chrome, Safari 4 and 5, IE8, but on Opera, FF and IE7 is OK.
Any ideas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<style type="text/css">
table { width: 100%; }
table td { border: 1px solid black; white-space: nowrap; }
.delimiter { width: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td><label>Row 1</label></td>
<td> </td>
<td><input type="text" value="Field 1" id="field1" size="25"></td>
<td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;"></td>
<td class="delimiter"> </td>
</tr>
<tr>
<td><label>Row 2</label></td>
<td> </td>
<td colspan="3"><input type="text" id="field2" value="Field 2" size="25"></td>
</tr>
</table>
</body>
</html>
I was not surprised when you said it worked in some browsers and not others. Welcome to the real world of developing a web app. I haven't gone down into the nitty gritty of checking why browsers are refreshing their layouts differently, as i've learned that it can be a black hole of time. Instead i put forth the following solution:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<style type="text/css">
table { width: 100%; }
table td { border: 1px solid black; white-space: nowrap; }
.delimiter { width: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td><label>Row 1</label></td>
<td> </td>
<td class="delimiter">
<table><tr>
<td><input type="text" value="Field 1" id="field1" size="25" /></td>
<td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;" /></td>
<td class="delimiter"> </td>
</tr></table>
</td>
</tr>
<tr>
<td><label>Row 2</label></td>
<td> </td>
<td>
<table><tr>
<td><input type="text" id="field2" value="Field 2" size="25" /></td>
<td class="delimiter"> </td>
</tr></table>
</td>
</tr>
</table>
</body>
</html>
I know it's not the prettiest solution, but as raw html it does work. Tested in Chrome and IE10.
Use W3C standards to be more save with crossbrowser coding. Beste solution for javascript code crossbrowser safty is to user jQuery. It's even more handy for this kind of tools/functionalities.