Firefox considers my form input[type="checkbox"] as readonly but it shouldn't as the field is editable. It works on every other browser including chrome or even IE11.
The code looks like below:
HTML:
<input name="upgradeSmu" id="id_fd5049f8-8549-4b0e-8f81-afbfe927d562" type="checkbox">
CSS:
form input:-moz-read-only, form input:-moz-read-only:hover, form input:-moz-read-only:focus {
border-color: #dddddd !important;
background: transparent;
cursor: not-allowed; }
Firefox for some reason considers provided CSS as valid for the input:
Chrome shows me following:
Firefox version: 65.0.2.
This can be reproduced with simplest HTML:
form input:-moz-read-only,
form input:-moz-read-only:hover,
form input:-moz-read-only:focus {
border-color: #dddddd !important;
background: transparent;
cursor: not-allowed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<link rel="stylesheet"
href="style.css">
<title>Checkbox test</title>
</head>
<body>
<div>
<h1>Form</h1>
<form id="book-form">
<div>
<label for="title">Checkbox test</label>
<input type="checkbox"
checked="true"
id="checkbox">
</div>
</form>
</div>
</body>
</html>
OK seems I have found the answer here; Firefox has a bug and I have reported it under:
https://bugzilla.mozilla.org/show_bug.cgi?id=1532968
I have a static form whose code is bellow. Basically I would like to style it with Twitter-bootstrap. Thus I was wondering how to implement it under Xampp. I have placed the bootstrap folder under Xammp/htdocs/MyLocalHostWebsiteFolderName/bootstrap, added a class to the form HTML code but bootstrap was not compiled with the form.
cAN YOU HELP ME BREATH SOME LIFE IN THAT BEATEN UP CODE?
<html>
<head>
<title>Limited Sampling Strategies for AUC estimation</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".msg_body").hide();
$(".msg_head").click(function(){
$(this).next(".msg_body").slideToggle(600);
});
});
</script>
</head>
<body>
<center>
<form action="form.php" class="form-horizontal" target="results" enctype="multipart/form-data" method='post'>
<h1>Limited Sampling Strategies for AUC estimation</h1>
<table border=0>
<tr valign="top">
<td>
<table border=1>
<caption>Data</caption>
<tr>
<th>Concentrations</th>
<td> <input type="file" name="concentrations" size="20"></td>
</tr>
<tr>
<th>Times</th>
<td> <input type="file" name="times" size="20"></td>
</tr>
<tr>
<th>Covariates</th>
<td> <input type="file" name="covariates" size="20"></td>
</tr>
</table>
<br>
</td>
</table>
</form>
</center>
</body>
</html>
Solved my problem. The form code should call bootstrap library before the HTML code otherwise the CSS classes are not recognized. Putting your form HTML code in the bootstrap folder alone is not enough. The structure goes like this
<!DOCTYPE html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<center>
<form class="form-inline" action="form.php" target="results" enctype="multipart/form-data" method='post'>
</form>
</center>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I'm setting up an html template for a client so having fun with tables, yay.
Responsiveness previews correctly in desktop browser, but when sent to an iphone, the td's are not scaling with the percentage applied, just defaulting to content size. The example I've supplied is for images (trying to setup a nav for the template), but also applies to text only as well.
The goal is a 600px centered content area with the background of the email a light gray. Under 600px, the nav cells should responsively scale to 25% of the viewport, but with text content the cells shrink to text size, and images they expand to image size.
Anyone know a way on iphones to set table cell widths as a percentage of the viewport?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no">
<style>
.wrapper {
width: 100%;
text-align: center;
background-color: #ebebeb;
}
.container {
width: 600px;
max-width: 600px;
margin: auto;
}
.header {
background-color: #ffffff;
width: 100%;
}
#media (max-width: 600px) {
html, body, .wrapper, .container, .header, .wrapper-td, .container-td {
width: 100% !important;
max-width: 100% !important;
}
}
</style>
</head>
<body>
<table class="wrapper">
<tr>
<td class="wrapper-td">
<table class="container">
<tr>
<td class="container-td">
<table class="header">
<tr>
<td style="width: 25%;">
<img src="http://s9.postimg.org/a3mogw58b/nav_membership.jpg" style="width: 100%;" />
</td>
<td style="width: 25%;">
<img src="http://s9.postimg.org/a3mogw58b/nav_membership.jpg" style="width: 100%;" />
</td>
<td style="width: 25%;">
<img src="http://s9.postimg.org/a3mogw58b/nav_membership.jpg" style="width: 100%;" />
</td>
<td style="width: 25%;">
<img src="http://s9.postimg.org/a3mogw58b/nav_membership.jpg" style="width: 100%;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Try to add html, body{margin:0; padding:0} to the style, and cellpadding="0" cellspacing="0" to all your tables.
Codepen: http://codepen.io/Bidstrup/pen/LVobpG
I am working on a website right now that looks great in a normal web browser and on the older smart phones, but it is way too small on the iPhone. I think this is because the iPhone takes a large number of pixels and squeezes them on to a smaller screen rather than being true-to-size. Is there a way to make the entire site look more zoomed-in / large on the phone screen without having the create a separate mobile site?
UPDATE: This is the code I tried using. The website looked the same when I refreshed the page.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
UPDATE #2: Someone asked for some more complete code, so I am including that as well:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carolina Mobility Sales Mobile</title>
<meta name="description" content="Welcome to Carolina Mobility Sales, LLC we are Carolina's largest Wheelchair Accessible Van Dealer. We have new and used accessible vans, full sized and mini vans. Some people call these vehicle Handicap or Handicapped vans, we prefer Accessible Vans. We also offer scooter and wheelchair lifts, adaptive driving controls. We also offer Wheelchair Accessible vans for Rentals. " />
<meta name="keywords" content="Wheelchair Accessible Minivans, Handicap Vans, Handicapped Vans, Full size handicap Vans, New and Used, Wheelchair Lifts, Scooter Lifts, Ramps, Driving Equipment. North Carolina, NC, South Carolina, SC, Charlotte, Columbia, Greenville, Spartanburg, Handicap Vehicle Specialists, Mobility Needs, wheelchair van, wheel chair van, accessible van, wheelchair lifts, wheelchair carriers, wheelchair ramp, Adapted van, adapted vehicle, handicap van, handicapped van, minivans, conversion minivans, disabled driving, accessible transportation, scooter lift, scooter ramp, scooter carrier, hand controls, disabled, disability, disabilities, mobility, disabled transportation, new vans, used vans, Braun, Braun low floors, tie down, remote entry, ramp, kneel suspension, fold out, in floor, power door, ezlock, EMC, NMEDA, QAP, rampvan, handicap vans, Rentals" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
<!--
body {
background-color:white;
color:black;
font-family: Helvetica, Arial, sans-serif;
text-align:center;
font-size:16px;
}
#header {
background-image:url('images/br_grad.jpg');
background-repeat:repeat-x;
width:100%;
height:303px;
}
#headerimage {
background-image:url('images/TopImage_nograd.png');
background-repeat:no-repeat;
width:320px;
height:303px;
margin-right:auto;
margin-left:auto;
}
#facebook {
background-color:#b3d6e6;
border: solid 2px #0078ae;
position:relative;
top:115px;
z-index:99;
padding:4px;
width:320px;
}
#facebook a {
text-decoration:none;
font-weight:bold;
color:#0078ae;
justify:center;
font-size:15px;
}
#navigation {
background-color:#b3d6e6;
border: solid 2px #0078ae;
-moz-border-radius: 15px;
border-radius: 15px;
padding:10px;
width:97%;
margin-right:auto;
margin-left:auto;
}
.button {
-moz-border-radius: 15px;
border-radius: 15px;
height:20px;
margin-bottom:10px;
/* fallback */
background-color: #2f2f30;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444445), to(#181819));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #444445, #181819);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #444445, #181819);
/* IE 10 */
background: -ms-linear-gradient(top, #444445, #181819);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #444445, #181819);
padding-top:5px;
}
.button a {
text-decoration:none;
color:white;
font-weight:100;
display:inline-block;
position:relative;
}
.button .star {
position:relative;
left:8px;
bottom:2px;
width:5px;
float:left;
}
.button .arrow {
position:relative;
right:3px;
float:right;
bottom:3px;
}
#locations {
margin-right:auto;
margin-left:auto:
}
#locations img {
margin-top:7px;
margin-right:2px;
}
-->
</style>
<script type="text/javascript">
function DoNav(theUrl)
{
document.location.href = theUrl;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="headerimage">
<div id="facebook">
Click to "Like" Us on Facebook!
</div>
</div>
</div>
<img src="images/bubble.png" alt="Carolina Mobility Mobile" />
<div id="navigation">
<div class="button">
<div class="star"><img src="images/star.png" alt="star" /></div>
Inventory
<div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
</div>
<div class="button">
<div class="star"><img src="images/star.png" alt="star" /></div>
Locations
<div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
</div>
<div class="button">
<div class="star"><img src="images/star.png" alt="star" /></div>
Contact Us
<div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
</div>
<div class="button">
<div class="star"><img src="images/star.png" alt="star" /></div>
About Us
<div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
</div>
<div class="button">
<div class="star"><img src="images/star.png" alt="star" /></div>
Videos
<div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
</div>
<div class="button">
<div class="star"><img src="images/star.png" alt="star" /></div>
Top 10 Reasons
<div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
</div>
<div class="button">
<div class="star"><img src="images/star.png" alt="star" /></div>
Full Website
<div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
</div>
<div id="locations">
<img src="images/charlotte.png" alt="charlotte" />
<img src="images/columbia.png" alt="columbia" /><br />
<img src="images/greenville.png" alt="greenville" />
<img src="images/savannah.png" alt="savannah" />
</div>
</div>
</div>
</body></html>
Remove the font-size from your body CSS. This static number prevents the text from resizing to be larger than 16 (very small) pixels.
Also, to enable zooming, remove maximum-scale=1 as well.
Your meta tag isn't correctly formed, it needs a / before the >:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
I have created a very simple html email.
http://staging.xhtml-lab.com/mailtest/
It's working fine in all email clients, except in hotmail.com/outlook.com
in hotmail email is left aligned, it should remain center aligned.
I have added following code as suggested by emailology.org, but it have no effect.
<style type=“text/css”>
/**This is to overwrite Hotmail’s Embedded CSS************/
table {border-collapse:separate;}
a, a:link, a:visited {text-decoration: none; color: #00788a}
a:hover {text-decoration: underline;}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
p {margin-bottom: 0}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}
/**This is to center your email in Hotmail************/
.ExternalClass {width: 100%;}
</style>
Any suggestions for what else i can do to make the email center aligned?
This should give you a centered e-mail:
<table style="width: 100%; background: red;">
<tr>
<td>
<center>
<table style="width: 640px; background: blue; margin: 0 auto; text-align: left;">
<tr>
<td>
Your content here
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
The center-tag is what is required by Outlook and outlook.com. Other clients use the margin attribute. In some clients, text is centered after the center-tag, and therefore the text-align attribute is required.
If you want the width to be variable depending on the screen size, use the following code:
<table style="width: 100%; background: red;">
<tr>
<td>
<center>
<!--[if mso]>
<table style="width: 640px;"><tr><td>
<![endif]-->
<div style="max-width: 800px; margin: 0 auto;">
<table style="background: blue; text-align: left;">
<tr>
<td>
Your content here
</td>
</tr>
</table>
</div>
</center>
<!--[if mso]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</table>
Outlook does not support max-width, and therefore the size is fixed to 640px for Outlook. For all other clients, the width of the e-mail will be the same as that of the viewing window, but maximum 800px.
Please let me know if you find a client where these solutions does not work, so that we can find a solution that works with as many clients as possible.
Here is one I've built that I use as the starting point for all my emails. It works 100% on all major email clients:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title></head>
<body style="margin: 0px; padding: 0px background-color: #FFFFFF;" bgcolor="#FFFFFF"><!-- << bg color for forwarding (leave white) // main bg color >> --><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td>
<!-- CENTER FLOAT WIDTH -->
<table width="600" border="0" valign="top" align="center" cellpadding="0" cellspacing="0"><tr><td><!-- Master Width of the center panel -->
preheader...
<!-- CENTER PANEL BG COLOR (to hide separation of tables on email forward from Outlook (known issue) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><tr><td><!-- Master Color of the center panel -->
content...
<!-- /CENTER BG COLOR -->
</td></tr></table>
<!-- /CENTER FLOAT WIDTH -->
</td></tr></table>
<!-- /CENTER FLOAT -->
</td></tr></table></body></html>
It has a built in white background for when someone forwards the email on (they can type on white, while the background for the html designed part remains colored). Also the main panel is set with a bgcolor because Outlook puts gaps between tables when it is forwarded.
Hope that helps.
You can also center your email template by adding align="center"to your main table tag:
<body>
<table align="center">
<tr>
<td style="width:600px;">
<!-- content -->
</td>
</tr>
</table>
</body>
Works with GMail and Outlook
<body style="width:600px;margin: auto;">
<!-- content -->
</body>