Receiving odd behaviour of a link in xslt that breaks the page.
I am using XSLT to transform an XML list of manuals. I have included a link to open the manual, (as .pdf) with a target="_blank"
In Internet Explorer 8, (Yes, we are still having to use this), the link functions normally, opening the pdf in a new window, but the page the link was one gets shifted down about 1300-1500px. Refreshing the page fixes it, and it seems in testing that opening the same link a second time and future times it does not exibit this behaviour.
It does not shift the header or menu containers, only the body container.
I have used the developer tools to get the html it is using and do not see where or why it would be doing this. EDIT: I see at the bottom of the html output the css and it appears to have some extreme values for positions maybe?
Relevant (HTML) code:
<!-- saved from url=(0071)http://www.example.com/unit/admin/instructions/instructions.xml -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Generated by Developer Tools. This might not be an accurate representation of the original source file -->
<HTML>
<HEAD>
<TITLE>Intranet</TITLE>
<META content="text/html; charset=UTF-16" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="../../../scripts/jquery-1.11.1.min.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="../../../css/tacamo.css">
</HEAD>
<BODY style="ZOOM: 1">
<DIV style="MARGIN: auto" id=wing-page-container>
<DIV id=header-container><IMG alt="" align=middle src="../images/elements/header.png" width=1000></DIV>
<DIV id=nav-container>
<DIV id=menu>
<UL>
<LI><A id=menu href="http://www.example.com/unit/admin/admin.html">BACK</A></LI>
</UL>
</DIV>
</DIV>
<DIV id=instructions-content-container>
<TABLE class=instructions align=center>
<TBODY>
<TR>
<TH style="TEXT-ALIGN: center; WIDTH: 75px">Instruction Number</TH>
<TH style="TEXT-ALIGN: center; WIDTH: 75px">Date</TH>
<TH style="TEXT-ALIGN: center; WIDTH: 25px">COG</TH>
<TH style="WIDTH: 500px">Description</TH>
<TH style="TEXT-ALIGN: center; WIDTH: 50px">Open</TH>
</TR>
<TR style="BACKGROUND-COLOR: #c0d0e0">
<TD style="WIDTH: 75px">1</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 75px">09/24/1997</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px">GEORGE</TD>
<TD style="WIDTH: 500px">MANUAL ABOUT 1 THING</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px"><A href="http://www.example.com/unit/admin/instructions/1-thing.pdf" target=_blank><IMG border=0 src="../images/elements/pdf-logo.gif" width=25 height=25></A></TD>
</TR>
<TR style="BACKGROUND-COLOR: #ffffff">
<TD style="WIDTH: 75px">2</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 75px">03/26/2010</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px">GEORGE</TD>
<TD style="WIDTH: 500px">MANUAL ABOUT 3 THING</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px"><A href="http://www.example.com/unit/admin/instructions/2-thing.pdf" target=_blank><IMG border=0 src="../images/elements/pdf-logo.gif" width=25 height=25></A></TD>
</TR>
<TR style="BACKGROUND-COLOR: #c0d0e0">
<TD style="WIDTH: 75px">3</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 75px">04/10/2014</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px">GEORGE</TD>
<TD style="WIDTH: 500px">MANUAL ABOUT 3 THING</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px"><A href="http://www.example.com/unit/admin/instructions/3-thing.pdf" target=_blank><IMG border=0 src="../images/elements/pdf-logo.gif" width=25 height=25></A></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<DIV id=footer-container>
<P class=footer>Admin POC: Admin ITPOC's (555-1212)</P>
</DIV>
</DIV>
<DIV style="BORDER-BOTTOM: #ff99cc 1px solid; TEXT-ALIGN: left; FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=80); BORDER-LEFT: #ff99cc 1px solid; PADDING-BOTTOM: 1px; LINE-HEIGHT: 100%; BACKGROUND-COLOR: #ffcccc; MARGIN: 0px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; DISPLAY: block; FONT-FAMILY: 'Sans Serif',serif; FLOAT: left; VISIBILITY: visible; COLOR: black; FONT-SIZE: 11pt; OVERFLOW: visible; BORDER-TOP: #ff99cc 1px solid; BORDER-RIGHT: #ff99cc 1px solid; PADDING-TOP: 1px; font-decoration: none" class=IEDevToolbarAddedElement>href=http://www.example.com/unit/admin/instructions/1-thing.pdf</DIV>
</DIV>
<DIV style="Z-INDEX: 459008; BORDER-BOTTOM: 0px; POSITION: absolute; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; LINE-HEIGHT: 0; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 25px; PADDING-RIGHT: 0px; DISPLAY: block; HEIGHT: 25px; VISIBILITY: visible; OVERFLOW: hidden; BORDER-TOP: 0px; TOP: 5808px; BORDER-RIGHT: 0px; PADDING-TOP: 0px; LEFT: 1346px" class=IEDevToolbarAddedElement>
<DIV style="BORDER-BOTTOM: #ff99cc 1px solid; TEXT-ALIGN: left; FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=80); BORDER-LEFT: #ff99cc 1px solid; PADDING-BOTTOM: 1px; LINE-HEIGHT: 100%; BACKGROUND-COLOR: #ffcccc; MARGIN: 0px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; DISPLAY: block; FONT-FAMILY: 'Sans Serif',serif; FLOAT: left; VISIBILITY: visible; COLOR: black; FONT-SIZE: 11pt; OVERFLOW: visible; BORDER-TOP: #ff99cc 1px solid; BORDER-RIGHT: #ff99cc 1px solid; PADDING-TOP: 1px; font-decoration: none" class=IEDevToolbarAddedElement>href=http://www.example.com/unit/admin/instructions/3-thing.pdf</DIV>
</DIV>
</BODY>
</HTML>
Related
I'm having a trouble to position an image on top og 2 different backgrounds on html email.
web view is fine but for emails it's not. I need this code to preforme on all email clients.
here is the layout of what it supposed to look like, and how it is actually look like.
layout
it seems that the image can't get the neative margin to go on top of the other background.
here is my 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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title></title>
<style type="text/css">
body{
Margin: 0;
padding: 0;
min-width: 100%;
background-color: #F3F3F3;
}
table{
border-spacing: 0;
}
td{
padding: 0;
}
img{
border: 0;
}
#media screen and (min-width: 600px) {
}
#media screen and (max-width: 600px) {
}
</style>
<!--[if mso]>
<style>
body{
font-family: Helvetica, Arial, sans-serif!important;
text-align: center!important;
display: inline-block!important;
}
table{
border-collapse: collapse!important;
}
</style>
<![endif]-->
</head>
<body>
<div style="width: 100%; table-layout: fixed; background-color: #F3F3F3; padding-bottom: 20px; text-align: center;">
<table style="background-color: white; color: #2E4A63; margin: 0 auto; width: 100%; max-width: 600px; border-spacing: 0; padding-bottom: 20px;" width="100%" align="center">
<tr>
<td>
<table style="direction: ltr;" width="100%">
<tr>
<!-- Body Text -->
<td align="center" style="text-align: center;">
<h1 style="font-size: 30px; margin: 45px auto 20px auto; line-height: 32px;">
Highlight text
</h1>
<h3 style="font-size: 18px; font-weight: unset; line-height: 24px; text-align: center; margin: 0 auto 37px auto;">
Paragraph text
</h3>
</td>
</tr>
<tr>
<td align="center" style="text-align: center; padding-top: 10px; padding-bottom: 50px;">
<a href="#" tabindex="-1" target="_blank" style="padding: 15px 55px; background-color: #ff3f4e; color: white; text-decoration: none; font-size: 20px; font-weight: bold; text-align: center; border-radius: 50px;">
<span style="color: white;">Button</span>
</a>
</td>
</tr>
<!-- HERO 2 SECTION -->
<tr>
<td>
<table style="background-image: url('urlbackground.png'); background-size: cover; background-repeat: no-repeat; width: 600px; max-width: 100%;">
<tr>
<!-- TOP SECTION -->
<td>
<!-- Highlight text -->
<h1 style="font-size: 30px; font-weight: unset; margin: 45px auto 15px auto; line-height: 32px; color: black;">
some content
</h1>
<!-- Paragraph text -->
<h3 style="font-size: 18px; font-weight: unset; line-height: 24px; text-align: center; margin: 0;color: black;">
more content
</h3>
</td>
</tr>
<tr>
<td align="center" style="text-align: center; padding-top: 50px; padding-bottom: 90px;">
<a href="#" tabindex="-1" target="_blank" style="padding: 15px 60px; background-color: #16BBDF; color: white; text-decoration: none; font-size: 20px; font-weight: bold; text-align: center; border-radius: 50px;">
<span style="color: white;">Button 2</span>
</a>
</td>
</tr>
</table>
<table style="background-image: url('urlbackground2.png'); background-size: cover; background-repeat: no-repeat; width: 600px; height: 250px; max-width: 100%;">
<tr>
<td>
<div style="margin-top: 50px; margin-left: 40px; color: black; text-align: left; padding: 0; width: 40%;">
<h1 style="font-size: 25px; line-height: 1.2;">
Highlight
</h1>
<h3 style="font-size: 16px; font-weight: unset;">
some text
</h3>
</div>
</td>
<td>
<img src="image.png" alt="image" width="283" style="float: right; padding: 0;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
I'm trying to acheive the following (taken from dropbox):
My snippet (in full page):
table {
text-align: left;
position: relative;
border-collapse: collapse;
border: 1px solid black;
}
th, td {
border: 1px solid black;
padding: 1rem !important
}
tr.red th {
background: #FFF;
}
th {
padding: 50px;
background: white;
position: sticky;
top: 111px; /* Don't forget this, required for the stickiness */
}
<table style="margin-top: 150px; margin-left: auto; margin-right: auto;">
<thead>
<tr class="red">
<th></th>
<th>
<div>
Free
</div>
<div>
0 / month
</div>
Sub
</th>
<th>
<div>
Premium
</div>
<div>
99,99€ / month
</div>
Sub
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="display: flex; align-items: center; width: 100%;">
<span>
<div style="display: inline-block; width: 22px; height: 22px; margin-left: -11px;">
<button style="width: 22px; height: 22px; display: block; background: transparent;" aria-label="More info"></button>
</div>
</span>
<span style="margin-left: 15px; display: flex;">Storage</span>
</div>
</td>
<td>2 Go</td>
<td>15 To</td>
</tr>
</tbody>
</table>
Here you go...
The easiest way to achieve this circle with the letter "i" inside is to use Font Awesome icon. Move the icon to the left by setting margin-left: -25px;. You have to set z-index: 100; (the value is not important, it could be 1) to push the icon in front of everything else. It's necessary to set position: absolute;, otherwise the z-index won't work. Also, set background-color: white; so that the line of the table isn't visible in the background of the icon (try to remove the background-color to see what I'm talking about).
table {
text-align: left;
position: relative;
border-collapse: collapse;
border: 1px solid black;
}
th,
td {
border: 1px solid black;
padding: 1rem !important;
}
tr.red th {
background: #FFF;
}
th {
padding: 50px;
background: white;
position: sticky;
top: 111px;
height: 250px;
/* Don't forget this, required for the stickiness */
}
.fa-info-circle {
position: absolute;
background-color: white;
font-size: 20px;
margin-top: -7%;
margin-left: -24%;
z-index: 100;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<script src='https://use.fontawesome.com/releases/v5.15.3/js/all.js' data-auto-replace-svg='nest'></script>
</head>
<body>
<table style='margin-top: 150px; margin-left: auto; margin-right: auto;'>
<thead>
<tr class='red'>
<th> <i class='fas fa-info-circle'></i> </th>
<th>
<div>
Free
</div>
<div>
0 / month
</div>
<a href='#' class='pricing-plans__cta button button--primary'>Sub</a>
</th>
<th>
<div>
Premium
</div>
<div>
99,99€ / month
</div>
<a href='#' class='pricing-plans__cta button button--primary'>Sub</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style='display: flex; align-items: center; width: 100%;'>
<span>
<div style='display: inline-block; width: 22px; height: 22px; margin-left: -11px;'>
<button style='width: 22px; height: 22px; display: block; background: transparent;' aria-label='More info'></button>
</div>
</span>
<span style='margin-left: 15px; display: flex;'>Storage</span>
</div>
</td>
<td>2 Go</td>
<td>15 To</td>
</tr>
</tbody>
</table>
</body>
</html>
You can simply do that by setting the position attribute of the button to absolute and then use it to position according to its ancestor
Here is an MDN Link to know more about this
Add this CSS code to your file and it will work
button{
position: absolute;
left: -12px;
}
I added <span class="information">i</span> into your 1st td and then added the CSS as below:
/* ADDED */
td::first-child{
position:relative;
}
.information{
position:absolute;
left: -12px;
width: 20px;
height: 20px;
border:1px solid black;
border-radius: 100%;
text-align: center;
background: white;
}
DEMO
table {
text-align: left;
position: relative;
border-collapse: collapse;
border: 1px solid black;
}
th, td {
border: 1px solid black;
padding: 1rem !important
}
tr.red th {
background: #FFF;
}
th {
padding: 50px;
background: white;
position: sticky;
top: 111px; /* Don't forget this, required for the stickiness */
}
/* ADDED */
td::first-child{
position:relative;
}
.information{
position:absolute;
left: -12px;
width: 20px;
height: 20px;
border:1px solid black;
border-radius: 100%;
text-align: center;
background: white;
}
<table style="margin-top: 150px; margin-left: auto; margin-right: auto;">
<thead>
<tr class="red">
<th></th>
<th>
<div>
Free
</div>
<div>
0 / month
</div>
Sub
</th>
<th>
<div>
Premium
</div>
<div>
99,99€ / month
</div>
Sub
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="information">i</span>
<div style="display: flex; align-items: center; width: 100%;">
<span>
<div style="display: inline-block; width: 22px; height: 22px; margin-left: -11px;">
<button style="width: 22px; height: 22px; display: block; background: transparent;" aria-label="More info"></button>
</div>
</span>
<span style="margin-left: 15px; display: flex;">Storage</span>
</div>
</td>
<td>2 Go</td>
<td>15 To</td>
</tr>
</tbody>
</table>
This will work for u
* {
margin: 0px;
padding: 0px;
}
td {
position: relative;
padding: 40px;
border: 1px solid;
margin: 0px;
font-family: 'arial';
}
td a {
font-family: initial;
position: absolute;
font-size: 22px;
font-style: italic;
text-decoration: none;
left: -5%;
top: 38%;
height: 25px;
width: 25px;
text-align: center;
border-radius: 50%;
color: black;
background-color: white;
border: 1px solid;
}
table {
margin: 50px;
border-collapse: collapse;
}
<table>
<tr>
<td>i Espace de stockage</td>
<td>2 Go</td>
<td>2 To (2000 go)</td>
</tr>
<tr>
<td>i Espace de stockage</td>
<td>2 Go</td>
<td>2 To (2000 go)</td>
</tr>
<tr>
<td>i Espace de stockage</td>
<td>2 Go</td>
<td>2 To (2000 go)</td>
</tr>
</table>
Is it possible to align the following div's to be always on same position width and height on any webpage? I have try anything but I cannot manage to get it working. Something is not compatible in my code.
.content-box-gray .content {
overflow: hidden;
padding: 10px;
font-size: 15px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid gray;
color: #3385FF;
}
.content-box-gray .title {
height: 30px;
line-height: 30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: gray;
font-size: 18px;
font-weight: bold;
font-family: verdana;
display: block;
color: white;
display: block;
padding: 10px;
border: 1px solid gray;
border-bottom: none;
}
<table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td colspan="2" rowspan="3">
<div class="content-box-orange">
<div class="titleorange">3</div>
<div class="content">Lorem Ipsum is simply dummy text</div>
</div>
</td>
</tr>
<tr style="height:100% ">
<td style="background-color: aqua;height: 50%">1</td>
</tr>
<tr>
<td style="background-color: aqua;height: 50%">2</td>
</tr>
<tr>
<td colspan="3" style="background-color: #FFF">4</td>
</tr>
<tr>
<td style="background-color: #FFF">5</td>
<td colspan="2" rowspan="2">
<div class="content-box-gray">
<div class="title">7</div>
<div class="content">Lorem Ipsum</div>
</div>
</td>
</tr>
<tr>
<td style="background-color: #FFF">6</td>
</tr>
</tbody>
</table>
jsfiddle
I cannot manage to fix it.
here is a pic alignment of divs
thank you very much!
Give the td a height of 100%. Then use the calc property to set the height of .content-box-orange .content
fiddle
I think that you could explore flexbox instead of table for this layout. Update your question if you are open to that...
html,
body {
height: 98%;
background-color: #E5E5E3
}
table tbody tr td {
height: 100%;
}
.content-box-gray .content {
overflow: hidden;
padding: 10px;
font-size: 15px;
border: 0px;
color: #3385FF;
background: #FFFFFF;
}
.content-box-gray .title {
height: 30px;
line-height: 30px;
background: #F1F1F1;
font-size: 18px;
font-weight: bold;
font-family: verdana;
display: block;
color: #464648;
display: block;
padding: 10px;
border: 0px;
border-bottom: none;
}
.content-box-orange {
height: 100%;
}
.content-box-orange .content {
overflow: hidden;
padding: 10px;
font-size: 15px;
border: 0px;
color: #000;
background: #FFFFFF;
height: calc(100% - 66px);
}
.titleorange {
height: 30px;
line-height: 30px;
background: #F78D27;
font-size: 18px;
font-weight: bold;
font-family: verdana;
display: block;
color: #FFF;
display: block;
padding: 10px;
border: 0px;
border-bottom: none;
}
<table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td colspan="2" rowspan="3">
<div class="content-box-orange">
<div class="titleorange">3</div>
<div class="content">Lorem Ipsum is simply dummy text</div>
</div>
</td>
</tr>
<tr style="height:100% ">
<td style="background-color: aqua;height: 50%">1</td>
</tr>
<tr>
<td style="background-color: aqua;height: 50%">2</td>
</tr>
<tr>
<td colspan="3" style="background-color: #FFF">4</td>
</tr>
<tr>
<td style="background-color: #FFF">5</td>
<td colspan="2" rowspan="2">
<div class="content-box-gray">
<div class="title">7</div>
<div class="content">Lorem Ipsum</div>
</div>
</td>
</tr>
<tr>
<td style="background-color: #FFF">6</td>
</tr>
</tbody>
</table>
Using Flexbox
Here is a rough guide to achieving the layout in your image using flexbox. Refer to caniuse for browser compatibility information. You can toggle properties in Chrome Dev tools to get an idea of how flexbox properties work if it's new to you.
fiddle
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
height: 100%;
}
body {
background: #FFF;
font-family: sans-serif;
height: 100%;
margin: 0;
padding: 5px;
}
.box,
.main {
border: 5px solid #43c2eb;
}
.title--orange {
background: orange;
text-align: center;
padding: .4em;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.row {
display: flex;
min-height: 200px;
flex: 1 1 auto;
}
.box-wrap {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.box {
margin: 5px;
display: flex;
flex-direction: column;
}
.box--big {
flex: 2 1 auto;
}
.box--small {
flex: 1 1 auto;
}
.main {
align-items: center;
justify-content: center;
margin: 5px;
}
.content {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
}
<div class="wrapper">
<div class="row upper">
<div class="box box--big">
<h1 class="title--orange">div header</h1>
<div class="content">
content
</div>
</div>
<div class="box-wrap">
<div class="box box--small">
<div class="content">content</div>
<h2 class="title--orange">div header</h2>
</div>
<div class="box box--small">
<div class="content">content</div>
<h2 class="title--orange">div header</h2>
</div>
</div>
</div>
<div class="row main">
<div class="main__inner">content</div>
</div>
<div class="row lower">
<div class="box-wrap">
<div class="box box--small">
<div class="content">content</div>
</div>
<div class="box box--small">
<div class="content">content</div>
</div>
</div>
<div class="box box--big">
<h1 class="title--orange">div header</h1>
<div class="content">
content
</div>
</div>
</div>
</div>
Remove style attributes and width,height attributes on your HTML code, no need it if you use CSS.
Also dont use % on Width y if you want a static table.
<table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
<tr style="height:100% ">
<td style="background-color: aqua;height: 50%">1</td>
Give style="height:100%;overflow:hidden;" to outer div and style="height:100%;" to content & td
html,
body {
height: 98%;
background-color: #E5E5E3
}
.content-box-gray .content {
overflow: hidden;
padding: 10px;
font-size: 15px;
border: 0px;
color: #3385FF;
background: #FFFFFF;
}
.content-box-gray .title {
height: 30px;
line-height: 30px;
background: #F1F1F1;
font-size: 18px;
font-weight: bold;
font-family: verdana;
display: block;
color: #464648;
display: block;
padding: 10px;
border: 0px;
border-bottom: none;
}
.content-box-orange .content {
overflow: hidden;
padding: 10px;
font-size: 15px;
border: 0px;
color: #000;
background: #FFFFFF;
}
.titleorange {
height: 30px;
line-height: 30px;
background: #F78D27;
font-size: 18px;
font-weight: bold;
font-family: verdana;
display: block;
color: #FFF;
display: block;
padding: 10px;
border: 0px;
border-bottom: none;
}
<table border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td colspan="2" rowspan="3" style="height:100%;">
<div class="content-box-orange" style="height:100%;overflow:hidden;">
<div class="titleorange">3</div>
<div class="content" style="height:100%;">Lorem Ipsum is simply dummy text</div>
</div>
</td>
</tr>
<tr>
<td style="background-color: aqua;height: 50px">1</td>
</tr>
<tr>
<td style="background-color: aqua;height: 50px">2</td>
</tr>
<tr>
<td colspan="3" style="background-color: #FFF">4</td>
</tr>
<tr>
<td style="background-color: #FFF">5</td>
<td colspan="2" rowspan="2" style="height:100%;">
<div class="content-box-gray" style="height:100%;overflow:hidden;">
<div class="title">7</div>
<div class="content" style="height:100%;">Lorem Ipsum</div>
</div>
</td>
</tr>
<tr>
<td style="background-color: #FFF">6</td>
</tr>
</tbody>
</table>
I'm sure that there is a very basic way to fix my problem. Unfortunately, I'm really inexperienced in front-end development, but I have to fix my problem. Briefly, there are some dynamic border boxes in my table but it should be some spaces between every border box.
Now it looks like below image
However, it should be like below image
My code is below. How can I do this with changing the CSS?
.bg {
width: 100%;
padding-left: 2px;
padding-right: 2px;
}
.chart {
border: solid 1px #e31515;
color: #e31515;
width: 100%;
position: absolute;
overflow: hidden;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<span style="overflow: hidden;left: 550px; height: 150px; width: 250px; position: absolute; "> <div >
<table cellpadding="2" border="1">
<tbody>
<tr>
<td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent">
<div class="bg" style="height: 129px">
<div class="chart" style="height: 14px; margin-top: 115px"></div>
</div>
</td>
<td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent">
<div class="bg" style="height: 129px">
<div class="chart" style=" height: 14px; margin-top: 115px"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</span>
<span style="overflow: hidden;left: 150px; height: 150px; width: 250px; position: absolute; ">
<div >
<table cellpadding="2" border="1">
<tbody>
<tr>
<td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" >
<div class="bg" style="height: 129px">
<div class="chart" style="height: 14px; margin-top: 115px"></div>
</div>
</td>
<td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" >
<div class="bg" style="height: 129px">
<div class="chart" style="height: 14px; margin-top: 115px"></div>
</div>
</td>
<td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" >
<div class="bg" style="height: 129px">
<div class="chart" style="height: 14px; margin-top: 115px"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</span>
You are using padding. Instead, you need to use margin property. In box model, the padding is used for aligning the inside contents of a box. However, since you are applying the style to the , you need to mention margin-right property of each . Simply replace padding with margin property in bg style.
.bg {
width: 100%;
margin-left: 2px;
margin-right: 2px;
}
Hope this helps. If you find this solution correct, mark it as the answer.
CSS border-spacing property does what you need.
table{
border-collapse: separate;
border-spacing: 10px;
}
Example here: http://www.w3schools.com/csSref/tryit.asp?filename=trycss_table_border-spacing
I have an issue with HTML/CSS rendering in Outlook 2010.
The below HTML renders correctly in all other email clients I have tested (Thunderbird, Outlook 2003, iPhone, various webmail based products), and in various browsers too. But in Outlook 2010 I get a border around the table caption that is the same colour as the background for the tag below it.
<!DOCTYPE html>
<html>
<body>
<div style="padding: 0.3em">
<p>Here is a nice background from St Pancras Station with the Olympic Rings in the background</p>
<hr />
<table style=" width: auto; color: #000; border: 1px solid #000; border-collapse: collapse; background: #FFF;">
<caption style=" font-style: italic; text-align: left; color: #000; background: #FFF;">Files attached to this message</caption>
<tr>
<th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Filename</th>
<th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Size</th>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 0.3em; text-align: left; vertical-align: top; width: 75%;">6315755363_7fbe95fc66_o.jpg</td>
<td style="border: 1px solid #000; padding: 0.3em; text-align: left; vertical-align: top; width: 25%;">5 MB</td>
</tr>
</table>
<p>Please click here to download the attachments.</p>
<p>The attachments are available until: <b>Tuesday, 11 December.</b></p>
<hr />
</div>
</body>
</html>
Can anyone suggest a fix for this issue?
EDIT
If you want to debug this you can save the HTML in a file and load it into Word 2010 as it uses the same rendering engine.
Try adding phantom row after <caption>
<caption style=" font-style: italic; text-align: left; color: #000; background: #FFF;">Files attached to this message</caption>
<tr style="background:#FFF; display:none;"></tr> <!--phantom row-->
<tr>
<th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Filename</th>
<th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Size</th>
</tr>
<!DOCTYPE html>
<html>
<body>
<div style="padding: 0.3em">
<p>Here is a nice background from St Pancras Station with the Olympic Rings in the background</p>
<hr />
<table style=" width: auto; color: #000; border-collapse: collapse;">
<tr>
<td style="border: 1px solid #fff; border-bottom-color: #000; background: #fff; text-align: left; vertical-align: top;">
<caption style=" font-style: italic; text-align: left; color: #000;">Files attached to this message</caption>
</td>
</tr>
<tr>
<th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Filename</th>
<th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Size</th>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 0.3em; text-align: left; vertical-align: top; width: 75%;background: #FFF;">6315755363_7fbe95fc66_o.jpg</td>
<td style="border: 1px solid #000; padding: 0.3em; text-align: left; vertical-align: top; width: 25%;background: #FFF;">5 MB</td>
</tr>
</table>
<p>Please click here to download the attachments.</p>
<p>The attachments are available until: <b>Tuesday, 11 December.</b></p>
<hr />
</div>
</body>
</html>