Following code works fine with IE, but doesn't work with other browsers.
<!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></title>
<script type="text/javascript">
function OnLoad() {
var tbl = document.getElementById("tbl");
tbl.addEventListener("keyup", OnKeyUp);
tbl.focus();
}
function OnKeyUp(event) {
alert(event.keyCode);
}
</script>
</head>
<body onload="OnLoad()">
<table id="tbl">
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
</tr>
</table>
</body>
</html>
The problem is that the table element cannot be given focus in some browsers. If you add a tabindex property to the table, your code should work, as that will allow the table to receive focus:
<table id="tbl" tabindex="1">
<!--Rest of your code-->
</table>
Here's a working example.
Related
I recently started using the foundation framework with email newsletters. As I can see I have to go back to the good old tables. I cannot understand why I have so big problems of centering/align a logo?
The logo is keep hanging to the left, instead of center. I have set a border on the tables so it is eaiser to see.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>A title</title>
<link rel="stylesheet" href="css/foundation-emails.css" />
<style type="text/css">
</style>
</head>
<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top" style="border: 1px solid pink">
<center>
<table class="container" align="center" style="border: 1px solid green">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first">
<table>
<tr>
<th>
<img src="https://i1.wp.com/1stwebdesigner.com/wp-content/uploads/2016/04/line-art-logo.jpg?fit=600%2C400&resize=350%2C200" style="border:1px solid red" align="center">
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
Finally after 2 hours searcing I found the answer here:
https://foundation.zurb.com/emails/docs/alignment.html
First of all, your document (!DOCTYPE) IS NOT XHTML. You need to use transitional or HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
or
<!DOCTYPE html>
After that, you need:
<img src="https://i1.wp.com/1stwebdesigner.com/wp-content/uploads/2016/04/line-art-logo.jpg?fit=600%2C400&resize=350%2C200" style="border:1px solid red; margin: 0 auto;">
align="center" is NOT a valid HTML5 property, it is valid in HTML4+
In this table, when I check the radio button (present) on the 1st row and when I go and check again the present on the 2nd row, the first row present in getting unchecked automatically. And all the radiobutton gets checked. This is just a sample for two students.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<%# page import="java.sql.*"%>
<table bgcolor="lightgray" border="5" width="60%" cellpadding="5" cellspacing="0.5" color="blue" >
<tr>
<th colspan ="3" bgcolor="#999999"><br>
<div align="Center" > <font face="verdana" size="5" color="white"> ATTENDANCE </font>
</div>
</th>
</tr>
<tr>
<td width="14%"><h3>Register No</td>
<td><h3> Student Name</td>
<td><h3> Attendance</td>
</tr>
<tr>
<td> 1 </td>
<td> <input type="radio" >Present <input type="radio">Absent
<tr>
<td>2</td>
<td> <input type="radio" >Present <input type="radio">Absent
</tr>
<%
Connection dbcon=null;
DriverManager.registerDriver(new oracle.jdbc.driver.OracleDriver());
dbcon=DriverManager.getConnection("jdbc:oracle:thin:#localhost:1521:orcl","scott","tiger");
Statement stmt=dbcon.createStatement();
ResultSet rst=null;
rst=stmt.executeQuery("select * from studenttables");
while(rst.next())
{%>
<tr>
<td><%=rst.getString("name")%></td>
</tr>
<tr>
<td><%=rst.getString("name")%></td>
</tr>
<tr>
<td><%=1%></td>
<td><%=rst.getString("name")%></td>
<td><input type="radio" >Present <input type="radio">Absent
</tr>
<% } %>
</table>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
Set a name and make a group of radio buttons like
() - name="rdg1" and id="Present"
() - name="rdg1" and id="Absent"
and
() - name="rdg2" and id="Present2"
() - name="rdg2" and id="Absent2"
if the rdg1 - Present is checked and you click to check the rdg1 - Absent the check box 1 will clear, same to second group.
What do I have to do, so the inputs from the table will get smaller if I minimize the browser window? Thanks!
<!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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<table>
<tr>
<td>
<input type=text>
</td>
<td>
<input type=text>
</td>
</tr>
<td>
<input type=text>
</td>
<td>
<input type=text>
</td>
<tr>
</tr>
</table>
</body>
</html>
Try to use percent in your css to resize
<style>
input[type="text"]{
width:10%;/* Whatever percent you want*/
}
</style>
<style>
input
{
width:100%;
height: 100%;
}
</style>
also add:
<table cellspacing="5px">
Hope this helps you
The problem that I am having is while designing an email to be sent to users the border of the HTML table is not disappearing even though it is set to 0 and so leaves horrible white lines through areas which are menu to be solid blue colors, below is my HTML code!
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table width="889" border="0" >
<tr>
<td>
<table width="882" border="0" bordercolor="#0099FF">
<tr>
<td colspan="4" bgcolor="#0099FF"> </td>
</tr>
<tr bgcolor="#0099FF">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#0099FF"> </td>
<td colspan="2" rowspan="2">content</td>
<td bgcolor="#0099FF"> </td>
</tr>
<tr bgcolor="#CCCCCC">
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Add cellspacing="0" to your second table:
<table width="882" border="0" bordercolor="#0099FF" cellspacing="0">
Probably cellspacing="0" fixes these lines?
I have a simple page that pops up a telerik radwindow on button click.
But opens as collapsed in IE 9. Works fine with FF, Chrome, IE 8, IE Compatibility Mode.
Look at the below screenshots of how they open.
IE 9
Firefox
Heres the page code.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<%# Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="scriptManager" runat="server" />
<telerik:RadButton ID="btnOpen" runat="server" Text="Open" OnClick="btnOpen_Click" />
<br />
<telerik:RadWindow ID="TestDialog" runat="server" Title="Select Order Services"
VisibleStatusbar="false" AutoSize="true" AutoSizeBehaviors="Height" Width="400px"
Modal="true" VisibleOnPageLoad="false" Behaviors="Close, Move" EnableShadow="true">
<ContentTemplate>
<div style="overflow: hidden;">
<table cellspacing="0" border="0"
style="table-layout: auto; ">
<tbody>
<tr>
<th style="width: 100px;">Column 1</th>
<th style="width: 100px;">Column 2</th>
</tr>
<tr>
<td>
a
</td>
<td>
a
</td>
</tr>
<tr>
<td>
b
</td>
<td>
b
</td>
</tr>
<tr>
<td>
c
</td>
<td>
c
</td>
</tr>
</tbody>
</table>
</div>
</ContentTemplate>
</telerik:RadWindow>
</form>
</body>
</html>
Code behind:
protected void btnOpen_Click(object sender, EventArgs e)
{
TestDialog.VisibleOnPageLoad = true;
}
I want the overflow:hidden present in the style and still want the pop up opened fully in IE 9. How do I get it?
Found a way.
<ContentTemplate>
<div style="display: inline; overflow: hidden;">
...
This is a solution, but I dont really understand how this works! That was one lucky line of code I wrote!
If any one can explain me why it works, I will mark theirs as answer.