I am setting up a mobile iPhone Intranet site with iWebKit. Most of the things work perfectly, except I cannot get formatting of my table right using CSS.
What I have in my HTML (actually ASP since the HTML is created using queries on a database) is the following:
<div id="content">
<ul class="pageitem">
<li class="textbox">
<table class="mytable">
<tr>
<th>Type</th>
<th>Value1</th>
<th>Value2</th>
<th>Value3</th>
<th>Value4</th>
</tr>
<tr>
<th>First type</th>
<td>123</td>
<td>456</td>
<td>789</td>
<td class="targetok">159</td>
</tr>
</table>
</li>
</ul>
</div>
And I've added the following to iWebKit's CSS file:
.mytable {
border:1px solid black;
border-collapse:collapse;
font-family: Helvetica;
color:#000000;
font-size:20px;
width:100%;
height:35px;
padding:5px;
text-align:center;
-webkit-text-size-adjust:none;
}
.targetok {
background:#80FF80
}
I've tried several combinations (also adding table, tr, th and/or td to .mytable) but the table never seems to be formatted. It is always shown without borders, small font, not colored, ...
Since I don't know much about CSS I also quickly followed the CSS introduction on W3SCHOOLS. As far as I can see the syntax is correct.
I seem to be missing something, but can't find it. Is something wrong in my syntax? Or does iWebKit prevent you from adding your own CSS rules?
To force refreshing you can use this code:
<link href="your.css?1" rel="stylesheet" type="text/css" />
?1
Where 1 is your version, Safari will retrieve this css because it's like php request.
Or you can add inline styles in <style></style> tag
Found the cause.
Apparently, iPhone's Safari does not refresh the CSS file when I change it.
However, I see no clean way on how to force a refresh on the CSS file. Will enter this as a new question.
Related
I am displaying the images with different size in html using img tag. One of the image is 267x168 while the other is 1068x672. Both of images are same but different size. Suppose the smaller image will be aliased as it has been displayed in 50% width. But both of them just look the same. Are the images has been proprocessed before displaying? If yes, how to disable it?
<!DOCTYPE html>
<html>
<body>
<h1>Result Comparison</h1>
<style>
img {
width:100%;
}
td{
border: 1px solid black;
padding:1%;
}
</style>
<table style="width:100%">
<col width="50%">
<tr>
<td align="center"><img src="original.png" width=50%/>Original (size)</td>
<td align ="center"><img src="bicubic.png"/>Bicubic (size)</td>
</tr>
<tr>
<td align="center"><img src="average.png"/>Average (size)</td>
<td align ="center"><img src="median.png"/>Median (size)</td>
</table>
</body>
</html>
When you resize an image, some processing must happen. The software doing the resizing (be that an image-editing program or a browser) must work out some way to remove pixels or add them. It does this using an image filter algorithm. Some common ones are point, linear/bilinear and cubic/bicubic.
In most image editing programs you can choose which type of filter to use, but browsers decide for you. Luckily it looks like you can have some control; based on the information on this page, it looks like you could add a CSS rule to get a pixelated look, like so:
img {
image-rendering: pixelated;
}
However, it's worth noting that to get the pixelated look you have to use a different rule for certain browsers, according to this page. In Chrome, pixelated works, but not crisp-edges. It's the opposite for Firefox.
I have a Google form that I am trying to force to email me the results in a specific format. It works, but the table I insert has a large blank space above it that I would like to get rid of. For example:
Hello!
I have a purchase request that I would like to submit for review, approval,
and processing. Please see below and attached. Thanks.
Name:
Ryan M
Project Number:
Numbers
Project Comments:
No Comments
Website Link to Product:
Cost:
Purpose of Order:
Test
Document Upload:
https://drive.google.com/file/d//view
Date Required By:
2017-01-13
Confirmed Lead Time:
teeeeeest
Here is the Code I'm using:
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-top:0px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
<td><b>Name:</b></td>
<td>{{Name}}</td>
</tr>
<tr>
<td><b>Project Number:</b></td>
<td>{{Project Number}}</td>
</tr>
<tr>
<td><b>Project Comments:</b></td>
<td>{{Project Comments}}</td>
</tr>
<tr>
<td><b>Website Link to Product:</b></td>
<td>{{Website Link to Product}}</td>
</tr>
<tr>
<td><b>Cost:</b></td>
<td>{{Cost}}</td>
</tr>
<tr>
<td><b>Purpose of Order:</b></td>
<td>{{Purpose of Order}}</td>
</tr>
<tr>
<td><b>Document Upload:</b></td>
<td>https://drive.google.com/file/d/{{Document Upload}}/view</td>
</tr>
<tr>
<td><b>Date Required By:</b></td>
<td>{{Date Required By}}</td>
</tr>
<tr>
<td><b>Confirmed Lead Time:</b></td>
<td>{{Confirmed Lead Time}}</td>
</tr>
</table>
</body>
</html>
Any clues would be a great help. Thanks!
HTML emails can be viewed in various different tools and none of them (outlook) support it the same way (CSS markup included).
The way the output looks make me think that the table is not expanding to 100%. Notice how the table cells are stacked. This could be symptomatic of your real problem, the viewport.
You might start by setting the <html> and <body> width to 100%. Try both CSS and the in-line style markup.
<body width="100%">
I'd stay away from any HTML5 options like <meta name="viewport" content="initial-scale=1, width=device-width"> since you can't guarantee support in email applications.
The CSS markup might not be an option so you could try putting it all inline.
Hope this helps.
So I am writing a css page for my class, and I noticed that the style which I applied to span is not applying at all, so I went to http://validator.w3.org/ to check what I did wrong and it gave me this error message
"Line 32, Column 6: Start tag span seen in table."
This is my line 32
<span><tr><td>Mars needs moms</td><td>$150,000,000</td><td>$38,992,758</td><td>$130,503,621</td><td>2011</td></tr></span>
Here is the code for that particular style
span{background-color=:#666;font-weight:bold;color:white;}
Basically my goal is to make this table haveevery other row in the table with a background color being black with the text being white
This is the full code, incase the error made which isn't applying this style is somewhere else. there are other styles in there which don't apply to anything yet, as this is not finished yet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lowest Grossing Movies of all time</title>
<style>
span{background-color=:#666;font-weight:bold;color:white;}
p{text-decoration:underline;line-height:200%;}
h1{text-align:center;font-size:125%;}
table{border-collapse:collapse;}
th,td{padding:25px;}
</style>
</head>
<body>
<h1> Lowest Grossing Movies of All Time </h1>
<table border="1">
<tr><th>Title</th><th>Production Budget</th><th>World Wide Gross</th><th>Net Loss</th> <th>Release Year</th></tr>
<span><tr><td>Mars needs moms</td><td>$150,000,000</td><td>$38,992,758</td> <td>$130,503,621</td><td>2011</td></tr></span>
<tr><td>The 13th Warrior</td><td>$160,000,000</td><td>$61,698,899</td><td>$129,150,551</td><td>1999</td></tr>
<span><tr><td>The Lone Ranger</td><td>$225,000,000</td><td>$243,377,083</td><td>$103,311,459</td><td>2013</td></tr></span>
<tr><td>R.I.P.D.</td><td>$130,000,000</td><td>$66,627,120</td><td>$96,6865,440</td><td>2013</tr>
<span><tr><td>John Carter</td><td>$250,00,00</td><td>$282,778,100</td><td>$108,610,950</td><td>2012</td></tr></span>
</table>
</body>
</html>
The biggest problem you're facing is that there are limited elements that are valid children of the HTML table element, these are:
colgroup,
caption,
thead,
tfoot,
tbody, and
tr
So removing the span elements from the table solves that problem. Also, you'd forgotten to close one of the td elements (you closed the tr, but forgot the td); this is why readable HTML is easier to maintain (it's simply easier to see the code, and omissions, when it's indented and white-spaced).
Incidentally, using your original HTML, had you used your browser's developer tools (such as Web Inspector under Chromium, or Firebug under Mozilla), you'd have been able to inspect the DOM, which would've shown you the brower's (unpredictable and unreliable) reordering of the HTML in order to produce a valid document). For example, Web Inspector shows:
JS Fiddle 'source' for above image.
Note the three span elements moved before the table element, from the table itself.
Your corrected HTML:
<h1> Lowest Grossing Movies of All Time </h1>
<table>
<tr>
<th>Title</th>
<th>Production Budget</th>
<th>World Wide Gross</th>
<th>Net Loss</th>
<th>Release Year</th>
</tr>
<tr>
<td>Mars needs moms</td>
<td>$150,000,000</td>
<td>$38,992,758</td>
<td>$130,503,621</td>
<td>2011</td>
</tr>
<tr>
<td>The 13th Warrior</td>
<td>$160,000,000</td>
<td>$61,698,899</td>
<td>$129,150,551</td>
<td>1999</td>
</tr>
<tr>
<td>The Lone Ranger</td>
<td>$225,000,000</td>
<td>$243,377,083</td>
<td>$103,311,459</td>
<td>2013</td>
</tr>
<tr>
<td>R.I.P.D.</td>
<td>$130,000,000</td>
<td>$66,627,120</td>
<td>$96,6865,440</td>
<td>2013</td> <!-- you omitted a closing </td> tag here -->
</tr>
<tr>
<td>John Carter</td>
<td>$250,00,00</td>
<td>$282,778,100</td>
<td>$108,610,950</td>
<td>2012</td>
</tr>
</table>
Using CSS:
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
/* using ':nth-child(odd)' to style the 'td' elements
of the alternate/odd rows of the table */
tbody tr:nth-child(odd) td {
background-color: #ffa;
}
JS Fiddle demo.
References:
<table>.
:nth-child().
In most modern browsers this could be achieved with css:
tr:nth-child(even) {
background-color:#666;
font-weight:bold;
color:white;
}
No span tags required. (Remove them)
JS Fiddle: http://jsfiddle.net/uB2GR/
You've placed <span> elements between two <tr> elements. This is not valid HTML. You need to place your entire <span> inside a table cell.
<tr><td><span>Some stuff</span></td><td><span>More stuff</span></td></tr>
if you're doing this for styling purposes there's probably a better way with classes applied to the <td> elements
I have a table inside a hyperlink:
<table><tr><td>...</td></tr></table>
In all browsers, hovering over the table changes the pointer to a hand, and through some CSS the table background changes colour (so it looks 'highlighted').
However, in Internet Explorer, clicking the table has no effect. In Firefox and Chrome, it follows the hyperlink as expected.
How can I make IE follow the link when clicked?
You can't nest block-level elements inside of inline elements and expect to get proper results (insert citation here).
You could add some CSS styles to the table and apply a onclick handler so that it acts like a hyperlink:
<table style="fakeLink" onclick="window.location = '/';">...
And the fakeLink class:
.fakeLink
{
color: blue;
border-color: blue;
cursor: pointer;
text-decoration: underline; /* Not sure if this is possible. */
}
And a demo demonstrating the two techniques: http://jsfiddle.net/qNGrp/4/. I don't have IE, but I think only one will work properly.
First: Putting an <a> around block-level elements IS valid in HTML5! Check the code below on http://validator.w3.org/
Second: Any JavaScript work-around reduces accessibility, so it's not the best thing to do ;-)
My solution: Use <div>'s instead of <table> - as shown here:
<!DOCTYPE html>
<html>
<head>
<title>MSIE sucks!</title>
</head>
<body>
<a href="javascript:alert('Yeah!')">
<table>
<tr>
<td><table> Doesn't work in Internet Explorer 8 :-(</td>
</tr>
</table>
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">Solution: <div style="display:table"></div>
</div>
</div>
</a>
</body>
</html>
I've managed to find a solution for this, it's not perfect but it works:
Simplified CSS:
a{ display:inline-block; position:relative; }
a:after{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('x'); }
Simplified HTML:
<a href='http://dropthebit.com' target='_blank'>
<table>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
</table>
</a>
Test page
It shouldn't work. IE has the correct behaviour there. Tables are block-level elements; links are inline elements. Inline elements may not contain block-level elements.
If you want clicking on your element to change the page, you will probably need Javascript. Changing the CSS shouldn't be difficult, though: the :hover pseudo-selector will still work on the table element.
Consider a table with three rows with heights 10, *, 10. I'd like the middle cell to be high enough to fit to the page vertically. Unfortunately "height:100%" doesn't work at table, tr, or td level, possibly due to standards. Even if it happens to work, I don't want 100%, I want 100% of clientHeight-20px :) I can always write script to calculate remaining clientHeight but I wonder if it can be achieved in HTML/CSS standards.
NOTE: I'm using table just for layout, if there are other ways to lay them down in a better way I'm ok with those approaches too.
Try to leave table and use CSS.
This is the first link on google (searching: css page layout)
http://www.maxdesign.com.au/presentation/page_layouts/
You will spend more time at beginning, but then you will love CSS.
Regards,
Lorenzo.
I've tested the following in Firefox and Safari and it works although it's perhaps not the nicest solution! What you'll see is the 20 height on row1 and row3 is still applied and the 100% makes up the rest. If you leave off the padding and margin from the body you'll get scrolling.
<html>
<head>
<style>
html,body { height:100%; padding:0; margin:0; }
</style>
</head>
<body>
<table cellpadding=0 cellspacing=0 style="height:100%;">
<tr height="20" style="background-color:grey;">
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
</tr>
<tr height="20" style="background-color:grey;">
<td>row 3</td>
</tr>
</table>
</body>
</html>
Does this not work?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<!-- Date: 2009-07-13 -->
<style type="text/css" media="screen">
table {height: 100%; width: 100%;}
td {border: 1px solid #000;}
</style>
</head>
<body>
<table>
<tr height="10"><td>Data</td></tr>
<tr height="100%"><td>Data</td></tr>
<tr height="10"><td>Data</td></tr>
</table>
</body>
</html>
It does for me.
The "height: 100%" style will only work on elements that are inside an element that has the height property explicitly set. In your case, the table is likely to be inside the body tag and the body tag doesn't have a height set.
Have the same here - the simple examples above work, while my own page does not "stretch" the needed <tr> element.
What I found so far is that excluding the DOCTYPE (thus putting the browser into quirks rendering mode - even for FireFox!) makes my page behave like the simple examples, yet adding a DOCTYPE to these examples stops them from working.
I guess this is not really an answer yet, but it shows the direction in which to look further for the proper solution. Hopefully there is a way to achieve this "stretching" behaviour without the quirks mode.
EDIT: This answer worked for me. The table is wrapped into an absolutely positioned full-screen div. I guess what it does is the browser first calculates the div's dimensions, and then it knows how the table (and the tr inside it) should be sized. Works with DOCTYPE included, relieving, since I don't want to use the quirks rendering mode.