I am trying to apply my custom css in email template.
I already done these things.
Add inline css to my html
<table align="center" style="width:600px; background:#FFF; border:1px solid #CCC; padding:0; margin-top:0; border-collapse:collapse;">
include inline css file and add path of these css in admin->system->configuration->design {{inlinecss file="email-inline.css"}}
{{inlinecss file="email-non-inline.css"}}
I checked that they are including or not ny editing body background color to black
but no success yet.
I am editing newsletter subscription email template.
I got success in adding style tag by adding {{var non_inline_styles}} to my html file .but not able to write my css into style tag. how can I write my own css in this tag.
So can anyone tell me how can I style my email template
I tried this too
http://devdocs.magento.com/guides/m1x/ce19-ee114/RWD_responsive_emails.html#email-css
here is my template file code
<!--#subject Newsletter subscription success #-->
{{template config_path="design/email/header"}}
{{var non_inline_styles}}
{{inlinecss file="email-inline.css"}}
{{inlinecss file="email-non-inline.css"}}
<div class="newsletter-confirmation">
<table align="center" style="width:600px; background:#FFF; border:1px solid #CCC; padding:0; margin-top:0; border-collapse:collapse;">
<!--Header -->
<tr>
<td style="padding:18px; margin:0; height:40px\9;">
<p style="float:right; margin:0; padding:0; width:200px;">
<img src="{{skin url='images/hot_line.jpg'}}" style="text-align:right; vertical-align:bottom; float:right; clear:both; margin-top:21px;">
</p>
</td>
</tr>
<tr><td style="height:1px; border-bottom:1px solid #000; width:100%; margin:0; padding:0; line-height:0;"> </td></tr>
<!-- / Header -->
<!--Mid -->
<tr>
<td>
<table align="center" style="width:564px; background:#FFF; padding:18px; margin-top:0; border-collapse:collapse; margin-top:10px;">
<tr>
<td>
<p style="color:#000; font:12px/20px Arial, Helvetica, sans-serif; padding:0; margin:0;">Greetings from ...!<br>
You have been successfully subscribed to the newsletter.</p>
</td>
</tr>
<tr><td height="18"></td></tr>
<tr>
<td>
<table align="center" style="width:564px; margin:0; padding:0; border-collapse:collapse;">
<tr>
<td><a href="#" target="_blank" style="margin:0; padding:0 10px 0 0; border:none; outline:none;">
<img src="{{skin url='images/free-shipping.jpg'}}" style="text-align:left; vertical-align:bottom; border:none; outline:none; margin:0; padding:0;"></a>
</td>
<td rowspan="2"><a href="#" target="_blank" style="margin:0; padding:0; border:none; outline:none;">
<img src="{{skin url='images/return-exchange.jpg'}}" style="text-align:left; vertical-align:bottom; border:none; outline:none; margin:0; padding:0 0 0 10px;"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<p style="color:#000; font:12px/20px Arial, Helvetica, sans-serif; padding:0; margin:12px 0;">Thank you<br><strong>Team ...</strong></p>
</td>
</tr>
</table>
</td>
</tr>
<!--Mid -->
<!--Footer -->
<tr>
<td style="width:582px; padding-left:18px; background:#efefef;" >
<p style="color:#666666; font:11px/15px Arial, Helvetica, sans-serif; padding:0; margin:8px 0;">
....com All Rights Reserved.
</p>
</td>
</tr>
<!-- / Footer -->
</table>
</div>
{{template config_path="design/email/footer"}}
The styles should be written like below in your case
<!--#styles
.button {
color: white!important;
width: 19%;
padding: 8px;
border-radius: 5px;
}
.approve {
background: rgba(18, 171, 18, 0.72);
margin-right:5px;
}
.disapprove {
background: rgba(232, 73, 73, 0.91);
}
.actions {
display: inline-block;
margin-top: 32px;
}
#-->
Related
I'm currently working on a project in which I've to create an invoice using domPDF. I found a template on github for nice invoice.
Now whenever I create a PDF it breaks every table row in new page and create a 5-6 pages PDF.
I've tried tweaking css of this template but no luck.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A simple, clean, and responsive HTML invoice template</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL **/
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img src="https://www.sparksuite.com/images/logo.png" style="width:100%; max-width:300px;">
</td>
<td>
Invoice #: 123<br>
Created: January 1, 2015<br>
Due: February 1, 2015
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
Sparksuite, Inc.<br>
12345 Sunny Road<br>
Sunnyville, CA 12345
</td>
<td>
Acme Corp.<br>
John Doe<br>
john#example.com
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>
Payment Method
</td>
<td>
Check #
</td>
</tr>
<tr class="details">
<td>
Check
</td>
<td>
1000
</td>
</tr>
<tr class="heading">
<td>
Item
</td>
<td>
Price
</td>
</tr>
<tr class="item">
<td>
Website design
</td>
<td>
$300.00
</td>
</tr>
<tr class="item">
<td>
Hosting (3 months)
</td>
<td>
$75.00
</td>
</tr>
<tr class="item last">
<td>
Domain name (1 year)
</td>
<td>
$10.00
</td>
</tr>
<tr class="total">
<td></td>
<td>
Total: $385.00
</td>
</tr>
</table>
</div>
</body>
</html>
I want PDF output to be like this.
I am trying to display client details as a pdf using dompdf from HTML. Also added a header and footer in the pdf. Some contents in the pdf are displayed under the footer section.
This is the Image of pdf generated, here the data under Other Details are displayed under the footer section. How can change the alignment of content into the next page with a header and footer?
This is the code have written, give a solution
<html>
<head>
<title>Prescription</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
padding: 0;
margin: 0;
font-family: "Times New Roman", Times, serif;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 200px;
padding: 10px 50px;
background-color: #ccc;
border-bottom: 1px solid #1f1f1f;
z-index: 1000;
}
.text-center {
text-align: center;
}
.phone {
float: right;
margin-bottom: 10px;
margin-right: 150px;
}
.phone h4 {
text-align: center;
right: 50px;
}
main {
margin-top: 200px;
padding: 10px 50px;
}
.after-header {
height: 30px;
padding: 10px 0;
}
.patient-id {
float: left;
}
.date-day {
float: right;
}
.page-header {
margin-top: 5px;
padding: 5px;
background-color: aqua;
}
.page-header h2 {
font-family: monospace;
font-size: 20px;
text-align: center;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
border-bottom: 1px solid #1f1f1f;
border-top: 1px solid #1f1f1f;
z-index: 1000;
}
footer h3 {
padding-left: 50px;
}
.details {
margin-top: 0;
padding: 2px 0;
}
table {
margin: 5px 0;
width: 100%;
border-top: 1px dotted #1f1f1f;
border-right: 1px dotted #1f1f1f;
}
td {
text-align: justify;
padding: 10px;
border-bottom: 1px dotted #1f1f1f;
border-left: 1px dotted #1f1f1f;
}
table tr>td:first-child {
border-left: none;
}
label {
font-weight: bold;
font-size: 15px;
}
</style>
</head>
<body>
<header>
<div class="text-center">
<h1>SPECIALITY CLINIC</h1>
<h2>xxxxxxxx</sub>
</h2>
<h3>Pediatrition</h3>
</div>
<div class="phone">
<h4>Phone: xxxxx</h4>
</div>
</header>
<footer>
<h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</h3>
</footer>
<main>
<div class="after-header">
<div class="patient-id">
<h3>Patient Id: 1001</h3>
</div>
<div class="date-day">
<h3>Date: 17/05/2019</h3>
</div>
</div>
<div class="page-header">
<h2>Patient Details</h2>
<hr>
</div>
<div class="details">
<div>
<div style="background-color: #f2f2f2; padding: 5px;">
<h3>General Details</h3>
</div>
</div>
<table>
<col width="10%">
<col width="20%">
<col width="10%">
<col width="10%">
<col width="30%">
<tr>
<td><label>Name:</label></td>
<td colspan="3"><label>Agreesh V S</label></td>
<td rowspan="4"><img src="img.jpg"></td>
</tr>
<tr>
<td><label>Age:</label></td>
<td><label>24</label></td>
<td><label>Gender: </label></td>
<td><label>Male</label></td>
</tr>
<tr>
<td><label>Phone: </label></td>
<td colspan="3"><label>9876543210</label></td>
</tr>
<tr>
<td><label>Email: </label></td>
<td colspan="3"><label>9876543210</label></td>
</tr>
</table>
<div>
<div style="background-color: #f2f2f2; padding: 5px;">
<h3>Personal Details</h3>
</div>
</div>
<table>
<col width="50%">
<col width="50%">
<tr>
<td><label>Date Of Birth:</label></td>
<td colspan="3"><label>18/04/1995</label></td>
</tr>
<tr>
<td><label>Weight</label></td>
<td><label>65 KG</label></td>
</tr>
<tr>
<td><label>Weight at Birth </label></td>
<td colspan="3"><label>2.5 KG</label></td>
</tr>
<tr>
<td><label>Blood Group </label></td>
<td colspan="3"><label>B+ve</label></td>
</tr>
</table>
<div>
<div style="background-color: #f2f2f2; padding: 5px;">
<h3>Other Details</h3>
</div>
</div>
<table>
<col width="50%">
<col width="50%">
<tr>
<td><label>Date Of Birth:</label></td>
<td colspan="3"><label>18/04/1995</label></td>
</tr>
<tr>
<td><label>Weight</label></td>
<td><label>65 KG</label></td>
</tr>
<tr>
<td><label>Weight at Birth </label></td>
<td colspan="3"><label>2.5 KG</label></td>
</tr>
<tr>
<td><label>Blood Group </label></td>
<td colspan="3"><label>B+ve</label></td>
</tr>
</table>
</div>
</main>
</body>
</html>
Keep in mind that when Dompdf positions content it is based on the bounds of the body. If you have a header/footer on the page you need to push it outside the bounds of the body or it will overlap the document content.
A small tweak to your CSS should fix things. First, add a page margin to accommodate your header. Something along the lines of:
#page {
margin: 220px 1in 1in 1in;
}
Then modify the top positioning of your header to push it into that space:
header {
position: fixed;
top: -200px;
left: 0;
right: 0;
height: 200px;
padding: 10px 50px;
background-color: #ccc;
border-bottom: 1px solid #1f1f1f;
z-index: 1000;
}
What's up guys!
I have a problem and I can not think of a solution.
I need to make a report using DOMPDF.
In this report, i need to print some employee information. In each page it is necessary to have header for the signature of the person in charge.
I have a group of employees. They are divided by departments.
I need a "break the page" loop when I change the employee's department or when I print 15 employees. After that, the loop should print the rest of the employees and execute the same rules if you change the employee's department again or have already been printed 15 employees.
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Relatório Geral</title>
<style>
body {
margin-top: -20px;
margin-left: -20px;
margin-right: -5px;
padding:0
}
.borda3 {
border:1px solid #999;
padding: 5px;
}
#borda2 td {
border: 1px solid #999;
border-collapse: collapse;
width: auto;
}
.centro {
text-align: center;
}
.tabela {
width: 100%;
}
span {
font-size: 100px;
}
td {
font-size: 11px;
}
html {
font-family: sans-serif;
}
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
text-align: center;
font-size: 9px;
}
#customers td {
text-align: left;
font-size: 10px;
}
#customers a {
font-size: 10px;
}
.nome{
width: 180px;
}
.matricula{
width: 15px;
}
.numeros{
width: 15px;
}
.logo{
padding-left: 50px;
}
.logo a strong{
font-size: 15px;
text-align: center;
}
.logo a{
font-size: 12px;
}
.assinatura{
font-size: 9px;
margin-left: 60px;
}
</style>
</head>
{{--beginning of the loop--}}
<body>
<table class="tabela borda3">
<tr>
<td width="40%" class="centro">
<table class="logo">
<tr>
<td>
<img style="margin-left:20px; margin-top: -20px;width:220px; height: 65px;" src="img/logo_sarh.jpg">
</td>
</tr>
<tr>
<td>
<label for=""><a><strong> </strong></a></label><br>
</td>
</tr>
<tr>
<td><a>Referência:</a></td>
</tr>
<tr>
<td><a>Período:</a></td>
</tr>
</table>
</td>
<td width="40%" class="centro">
<table class="assinatura">
<tr>
<td style="height: 30px; text-align: left"><label for="">Em: _____/ _____/___________</label></td>
</tr>
<tr>
<td style="padding-bottom: -20px; height: 50px; text-align: center">
<label for="">____________________________________________</label><br>
<label style="font-size: 10px" for=""> SUPERVISOR</label>
</td>
</tr>
<tr>
<td style="height: 30px; text-align: left"><label for="">VISTO</label></td>
</tr>
<tr>
<td style="padding-bottom: -10px; height: 50px; text-align: center">
<label for="">____________________________________________</label><br>
<label style="font-size: 10px" for=""> SECRETÁRIO(A)</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table id="customers">
<tr>
<th class="nome">Nome</th>
<th class="matricula">Matrícula</th>
<th class="numeros">Dias</th>
<th class="numeros">Faltas</th>
<th class="numeros">Vac</th>
<th class="numeros">LSV</th>
<th class="numeros">L M</th>
<th class="numeros">Aci. Trab</th>
<th class="numeros">Adi. Not</th>
<th class="numeros">H.E Normal D</th>
<th class="numeros">H.E Normal N</th>
<th class="numeros">H.E Dom/Fer. D</th>
<th class="numeros">H.E Dom/Fer. N</th>
<th class="numeros">Ins.</th>
</tr>
{{--beginning of the loop--}}
<tr>
<td style="height: 20px;"><a>Augusto Damasceno Pedrozo</a></td>
<td style="height: 20px;"><a>12345678</a></td>
<td style="height: 20px;"><a>30</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>20,02</a></td>
<td style="height: 20px;"><a>20,02</a></td>
<td style="height: 20px;"><a>20,02</a></td>
<td style="height: 20px;"><a>20,02</a></td>
<td style="height: 20px;"><a>20</a></td>
</tr>
<tr>
<td style="height: 20px;" colspan="14">Observação:</td>
</tr>
{{--end of the loop--}}
</table>
</body>
{{--end of the loop--}}
</html>
Could anyone give me some direction to solve this?
I think you want something like this:
#foreach($customers as $customer)
#while ($loop->index <= 15)
<!-- build table row here -->
#endwhile
<!-- page break -->
#endforeach
in laravel there is a loop variable
this variable tracks the current index and some other things
you can check if the current index is smaller or equal to 15, perform page break, grab next, check if department is same as before, repeat
for the department changes you can set a variable which holds the current department and compare it in the loop like:
#if($current_dep !== $cust->department)
<!-- page break -->
#endif
don't forget to check for last record
#while(!$loop->last)
#endwhile
further information on the $loop variable: https://laravel.com/docs/5.7/blade#the-loop-variable
I have made few pages where all the files where tested on screen resolution 1366x768. But when i tested it on 1024x768 the menu & images overlap. Is there some solution to this ?
Please Help!
This is my homepage.php
<?php session_start();?>
<html>
<head><title>Welcome</title></head>
<style>
#heading{ text-align:right;font-size: 18px;float:right;margin:35px 20px;}
a:hover{ color:#BEBEBC; }
a{ color:black;}
#img{margin:10px 10px;}
.box {margin-left: auto;margin-right: auto;}
.wrapper {display: table-cell;vertical-align: middle;width: 2500px;height:450px;}
#rectangle {width: 300;height: 200;border-style: solid black;border-radius:5px;border-width:10px;border-color:black;}
img{opacity: 0.5;filter: alpha(opacity=40); /* For IE8 and earlier */}
img:hover {opacity: 1.0;filter: alpha(opacity=100); /* For IE8 and earlier */}
#copyright{text-align:center;color:black;}
ul{
padding: 0;
list-style: none;
}
ul li{
width: 100px;
display: inline-block;
position: relative;
text-align: center;
line-height: 21px;
}
li{
width: 100px;
display: inline-block;
position: relative;
text-align: center;
line-height: 21px;
//background: #1E90FF;
color:black;
}
ul li a{
display: block;
//padding: 5px 10px;
color: black;
//background: #B0D8FF;
text-decoration: none;
}
ul li a:hover{
color: white;
//background: #939393;
}
ul li ul{
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
</style>
<body background="a6.jpg">
<img id="img" src="LOGO.jpg" width="150px" height="100px">
<h1 align="center" style="position:absolute;top:30px; left:400px;">MEETING ROOM APPLICATION</h1>
<div id="heading"><ul>
<li>Home</li>
<li><?php echo ucwords($_SESSION['usr_name']); ?> ▾
<ul>
<li>Change Password</li>
<li>Logout</li>
</ul>
</li>
<li>Help</li>
</ul></div>
<br><br>
<hr width="100%">
<table border="1" width="100%" style="border:black;">
<tr><th align="center" colspan="8" style="border-radius: 5px;border-style: solid;">No. of Booking for Present Day</th></tr>
<tr><td align="center" style="border-radius: 5px;border-style: solid;">3-Seater</td><td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td>
<td style="border-radius: 5px;border-style: solid;" align="center">5-Seater</td><td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td>
<td style="border-radius: 5px;border-style: solid;" align="center" align="center">8-Seater</td>
<td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td>
<td style="border-radius: 5px;border-style: solid;" align="center">16-Seater</td>
<td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td> </tr>
</table>
<div class="wrapper">
<table class="box">
<tr>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" style="border: 10px solid white;border-radius:10px;"><h2 align="center">3-Seater</h2><p align="center">This is a 3-Seater room.</font></p></td>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" alt="5-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">5-Seater</h2><p align="center">This is a 5-Seater room.</font></p></td>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" alt="8-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">8-Seater</h2><p align="center"><This is a 8-Seater room.</font></p></td>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" alt="16-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">16-Seater</h2><p align="center">This is a 16-Seater room.</font></p></td>
</tr>
</table>
</div>
</body>
</html>
With the code provided above you will find that the rendering of the site will differ dependent on the screen size. For example when using an iPad or iPhone you will have issues having to scroll round the page.
The only way to counter this is to use responsive design which effectively uses percetages to calculate the desired width.
For example we have two elements on a page side by side, rather than say each element is 500px wide (as this would require scrolling on a screen smaller than 1000px, we can say that each element has a width of 50%, this way regardless of the screen size, the elements sizes according to the device.
Responsive design is really the way forward and you will not be able to solve your issue without following this path. Responsive design is becoming the standard more and more and you may as well learn sooner rather than later or risk being left in the dust.
I would suggest reading the following and should you still struggle, create a new question targeted towards responsive design.
http://blog.froont.com/9-basic-principles-of-responsive-web-design/
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
You may also find that integrating a pre-existing responsive template may be the quickest solution, see the following:
http://www.responsivegridsystem.com/
http://getbootstrap.com/css/
Hope this helps.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I would like to the links will be bold in a div, but the links are in a variable which wrote down with echo.
<tr>
<td rowspan="1" colspan="4" style="vertical-align: top; width: 310px;" align="center">
<div class="description">
<b>Short description: </b></td>
</tr>
<tr>
<td rowspan="1" colspan="4" style="vertical-align: top; height: 100px; width: 310px;" class="style2">
<br>
<?php print ($_SESSION['description']); ?><br>
<br>
<hr>
</div>
</td>
</tr>
The link is in the $_SESSION['description'].
The css:
.description a:link {
text-decoration: bold;
}
.description a:visited {
text-decoration: bold;
}
.description a:hover {
text-decoration: bold;
}
.description a:active {
text-decoration: bold;
}
I already tried some ways, but the style "can't see" the links which wrote with echo. How can I solve this?
<div class="description">
<b>Short description: </b></td> </tr> <tr> ....
is no valid html!
FIX IT TO
<tr>
<td rowspan="1" colspan="4" style="vertical-align: top; width: 310px;" align="center">
<b>Short description: </b></td>
</tr>
<tr>
<td rowspan="1" colspan="4" style="vertical-align: top; height: 100px; width: 310px;" class="style2">
<div class="description">
<br>
<?php print ($_SESSION['description']); ?><br>
<br>
<hr>
</div>
</td>
</tr>
Replace all
text-decoration: bold;
with
font-weight:bold
UPDATE
A downvote, seriously? He is putting the link in description class, which only needs to be fixed
Now style can see (after replace as I said)
<html>
<head>
<style>
.description a:link {
font-weight: bold
}
.description a:visited {
font-weight: bold
}
.description a:hover {
font-weight: bold
}
.description a:active {
font-weight: bold
}
</style>
</head>
<body>
<tr>
<td rowspan="1" colspan="4" style="vertical-align: top; width: 310px;" align="center">
<div class="description">
<b>Short description: </b>
</td>
</tr>
<tr>
<td rowspan="1" colspan="4" style="vertical-align: top; height: 100px; width: 310px;" class="style2">
<br>
google
<br>
<hr>
</div>
</td>
</tr>
</body>
</head>
and what he was doing
<html>
<head>
<style>
.description a:link {
text-decoration: bold;
}
.description a:visited {
text-decoration: bold;
}
.description a:hover {
text-decoration: bold;
}
.description a:active {
text-decoration: bold;
}
</style>
</head>
<body>
<tr>
<td rowspan="1" colspan="4" style="vertical-align: top; width: 310px;" align="center">
<div class="description">
<b>Short description: </b></td>
</tr>
<tr>
<td rowspan="1" colspan="4" style="vertical-align: top; height: 100px; width: 310px;" class="style2">
<br>
google
<br>
<hr>
</div>
</td>
</tr>
</body></head>
PLEASE CHECK BEFORE DOWNVOTING
<a><?php echo $_SESSION['description']; ?></a>
Now it become a link, and you can put style like
a:link{}