I have been trying to get the height of the hr to 0px, any other amount seems to be fine and the two matches. I will also post my code at the bottom. I am not sure if this is a CSS issue or an HTML issue. Any explanation would be greatly appreciated.
Here are two of my hr elements with the CSS code I made with it, yet both look different
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Personal Website</title>
<style>
body{
background-color: #97BFB4;
}
hr {
background-color: whitesmoke;
border-style: dotted;
height : 0px;
width: 10%;
}
</style>
</head>
<body>
<table cellspacing= "20">
<tbody>
<tr>
<td><img src=""></td>
<td>
<h1> <a href="">Personal
Site </a></h1>
<p><em> Computer Engineer at Stony Brook University </em></p>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<hr>
<h3>Experience</h3>
<table>
<thead>
<th>
Dates
</th>
<th>
Work
</th>
</thead>
<tbody>
<tr>
<td>June 2021</td>
<td>Undergraduate Researcher</td>
</tr>
<tr>
<td>Sept 2020</td>
<td>Vice President Of Robotics</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<hr>
</body>
Before Update:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Personal Website</title>
<style>
body{
background-color: #97BFB4;
}
hr {
background-color: whitesmoke;
border-style: dotted;
border-width: 2px 0 0 0;
height : 0px;
width: 10%;
}
</style>
</head>
<body>
<table cellspacing= "20">
<tbody>
<tr>
<td><img src=""></td>
<td>
<h1> <a href="">Personal
Site </a></h1>
<p><em> Computer Engineer at Stony Brook University </em></p>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<hr>
<h3>Experience</h3>
<table>
<thead>
<th>
Dates
</th>
<th>
Work
</th>
</thead>
<tbody>
<tr>
<td>June 2021</td>
<td>Undergraduate Researcher</td>
</tr>
<tr>
<td>Sept 2020</td>
<td>Vice President Of Robotics</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<hr>
</body>
UPDATE:
I did find a way to get to my goal by deleting the border color and changing the border style for the different sides of the border to none except for one. I got the dotted line I was looking for, but I still would like to understand why exactly my issue came about in the first place? It didn't seem there was any real distinction between the way I set up my first <hr> tag and my second. If someone can clear that up in case the issue occurs with other tags that would be greatly appreciated. Also, I will put code snippets of before and after.
After Update:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Personal Website</title>
<style>
body{
background-color: #97BFB4;
}
hr {
/* background-color: whitesmoke; */
border-style: dotted none none none;
border-color: grey;
border-width: 5px;
height : 0px;
width: 10%;
}
</style>
</head>
<body>
<table cellspacing= "20">
<tbody>
<tr>
<td><img src=""></td>
<td>
<h1> <a href="">Personal
Site </a></h1>
<p><em> Computer Engineer at Stony Brook University </em></p>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<hr>
<h3>Experience</h3>
<table>
<thead>
<th>
Dates
</th>
<th>
Work
</th>
</thead>
<tbody>
<tr>
<td>June 2021</td>
<td>Undergraduate Researcher</td>
</tr>
<tr>
<td>Sept 2020</td>
<td>Vice President Of Robotics</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<hr>
</body>
It's not really different behaviour.
It's behaviour that happens all over webpages whenever the numbers don't line up exactly.
How do you render a 99px image at width: 100px; ?
How many pixels wide is a width: 33.3%;-div in a 100px-container ?
The answer will involve rounding numbers causing them to go a little bit up, or a little bit down. You're seeing the same effect here with the border aligning differently under high pressure.
If instead of your <hr>, it was a roughly 100px by 100px block, then you wouldn't be able to tell when the border was slightly different in different cases.
In your case, in the top example, your bordered <hr> ended up being displayed as a 3 pixel high component, and in the lower example as 2 pixels. I'm guessing that consists of:
1px for the border-top
1px for the border-bottom
either 0px or 1px for the content that is in between the borders (due to rounding up or down).
If I had continued to make hr tags under these high-pressure
conditions, should I expect more variations? i.e. if I added more hr
tags with height 0, would they randomly be between [0,1] pixels?
Saad Satter
No i suspect not. In your case it either rounds up or down, there's not really another outcome.
Things end up being rounded to an integer of whatever the smallest supported (sub)unit is (1 pixel in this case i suppose).
It is possible that, if on top of the height being such a dodgy edge-case (where rounding can make or break it), the width was also such an edge case, then you might potentially have a handful of different possible endresults. A width: 0.5px; height: 0.5px;-type of situation.
For any designer though, you either want to be clear as to what you want (eg: supply whole numbers, not partial pixels), or you want to have conditions in place where either result is fine.
If your website has a content area which contains lots of paragraphs of text, which is width: 1207.5px; then it'll look fine no matter if it ends up being 1207px or 1208px, no-one will be able to tell.
Okay, we know that 0 means nothing. When the value is empty then we use 0. Now, here you are saying in CSS that make the height of hr 0px. That means no value. So, without a single px it can't show anything to you in display. That's why 0px doesn't exist. Hope you got it.
In theory what you are doing is fine, there is theoretically no problem with having a zero height element with borders.
However, CSS pixels do not on many modern screens, map one to one with screen pixels. Several screen pixels may be used for one CSS pixel.
There can therefore be edge effects when the system has to decide exactly where to place things. You can see this sometimes by zooming. In your example try this and you will probably see the unwanted white line come and go at different magnifications.
So in answer to one of your queries, yes it is something to avoid. In your case try setting just the top border at twice the height without the other borders and see what happens.
Related
Office rendering of HTML is a known headache an I have a problem with Outlook 2016. A small, 1px horizontal line is rendered below my table. Tables are a common practice for formatting due to many Outlook/Office/Word HTML/Richtext/Mixup flaws.
The 1px line is really a small gap or hole in the white background color of the table, showing the background color of the body. I managed to figure this out by changing background color to red instead of grey.
The code can be tested in Notepad++ by selecting Run>Send via Outlook on a computer with Windows and Outlook Client installed...
<!DOCTYPE html>
<html>
<head>
<style>
html,
body
{
font-family: 'sans-serif';
}
</style>
</head>
<body style="background-color: red">
<table style="background-color: white;" >
<tr>
<td>
<table>
<tr>
<td>
Test before
</td>
</tr>
</table>
<table>
<tr>
<td>
<p>
Test 1<br>
Test 2<br>
Test 3
</p>
</td>
</tr>
</table>
<br/><br/>
Test after
</td>
</tr>
</table>
</body>
</html>
The structure is a scaled down version of an email where the elements are used to present information.
(Note! TL;DR; - Best solution in the bottom)
There are couple of different ways of changing the structure to make the gap go away. However this is not an option in my case. The solution that fixed it for me, was to scale down everything to a minimal, step by step according to the above, and finally try to change all values.
The final solution in my case, was to change font size in the table before, to NOT 30px.
Test before
In my specific encounter with the randomizer-magic of Ms Outlook rendering, this was the key. I am sure the solution may vary for others, but changing a few font-sizes around might be worth a shot.
Since this took me long enough I thought I better post the solution, maybe it can help someone as frustrated as me!
[Edit] Here is another example of this issue - Messing with line-height
<!DOCTYPE html>
<html>
<head>
<title>Yea</title>
</head>
<body style="width: 100%; background-color: white;">
<br/><br/>
<table cellspacing="0" cellpadding="0" style="background-color: white;width: 100%; line-height: 0;" border="0" border-size="0">
<tr>
<td style="height: 114px; font-size: 100px; background-color: #999999"><span> My name is Jasper</span></td>
</tr>
</table>
<br/><br/>
</body>
</html>
Well, the issue in this case when investigating the code, was the line-height: 0; of the table element. Remove it or set it to 1px to get rid of the element that looks like a white thick line but is actually a glimpse of the background. This is definitely a rendering bug and it at least shows in Outlook 2019 / 2016 (win 10). Reproduceable with Litmus.
[Edit #2 - Add an invisible tag]
By adding the patent pending gap-line eliminator directly before the problem-table-tag I managed to get rid of some lines.
<table class="unwanted-line-eliminator" cellpadding="0" cellspacing="0" style="height:0">
<tr>
<td style="font-size: 0px;line-height: 0px;"> </td>
</tr>
</table>
[Edit #3 - Finally - Best solution!]
Since the gaps are a bit random between Outlook versions, appears both horizontally and vertically (according to my last few hours of troubleshooting) and depends on DPI settings amongst other things the absolute best solution seems to be the following...
Add a content encapsulating <table style="background-color: lime"><tr><td>CONTENT</td></tr></table> with the top/front background-color. This will for some reason cover all gaps! Best of luck!
Another possible solution which helped in my case was to avoid using paragraphs <p> - I've just replaced them with line breaks <br/><br/>.
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.
I have a <table> of data where consecutive rows are conceptually related and need to stay together. I've group each pair of rows in a <tbody> tag. When it comes time to print the table, I want to make sure that page breaks only happen between <tbody> tags.
I've tried some variations of page-break-inside: avoid and page-break-after: auto, but can't seem to get it to work in Chrome 42 (see screenshot below)
However, it does seems to work as expected in Firefox 40 and IE 11 though. It looks like page-break-* might only apply to block level elements. Is there a good way to accomplish this in html/css?
Example code:
<!doctype html>
<html>
<head>
<style>
table {
width: 70%;
border-collapse: collapse;
}
thead {
display: table-header-group;
text-align: left;
border-bottom: 2px solid #000;
}
tbody {
page-break-inside: avoid;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Project #</th>
<th>Owner</th>
<th>% Complete</th>
</tr>
</thead>
<tbody>
<tr>
<td>HR-123</td>
<td>Arther Dent</td>
<td>42%</td>
</tr>
<tr>
<td colspan='3'>Description: Find travel guide to get me back to earth.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>RD-123</td>
<td>Frodo Baggins</td>
<td>9%</td>
</tr>
<tr>
<td colspan='3'>Description: Find a better way to get the ring to Mordor.</td>
</tr>
</tbody>
<!-- repeat tbody sections as necessary to get onto the second page -->
</table>
</body>
</html>
Here's a JSFiddle that'll give you a bit of an idea of what I'm trying to accomplish.
Edit: I considering not using a table but didn't since (i) I want my columns to line up, and (ii) I really don't want to hard-code column widths to make sure they're all the same.
Try wrapping it all in a
make that specific a block element (http://learnlayout.com/inline-block.html)
then use page-break-*
<html>
<tr>
<td style="padding-left: 5px;padding-bottom:3px; font size="35;""> <b>Datum:</b><br/>
November 2010 </td>
</html>
is my code correct? i would like to increase the font of the first line. Not sure if i have to put 2 "'s here. and it seems it didn't work.
Try this:
<html>
<table>
<tr>
<td style="padding-left: 5px;
padding-bottom: 3px;">
<strong style="font-size: 35px;">Datum:</strong><br />
November 2010
</td>
</tr>
</table>
</html>
Notice that I also included the table-tag, which you seem to have forgotten. This has to be included if you want this to appear as a table.
font-size:35px;
So like this:
<html>
<table>
<tr>
<td style="padding-left:5px;padding-bottom:3px;">
<strong style="font-size:35px;">Datum:</strong>
<br/>
November 2010
</td>
</tr>
</table>
</html>
Although inline styles are a bad practice and you should class things. Also you should use a <strong></strong> tag instead of <b></b>
you dont need those quotes
<td style="padding-left: 5px;padding-bottom:3px; font-size: 35px;"> <b>Datum:</b><br/>
November 2010 </td>
There are a couple of answers posted here that will give you the text effects you want, but...
The thing about tables is that they are organized collections of labels and data. Having both a label ("Datum") and the value that it labels in the same cell is oh so very wrong. The label should be in a <th> element, with the value in a <td> either in the same row or the same column (depending on the data arrangement you are trying to achieve). You can have <th> elements running either vertically or horizontally or both, but if you don't have heading cells (which is what <th> means), you don't have a table, you just have a meaningless grid of text. It would be preferable, too, to have a <caption> element to label the table as a whole (you don't have to display the caption, but it should be there for accessibility) and have a summary="blah blah blah" attribute in the table tag, again for accessibility. So your HTML should probably look a lot more like this:
<html>
<head>
<title>Test page with Table<title>
<style type="text/css">
th {
font-size: 35px;
font-weight: bold;
padding-left: 5px;
padding-bottom: 3px;
}
</style>
</head>
<body>
<table id="table_1" summary="This table has both labels and values">
<caption>Table of Stuff</caption>
<tr>
<th>Datum</th>
<td>November 2010</td>
</tr>
</table>
</body>
</html>
That may not be exactly what you want -- it's hard to tell whether November 2010 is a data point or a label from what you've posted, and "Datum" isn't a helpful label in any case. Play with it a bit, but make sure that when your table is finished it actually has some kind of semantic meaning. If it's not a real table of data, then don't use a <table> to lay it out.
Don't need to quote css attributes and you should specify an unit.
(You should use an external css file too..!)
<html>
<table>
<tr>
<td style="padding-left: 5px;padding-bottom:3px; font-size:35px;"> <b>Datum:</b><br/>
November 2010 </td>
</table>
</html>
just write the css attributes in a proper manner i.e:
font-size:35px;
I suggest you use CSS instead, seems like you're going to repeat those lines later on. But to answer your question:
<html>
<head>
<style type="text/css">
td.randname {
padding-left: 5px;
padding-bottom:3px;
font-size:35px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="randname"> <b>Datum:</b><br/>
November 2010 </td></tr>
</table>
</body>
</html>
The correct CSS for setting font-size is "font-size: 35px". I.e.:
<td style="padding-left: 5px; padding-bottom:3px; font size: 35px;">
Note that this sets the font size in pixels. You can also set it in *em*s or percentage. Learn more about fonts in CSS here: http://www.w3schools.com/css/css_font.asp
I'm writing a simple web report with a simple layout for internal use.
The layout consists in a header on top and a content below, usually a table and a little more (very simple).
My problem is that when the table is larger than the browser's viewport, the layout messes up: the header is wide as the viewport and not as the page body so when I scroll right it goes off screen, an the right border of the table is stuck against the viewport right side even though I a margin for the body.
The HTML code of a clean test page is (number of tr elements reduced for lightness):
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link type="text/css" rel="stylesheet" href="style.css">
<title>Test page</title>
</head>
<body>
<h1>
Test page
</h1>
<div class="body" id="body">
<p>
This is a test page.</p>
<table class="shiny_table">
<thead>
<tr>
<th>
0
</th>
<th>
1
</th>
<th>
2
</th>
<th>
3
</th>
<th>
4
</th>
<th>
5
</th>
<th>
6
</th>
<th>
7
</th>
<th>
8
</th>
<th>
9
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
0.9721986181295992
</td>
<td>
0.6041465194175369
</td>
<td>
0.5777094598685739
</td>
<td>
0.9741661116808004
</td>
<td>
0.8224265079662112
</td>
<td>
0.7236314528096713
</td>
<td>
0.24133248609797375
</td>
<td>
0.8836446393181888
</td>
<td>
0.02439762941899959
</td>
<td>
0.8171104825665716
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The content of style.css is:
* { font-family: Verdana, Arial, Sans Serif; font-size: 10pt; }
html, body { margin: 0pt; padding: 0pt; }
body { background-color: rgb(192, 255, 192); }
h1 { margin: 0pt; padding: 10pt; font-size: 20pt; background-color: rgb(192, 192, 255); text-align: center; text-transform: uppercase; }
.body { margin: 10pt; }
.shiny_table, .shiny_table th, .shiny_table td { border: solid 1pt rgb(192, 192, 192); border-collapse: collapse; }
.shiny_table th, .shiny_table td { padding: 5pt; }
This is how it shows in Mozilla Firefox 3.6.6 (Internet Explorer 8.0.6001.18702 has the same problem):
How can I have the header right (have the background colour stretch to the right while the text is centered in the "first" viewport", stay fixed without moving, other pretty ideas), and have the table's right border spaced from the page's border?
Thanks in advance, Andrea.
Well, as far as getting the table to have the gap at the left, set your .body class to this:
.body {display: inline-block; padding: 10px;}
To get your header to do what you desire is more complicated. If you have a fixed header height, then I suggest putting that color as part of your body tag background via an image with repeat-x on it. If it is not a fixed height, then I have not come up with a solution for that.
Ok, so a couple things going on:
1) First consider switching units on your css fro pts to px or em. Pts are rendered differently by different browsers, so you can't count on them to effectively size things uniformly.
2) The numbers you're displaying are quite large. Could you cut down on the decimal points via the backend? Drop the font size down more? Limiting the data is unfortunate, but it's something that we as UI people often have to deal with. And not surprisingly, it's something that the business and marketing people seem to have little ability to adapt to.
3) Consider a different design pattern such as this: http://datatables.net/examples/server_side/row_details.html or using something such as Qtip (http://craigsworks.com/projects/qtip/) to display extended data. In particular, datatables allows some great sorting and searching that your users will find invaluable. Also, it can hide columns that can still be searched on. Try the green plus button in the example above.
4) Implicitly set your td widths. Use CSS (best) or inline a "style" if they each need to be different. Set overflow to none at last resort.