I'm very new to coding and am taking a class to learn HTML5 and CSS3.
I have an old file however, that I need to update quickly for a client. It's set up with tables and inline styles which I know is a bit sloppy so I'm just trying to clean it up a little bit and get it to validate. I was able to get the file down from about 50 errors to just one but am stuck on figuring out this last part. Can someone point me in the right direction?
Thanks!
Line 68, Column 32: there is no attribute "background"
The DOCTYPE is XHTML 1.0 Transitional.
<tr>
<td colspan="3" background="http://www.website.com/image.jpg" align="left" style="font-family:museo300, Arial, Helvetica, sans-serif; font-size:32px; color:#145099; padding:0px 50px 0px 50px; line-height:38px;">Headline.
</td>
</tr>
I tried changing it to inline CSS using this code but now I have no background image. Can you tell me what I'm doing wrong? It looked fine before.
<tr>
<td colspan="3" align="left" style="font-family:museo300, Arial, Helvetica, sans-serif; font-size:32px; color:#145099; padding:0px 50px 0px 50px; line-height:38px; background-image:http://www.website.com/image.jpg;">Headline.
</td>
</tr>
I figured it out. I was coding the CSS wrong, should have been:
<tr>
<td colspan="3" align="left" style="font-family:museo300, Arial, Helvetica, sans-serif; font-size:32px; color:#145099; padding:0px 50px 0px 50px; line-height:38px; background-image: url(http://www.website.com/image.jpg);">Headline.
</td>
</tr>
Thanks for the help!
Since 1996, you should use the CSS background-image property.
Related
I am inserting the <audio> tag into a table that uses a caption as the table title. In most browsers the caption appears at the top of the table, but in Safari it appears at the bottom of the table.
Tested on Safari 11 on Mac OS "el Capitan".
Note:
The caption only changes to the bottom when using the <audio> tag (without the <audio> tag, the caption appears at the top)
The audio plays fine.
Here's part of the HTML:
<table>
<caption class="paragraphheader">
Ordinal Numbers 0 to 9
</caption>
<tr>
<th scope="col">Number</th>
<th scope="col">Name</th>
<th scope="col">Pronunciation</th>
</tr>
<tr>
<td>0<sup>th</sup> *</td>
<td>Zeroth <br /></td>
<td>"<span class="textblue">z</span>
<span class="textblue">ie</span>
<span class="textblue">r</span>
<span class="textorange">o</span>
<span class="textblue">th</span>"<br />
<audio controls controlsList="nodownload" preload="auto" style="width:66px">
The css related to tables:
table {
border-width: 1px;
border-style: ridge;
margin-left: inherit;
padding: 2px;
width: 98%;
float: right;
caption-side: top;}
td {
border-width: 1px;
border-style: inset;
padding:2px
}
th {
border-width: 1px;
border-style: inset;
}`
Here is the site (I'm still working on it, so may change)
http://www.simpleenglish.info/numbers-ordinal.html
This is driving me nuts! Any suggestions?
learning asp.net and came to a problem i can not solve yet, any help would be appreciated.
Here is the screen shot of how it is now:
enter image description here
and that how i want it to be on the web:
enter image description here
This is my table on Index page
#{
ViewBag.Title = "Главная страница";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<table>
#foreach (var b in ViewBag.Events)
{
<tr>
<td style=" padding: 8px;"><p><h2>#b.Date</h2></p></td>
<td style=" padding: 8px;"><p><h2>#b.Time</h2></p></td>
</tr>
}
<tr>
<td style="border: solid 1px grey; color: red; text-align: center; "><p><h3>Title</h3></p></>
<td style="border: solid 1px grey; color: red; text-align: center; "><p><h3>Place</h3></p></td>
<td style="border: solid 1px grey; color: red; text-align: center; "><p><h3>Lecturer</h3></p></td>
</tr>
#foreach (var b in ViewBag.Events)
{
<tr style="padding: 80px;">
<td style="border: solid 1px grey; padding: 8px; background-color: #ddc9ee;"><p><h4>#b.Title</h4></p></td>
<td style="border: solid 1px grey; padding: 8px; background-color: #ddc9ee; "><p><h4>#b.Location</h4></p></td>
<td style="border: solid 1px grey; padding: 8px; background-color: #ddc9ee; "><p><h4>#b.Responsible</h4></p></td>
</tr>
}
</table>
Add Event
Home controller
using PhClub.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace PhClub.Controllers
{
public class HomeController : Controller
{
EventsContext db = new EventsContext();
public ActionResult Index()
{
IEnumerable<Event> events = db.Events;
ViewBag.Events = events;
return View();
}
[HttpGet]
public ActionResult CreateEvent()
{
return View();
}
[HttpPost]
public ActionResult CreateEvent(AddEvent addEvent)
{
db.AddEvents.Add(addEvent);
db.SaveChanges();
return View();
}
}
}
And second question - at the moment, when i add new event to Db with hardcoded ID it is not being populated with method above - any advise of where im going wrong?
Here is the table for event input i use,
<body>
<div>
<h3>Form of event creation</h3>
<form method="post" action="">
#*<input type="hidden" value="#ViewBag.AddEventId" name="AddEventId" />*#
<table>
<tr>
<td><p>Enter Id of event :</p></td>
<td><input type="text" name="AddEventId" /> </td>
</tr>
<tr>
<td><p>Enter title :</p></td>
<td><input type="text" name="Title" /> </td>
</tr>
<tr>
<td><p>Date:</p></td>
<td><input type="text" name="Date" /> </td>
</tr>
<tr>
<td><p>Time :</p></td>
<td><input type="text" name="Time" /> </td>
</tr>
<tr>
<td><p>Address :</p></td>
<td>
<input type="text" name="Location" />
</td>
<tr>
<td><p>Lecturer:</p></td>
<td><input type="text" name="Responsible" /> </td>
</tr>
<tr><td><input type="submit" value="Send" /> </td><td></td></tr>
</table>
</form>
</div>
</body>
Your current structure has two adjacent loops:
#foreach (var b in ViewBag.Events)
{
[some output]
}
[more output]
#foreach (var b in ViewBag.Events)
{
[even more output]
}
So you're looping over the events twice, effectively building two different sections of table divided by that output in the middle. It looks like you want just one loop, where each iteration of the loop has a couple rows of table output. Something structured more like this:
#foreach (var b in ViewBag.Events)
{
[some output]
[more output]
[even more output]
}
This is untested of course, but perhaps in your code it would look like this:
#foreach (var b in ViewBag.Events)
{
<tr>
<td style=" padding: 8px;"><p><h2>#b.Date</h2></p></td>
<td style=" padding: 8px;"><p><h2>#b.Time</h2></p></td>
</tr>
<tr>
<td style="border: solid 1px grey; color: red; text-align: center; "><p><h3>Title</h3></p></>
<td style="border: solid 1px grey; color: red; text-align: center; "><p><h3>Place</h3></p></td>
<td style="border: solid 1px grey; color: red; text-align: center; "><p><h3>Lecturer</h3></p></td>
</tr>
<tr style="padding: 80px;">
<td style="border: solid 1px grey; padding: 8px; background-color: #ddc9ee;"><p><h4>#b.Title</h4></p></td>
<td style="border: solid 1px grey; padding: 8px; background-color: #ddc9ee; "><p><h4>#b.Location</h4></p></td>
<td style="border: solid 1px grey; padding: 8px; background-color: #ddc9ee; "><p><h4>#b.Responsible</h4></p></td>
</tr>
}
Basically, just loop over the records once and build the output you want for each record.
(For your second question, you may want to open a new Stack Overflow question. To avoid confusion and keep things concise it's generally best to ask one question at a time.)
I recently reviewed the Pluralsight course on HTML email and then made a sample for myself. I tested it through Mailchimp and the Mailchimp test environment renders it as expected for both mobile and desktop, but when I sent a test email to myself, both gmail clients that I use (Gmail app through Chrome on desktop and Android app on mobile) appeared to strip the style and link tags, in particular stripping the media screen size queries and associated classes, as well as font imports.
This article claims that gmail clients are now accepting tags, at least on most platforms, including the two I am testing. However, as noted the #media and #import queries are not working. (1) Is there something obviously wrong with my code?, or (2) is this an issue with Mailchimp?
HTML email code, and part of
<!DOCTYPE html>
<html lang="en">
<head>
<title>Happy Holidays!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Cabin|Libre+Baskerville|Pacifico" rel="stylesheet">
<style type="text/css">
/* CLIENT-SPECIFIC STYLES ------------------- */
#outlook a {
padding: 0; /* Force Outlook to provide a "view in browser" message */
}
.ReadMsgBody {
width: 100%; /* Force Hotmail to display emails at full width */
}
.ExternalClass {
width:100%; /* Force Hotmail to display emails at full width */
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%; /* Force Hotmail to display normal line spacing */
}
body, table, td, a { /* Prevent WebKit and Windows mobile changing default text sizes */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table, td { /* Remove spacing between tables in Outlook 2007 and up */
mso-table-lspace: 0pt;
mso-table-rspace:0pt;
}
img { /* Allow smoother rendering of resized image in Internet Explorer */
-ms-interpolation-mode: bicubic;
}
/* RESET STYLES --------------------------- */
body {
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
a {
text-decoration: none;
}
/* iOS BLUE LINKS */
.apple-links a {
color: #A50001;
text-decoration: none;
}
/* FONTS */
#import url('https://fonts.googleapis.com/css?family=Cabin|Libre+Baskerville|Pacifico');
/* MOBILE STYLES ------------------------ */
#media only screen and (max-width: 600px) {
td[class="logo"] img {
margin: 0 auto !important;
}
table[class="wrapper"] {
width: 100% !important;
}
td[class="mobile-image-pad"] {
padding: 0 10px 0 10px !important;
}
td[class="mobile-title-pad"] {
padding: 10px 0px 0px 10px !important;
}
td[class="mobile-text-pad"] {
padding: 10px 10px 10px 10px !important;
}
td[class="mobile-column-right"] {
padding-top: 20px !important;
}
img[class="fluid-image"] {
width: 100% !important;
height: auto !important;
}
td[class="hide"] {
display: none !important;
}
td[class="mobile-button"] {
padding: 12px 60px 12px 60px !important;
}
td[class="mobile-button"] a {
font-size: 24px !important;
}
}
</style>
</head>
<body style="margin: 0; padding: 0;" >
<!-- CONTAINER TABLE (HEADER) -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style=" table-layout: fixed;">
<tr>
<td align="center" bgcolor="#339969" style="padding: 0 0 0 0;">
<!-- HIDDEN PREHEADER -->
<div style="display: none; font-size: 1px; color:#333333; line-height: 1px; font-family: Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
Preheader inbox text
</div>
<!-- WRAPPER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapper">
<!-- HEADER -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" background="img/url" alt="Bappy Bolidays!" width="100%" height="100" style="background-size:contain;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- CONTAINER TABLE (HERO) -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td align="center" bgcolor="#C3D79C" style="padding: 20px 0 20px 0;">
<!-- WRAPPER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper">
<tr>
<td>
<!-- TWO COLUMNS -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!-- LEFT COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" width="64%" align="left" class="wrapper">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="mobile-image-pad">
<img src="img/url" alt="Two Beautiful Peeps" width="384" height="288" border="0" style="display: block; image-orientation: from-image; color: #A50001; font-family: Arial, sans-serif; font-weight: bold; font-size: 24px; background-color: #339969; -webkit-border-radius: 4px; border-radius: 4px;" class="fluid-image" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- RIGHT COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" width="30%" align="right" class="wrapper">
<tr>
<td valign="middle" height="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="color: #A50001; font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 32px; line-height: 38px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-title-pad">
Title
</td>
</tr>
<tr>
<td align="center" style="color: #339969; font-family: 'Cabin', sans-serif; font-weight: bold; font-size: 20px; line-height: 24px;" class="mobile-title-pad">
from
</td>
</tr>
<tr>
<td align="center" style="color: #A50001; font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 32px; line-height: 38px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-title-pad">
Title
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0 0 0;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#339969" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-button">
let's go champ →
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- CONTAINER TABLE (VIGNETTES) -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td align="center" bgcolor="#fff2f9" style="padding: 40px 0 40px 0;">
<!-- WRAPPER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper">
<tr>
<td>
<!-- TWO COLUMNS (ROW 1) -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!-- LEFT COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" width="47%" align="left" class="wrapper">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="mobile-image-pad">
<a href="album/location" target="_blank">
<img src="img/url" alt="Kapanda" width="280" height="218" border="0" style="display: block; padding: 0; color: #ffffff; font-family: Arial, sans-serif; font-weight: bold; font-size: 18px; background-color: #589263; -webkit-border-radius: 4px; border-radius: 4px;" class="fluid-image" />
</a>
</td>
</tr>
<tr>
<td align="left" style="padding: 20px 0 0 0; color: #A50001; font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 18px; line-height: 22px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-title-pad">
Title
</td>
</tr>
<tr>
<td align="left" style="padding: 10px 0 10px 0; color: #666666; font-family: 'Cabin', sans-serif; font-weight: normal; font-size: 18px; line-height: 22px;" class="mobile-text-pad">
description more description!
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- RIGHT COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" width="47%" align="right" class="wrapper">
<tr>
<td class="mobile-column-right">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="mobile-image-pad">
<a href="album/location" target="_blank">
<img src="url/img" alt="Hawaii Sunset" width="280" height="218" border="0" style="display: block; padding: 0; color: #ffffff; font-family: Arial, sans-serif; font-weight: bold; font-size: 18px; background-color: #589263; -webkit-border-radius: 4px; border-radius: 4px;" class="fluid-image" />
</a>
</td>
</tr>
<tr>
<td align="left" style="padding: 20px 0 0 0; color: #339969; font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 18px; line-height: 22px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);" class="mobile-title-pad">
Title
</td>
</tr>
<tr>
<td align="left" style="padding: 10px 0 10px 0; color: #666666; font-family: 'Cabin', sans-serif; font-weight: normal; font-size: 18px; line-height: 22px;" class="mobile-text-pad">
Description More description.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Gmail generally doesn't support web-fonts. If you have a web font installed on your own computer, you’ll be able to see it in Gmail, but that's it.
Gmail supports #media queries almost everywhere, but not everywhere. The Litmus article you referenced contains a support table of Gmail products and their #media query support.
There's little telling which product MailChimp Or Litmus are using to generate their previews, so it could look fine on their end and break in your account... with no error on either end.
You said that you checked using Android app on mobile, and that seems like one of the Gmail products that doesn't support media queries ↓ ↓ ↓
This is pure conjecture, but from what I understand Google is done rolling out this change. So those red x's might remain unsupported for some time.
Gmail does support style blocks, but doesn't support selectors in CSS. Remove the selectors and your CSS will work. For example, change:
td[class="mobile-text-pad"]
to:
td.mobile-text-pad
And it should work.
I am using Firebug on Firefox for Mac in order to see the info about the request data sent to the server and what response is taken from the server. I have a problem with my Spring+Hibernate+JSF+MySQL application; i.e. I cannot persist new objects to the database. In Eclipse, I have an XHTML file as follows:
<?xml version="1.0" encoding="UTF-8"?>
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>JSF Spring Hibernate Integration</title>
<style type="text/css">
.tg {
border-collapse: separate;
border-spacing: 0;
border-color: #ccc;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: #ccc;
color: #333;
background-color: #fff;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: #ccc;
color: #333;
background-color: #f0f0f0;
}
.tg .tg-4eph {
background-color: #f9f9f9
}
</style>
</h:head>
<h:body>
<h1>Add a Person</h1>
<h:form>
<table>
<tr>
<td><label>Name</label></td>
<td><h:inputText id="Name" value="#{person.name}"></h:inputText>
</td>
</tr>
<tr>
<td><label>Country</label></td>
<td><h:inputText id="country" value="#{person.country}"></h:inputText>
</td>
</tr>
<tr>
<td colspan="2"><h:commandButton
action="#{personService.addPerson(person)}" value="Add Person"></h:commandButton>
</td>
</tr>
</table>
</h:form>
<br />
<h3>Persons List</h3>
<c:if test="${!empty personService.listPersons()}">
<table class="tg">
<tr>
<th width="80">Person ID</th>
<th width="120">Person Name</th>
<th width="120">Person Country</th>
</tr>
<ui:repeat value="${personService.listPersons()}" var="person">
<tr>
<td>${person.id}</td>
<td>${person.name}</td>
<td>${person.country}</td>
</tr>
</ui:repeat>
</table>
</c:if>
</h:body>
</html>
I am new to and very inexperienced about Firebug, but while examining GET and POST parameters at the Firebug, I saw something interesting for me. After clicking on 'Add Person' button on JSF view page; the data,which user enters into the Name and Country fields, is sent as POST parameters named j_idt6:Name and j_idt6:country instead of just 'Name' and 'country'.Also, javax.faces.ViewState seems kinda odd to me.Here is the screenshot of it:
I am not definitely sure of it, but I suppose that this may cause failure in persisting a new object in my database.Here is my question:How can I edit these parameters on Firebug?How to make them work properly?
Firebug doesn't let you edit the request parameters, but if you are using Firefox, the built-in dev tools allow this.
Hit Ctrl + Alt + Q on Windows/Linux or Cmd + Alt + Q on Mac to get to the Network panel
Reload the page
Select the relevant request to open the side panels
Within the Headers side panel click on Edit and Resend
Edit the headers
Click Send
Just right-click on the text box and choose Inspect Element. Then rename the input as you like by double-clicking on name attribute (or click-right + Edit as HTML). And repeat those steps for the second input field.
Or you can modify the POST parameters as #Sam said.
I cannot get "text-overflow: ellipsis;" to work...
Maybe someone can give ma some help with that one :-)
Small example:
http://jsfiddle.net/qKS8p/2/
http markup:
<table class="" border="1">
<tr><td colspan=3>…</td></tr>
<tr class="">
<td width="90"><span class="prose">column one</span></td>
<td width="20"><span class="prose">column two</span></td>
<td width="90"><span class="prose">column three</span></td>
</tr>
<tr><td colspan=3>…</td></tr>
</table>
css style rules:
.prose {
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
I would expect "column two" to be chopped because of the td's width of 20px. I also tried different variants with divs, tds etc, but I cannot see any change. Note, that this does not work in any browser I checked. So there is certainly something I miss.
There are millions of pages out there about examples, browser differences and and and. But I cannot get this to work ! According to current information the simple text-overflow attribute is supported in all major browsers now. So I am looking for a pure css solution (not xul, not jquery plugin), since this should work.
Thanks,
arkascha
This fiddle works for me: http://jsfiddle.net/wRruP/3/
HTML
<div><span>column one</span></div>
<div>column two</div>
<div><p>column three</p></div>
### CSS
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 40px;
}
It seems like text-overflow has to be set on the block that's actually constraining the width of the text. <span> is an inline element that doesn't really have a width and thus can't really cut off text, and when I nested a <p>, it didn't inherit the property.
The problem with the code in the example is that the tables automatically enlarge and ignore the set width of 20px if there's more content then 20px.
Here's an example that works: http://jsfiddle.net/qKS8p/34/
I added:
span {
display:block;
width:inherit;
}
Try setting both the text-overflow property and the fixed width on the same block-level element (such as a div), like this:
<table class="" border="1">
<tr><td colspan=3>…</td></tr>
<tr class="">
<td><div class="prose" style="width: 90px">column one</div></td>
<td><div class="prose" style="width: 20px">column two</div></td>
<td><div class="prose" style="width: 90px">column three</div></td>
</tr>
<tr><td colspan=3>…</td></tr>
</table>
With your original CSS:
.prose {
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}