Cant get border to extend HTML Outlook - html

I am trying to create a certificate in an html email. I cannot get the border to extend to the right alignment. Below is my code and an image of it. I know that html in outlook doesnt behave the same way but I do want instructor and manager on the same line inside the border. Float doesnt work and I could not get the margins to work.
CSS Code
<pre>
<style>
.cert {
border: 15px solid #0072c6;
border-right: 15px solid #0894fb;
border-left: 15px solid #0894fb;
width: 700px;
font-family: arial;
color: #383737;
overflow: visible;
}
.crt_title {
margin-top: 30px;
font-family: "Satisfy", cursive;
font-size: 40px;
letter-spacing: 1px;
color: #0060a9;
}
.crt_logo img {
width: 130px;
height: auto;
margin: auto;
padding: 30px;
}
.colorGreen {
color: #27ae60;
}
.crt_user {
display: inline-block;
width: 20%;
padding: 5px 25px;
margin-bottom: 0px;
padding-bottom: 0px;
font-family: "Satisfy", cursive;
font-size: 40px;
border-bottom: 1px dashed #cecece;
}
.signature{
font-family: 'Brush Script MT', cursive;
font-size: 40px;
letter-spacing: 3px;
text-decoration: underline;
}
.normal{
font-family: 'Arial';
font-size: 40px;
letter-spacing: 3px;
}
.afterName {
font-weight: 100;
color: #383737;
}
.colorGrey {
color: grey;
}
.certSign {
width: 200px;
}
#media (max-width: 700px) {
.cert {
width: 100%;
}
.tableClass {
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 20px 0px !important;
}
</style>
</pre>
HTML Code
<table al[![enter image description here][1]][1]ign="center" width="600" border="0" cellpadding="0" cellspacing="0" class="cert">
<tr>
<td width="70%" align="center" class="crt_logo">
<img src="logo path"width="200" height="121" alt="logo">
</td>
</tr>
<tr>
<td width="70%" align="center">
<h1 class="crt_title">Certificate Of Completion
<h2>This Certificate is awarded to</h2>
<h1 class="colorGreen crt_user">Name</h1>
<h3 class="afterName">For completion in Class
</h3>
<h3>Awarded on Date taken</h3></td>
</tr>
<tr>
<td align="left" valign ="middle" style="font-family: 'Brush Script MT', cursive;
font-size:30px; text-decoration: underline;display:inline:">Instructor </td>
<td width="10px" align="left" valign ="middle" style="font-family: 'Brush Script MT',
cursive; font-size:30px; text-decoration: underline;display:inline:">Manager</td>
</td>
</td>
</tr>
</table>

Related

How to center a navbar under a heading?

I have a problem laying out and centering the navbar and the table. I want the navbar to be right under the h2 element and centered. At the moment, the navbar breaks onto the next line. The layout of the table is fine, but it should be centered. I wonder if there is a better technique for making a navbar.
Here is my code:
* {
background-color: #2c2f33;
text-decoration: none;
}
.bet-table {
display: table-cell;
margin: 0;
color: white;
}
.bet-table th,
td {
border: 1px solid;
text-align: center;
padding: 5px 5px 5px;
}
.bet-table table {
margin-left: auto;
margin-right: auto;
}
.logo {
text-align: center;
font-size: 40px;
font-family: arial;
font-weight: lighter;
color: white;
}
.nav-g ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav-g li {
list-style: none;
display: inline-block;
}
.nav-g a {
text-decoration: none;
width: 100px;
display: block;
padding: 2px 2px 2px;
font-size: 15px;
font-weight: lighter;
text-align: center;
color: white;
font-family: arial;
float: left;
}
.Choose h3 {
color: white;
background-color: #7289da;
padding: 8px 8px 8px 8px;
border: 1px solid black;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
margin-top: 5pc;
}
.navbar a:hover {
color: #7289da;
}
<div id="h-container">
<h2 class="logo">Betbowl
<h2>
<div class="nav-g">
<ul>
<li><a href="#">Make-A-Bet</li>
<li><a href="#">Pending</li>
<li><a href="#">Completed</li>
</ul>
</div>
</div>
<div class="Choose">
<h3>Choose</h3>
</div>
<div class="bet-table">
<table style="width:100%; margin-left: auto; margin-right: auto;">
<tr>
<th>Situation</th>
<th>Bet</th>
<th>Winner</th>
<th>Earnings</th>
</tr>
<tr>
<td>blank</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
<td>blank</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
</tr>
</table>
</div>
</div>
First you need to close your <a> tags. like this:
I AM A LINK
ul needs to be centered:
text-align:center
for the table you should remove display property from the container, default value works fine:
.bet-table{
/* display: table-cell; REMOVE THIS LINE */
margin: 0;
color: white;
text-align: center;
width: 100%;
}
table{
margin: 0 auto
}
find the edited version here: https://codepen.io/theBehrouz/pen/QWmXZbr

Remove Space between nested tables

I am working on responsive newsletter using HTML, inline css as much as possible and some css also.
I am facing issue in design as i am not able to remove space between first Image and second table after image..
https://codepen.io/KGuide/full/oNXwyEW
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background: #fff;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
/* -ms-interpolation-mode:bicubic; */
}
a {
text-decoration: none;
}
.primary{
background: #f5564e;
}
.bg_white{
background: #ffffff;
}
.bg_light{
background: #fafafa;
}
.bg_black{
background: #000000;
}
.bg_dark{
background: rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
/*BUTTON*/
.btn{
padding: 5px 15px;
display: inline-block;
}
.btn.btn-primary{
border-radius: 5px;
background: #f5564e;
color: #ffffff;
}
.btn.btn-white{
border-radius: 5px;
background: #ffffff;
color: #000000;
}
.btn.btn-white-outline{
border-radius: 5px;
background: transparent;
border: 1px solid #fff;
color: #fff;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Nunito Sans', sans-serif;
color: #000000;
margin-top: 0;
}
body{
font-family: 'Nunito Sans', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.8;
color: rgba(0,0,0,.4);
}
a{
color: #f5564e;
}
table{
}
/*LOGO*/
.logo h1{
margin: 0;
}
.logo h1 a{
color: #000;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
font-family: 'Nunito Sans', sans-serif;
}
.navigation{
padding: 0;
}
.navigation li{
list-style: none;
display: inline-block;;
margin-left: 5px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.navigation li a{
color: rgba(0,0,0,.6);
}
/*HERO*/
.hero{
position: relative;
z-index: 0;
}
.hero .overlay{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
width: 100%;
background: #000000;
z-index: -1;
opacity: .3;
}
.hero .icon{
}
.hero .icon a{
display: block;
width: 60px;
margin: 0 auto;
}
.hero .text{
color: rgba(255,255,255,.8);
padding: 0 4em;
}
.hero .text h2{
color: #ffffff;
font-size: 40px;
margin-bottom: 0;
line-height: 1.2;
font-weight: 900;
}
/*HEADING SECTION*/
.heading-section{
}
.heading-section h2{
color: #000000;
font-size: 24px;
margin-top: 0;
line-height: 1.4;
font-weight: 700;
}
.heading-section .subheading{
margin-bottom: 20px !important;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(0,0,0,.4);
position: relative;
}
.heading-section .subheading::after{
position: absolute;
left: 0;
right: 0;
bottom: -10px;
content: '';
width: 100%;
height: 2px;
background: #f5564e;
margin: 0 auto;
}
.heading-section-white{
color: rgba(255,255,255,.8);
}
.heading-section-white h2{
font-family:
line-height: 1;
padding-bottom: 0;
}
.heading-section-white h2{
color: #ffffff;
}
.heading-section-white .subheading{
margin-bottom: 0;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,.4);
}
.icon{
text-align: center;
}
.icon img{
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
</head>
<style>
</style>
<body>
<table style="width:100%; text-align:center;">
<tr>
<td style="width:100%; text-align:center; border-spacing: 0px;" >
<table align="center" style="width:100%; max-width:600px;">
<tr>
<td ><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>
</tr>
<tr>
<td class="">
<table style="width:100%; background:#525252; max-width:600px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding:15px; background:#0A0A0A;"> Move-in now to your dream home in City Center Plaza
</td>
</tr>
<tr>
<td align="center" style="padding:15px; background:#0A0A0A;"> BUTTON </td>
</tr>
<tr>
<td style="padding:15px; background:#0A0A0A;">TEXT TEXT TEXT TEXT TEXT</td>
</tr>
<tr>
<td><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"> </td>
</tr>
<tr>
<td valign="top" align="center" style="padding:15px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Replace your code with this and see if this works:
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; border-collapse: collapse;">
<tr>
<td>
<img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="margin: 0; border: 0; padding: 0; display: block; width:100%; max-width: 600px;">
</td>
</tr>
Edit:
Here is 2 tutorials they helped me while creating HTML emails:
Build an HTML Email Template From Scratch
How to Code a Responsive Email from Scratch
As pointed out by the other user, some of that space is coming from the the font size.
What I recommend is using either:
line-height: 0;
or
font-size: 0;
To remove that, and then put all text inside spans to put the size back up.
You also need to remove the padding from your cells,
tr, td {
padding: 0;
}
Complete changes required:
tr, td {
padding: 0;
line-height: 0;
}
span {
line-height: 1;
}
Plus wrap all text in spans.
use "font-size: 0;"
and I think solve your problem
Example:-
<td style="font-size: 0;"><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>

How to align header to top of the page?

I'm new here and I was wondering: how do I align my header to the top of the page? Right now there is too much white space between the header and top of the page. Is there a way to 'valign' it to the top somehow? Any help is appreciated. Thank you. Attached is my html code as well as CSS.
#charset "UTF-8";
/* CSS Document */
body {
margin: 0;
padding-top: 0;
padding-left: 10px;
padding-right: 10px;
font-family: Helvetica, sans-serif;
color: #666;
}
h1 {
color: #333;
font-size: 32px;
line-height: 38px;
font-weight: 700;
text-align: center;
margin-bottom: 15px;
}
h2 {
color: #fff;
font-family: Minion Pro, Times New Roman, serif;
font-size: 42px;
font-weight: 700;
font-style: italic;
text-align: center;
padding-top: 25px;
margin-bottom: 15px;
}
h3 {
color: #333;
font-size: 26px;
font-weight: 700;
text-align: center;
}
h5 {
font-size: 18px;
font-weight: normal;
text-align: center;
margin-top: 0;
}
p,
ul {
font-size: 16px;
line-height: 23px;
font-weight: normal;
text-align: left;
}
.container {
padding-right: 15px;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 15px;
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.container2 {
padding-top: 10px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 10px;
background-color: #dce4ea;
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.container3 {
background-color: #375e97;
margin-right: auto;
margin-left: auto;
max-width: 850px;
top: 0;
}
.container4 {
padding-right: 15px;
padding-left: 15px;
padding-top: 25px;
padding-bottom: 15px;
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.subhead {
color: #fff;
font-family: Minion Pro, Times New Roman, serif;
font-size: 28px;
font-weight: normal;
font-style: italic;
text-align: center;
padding-bottom: 25px;
margin-top: 0px;
}
.title {
color: #fff;
padding: 5px;
font-size: 20px;
font-weight: 500;
text-align: center;
margin-top: 8px;
margin-bottom: 8px;
}
.cell {
font-size: 17px;
font-weight: normal;
text-align: center;
margin-bottom: 9px;
margin-top: 9px;
}
.refund {
font-size: 14px;
line-height: 22px;
font-weight: normal;
text-align: left;
}
.button {
transition: all 100ms ease-in;
/**doubtful in emails**/
background: #375e97;
border-radius: 8px;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
text-decoration: none;
display: block;
color: #ffffff;
text-align: center;
}
.button:hover {
transition: all 100ms ease-in;
/**doubtful in emails**/
background: #555;
border-radius: 8px;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
text-decoration: none;
display: block;
color: #ffffff;
text-align: center;
}
<html lang="en">
<head>
<title>Multifamily Texas – Early Bird Registration</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://interfaceconferencegroup.com/mftx18/images/MFTX.css">
</head>
<body>
<div class="container3">
<h2>ACT NOW and SAVE $80!</h2>
<p class="subhead">Early Bird Registration is $279 through August 17th</p>
</div>
<div class="container4">
<table align="center" width="600" border="1" bordercolor="#375e97" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#375e97" align="center" colspan="2">
<p class="title">Early Bird Registration Pricing</p>
</td>
</tr>
<tr>
<td width="50%">
<p class="cell">Single Attendee</p>
</td>
<td width="50%">
<p class="cell">$279</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee">
<p class="cell">Two Attendees</p>
</td>
<td width="50%" bgcolor="#d3daee">
<p class="cell">$568</p>
</td>
</tr>
<tr>
<td width="50%">
<p class="cell">Three Attendees</p>
</td>
<td width="50%">
<p class="cell">$857</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee">
<p class="cell">Four Attendees</p>
</td>
<td width="50%" bgcolor="#d3daee">
<p class="cell">$1146</p>
</td>
</tr>
<tr>
<td width="50%">
<p class="cell">Five Attendees</p>
</td>
<td width="50%">
<p class="cell">$1435</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee">
<p class="cell">Six Attendees</p>
</td>
<td width="50%" bgcolor="#d3daee">
<p class="cell">$1724</p>
</td>
</tr>
</table>
</div>
<div class="container">
<h3>Refund Policy</h3>
<p class="refund"><b>InterFace Conference Group/France Media, Inc. Cancellation Policy:</b> If you cancel your attendance 30 days or more before the conference, you will be issued a full refund. Within 30 days, you will be given a credit for the amount you paid. This
credit must be used within one year of the conference date to apply to another InterFace conference, for an equal or lesser amount.</p>
<p class="refund" align="center">InterFace Conference Group/France Media, Inc. Attendance & Substitution Policy and <a href="https://custom.cvent.com/7C0825B3546540A3BA33AF202D8A465F/files/4c106328c8e140e4b66ba30f4659af92.docx"
target="_blank">Privacy Policy</a></p>
</div>
</body>
</html>
It's because of the <h2>'s margin-top not being removed. Update this rule:
h2 {
color: #fff;
font-family: Minion Pro, Times New Roman, serif;
font-size: 42px;
font-weight: 700;
font-style: italic;
text-align: center;
padding-top: 25px;
margin-bottom: 15px;
margin-top: 0; /* This one */
}
Preview

Vertical align text in cell

Is it possible to align text in a cell?
In my example I want to align hours and city centrally like this:
PLUNKER
#presentation {
background-color: #dedede;
padding-top: 25px;
padding-left: 50px;
padding-right: 50px;
}
#offers h1 {
text-transform: uppercase;
color: #666666;
}
#offers h1 em {
color: #4598d1;
font-style: normal;
}
.offers {
padding: 25px 50px;
width: 50%;
margin: auto;
}
.offers button {
background-color: #dddddd;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #868686;
border: #868686;
border-style: solid;
border-width: 1px;
}
.offers .right {
float: right;
width: 100px;
}
.offers table {
background-color: #DEDEDE;
text-align: left;
float: left;
}
.offers .tittle {
font-size: 18px;
color: #666666;
font-family: 'Arial Normal', 'Arial';
text-transform: uppercase;
}
.offers th {
font-family: 'Arial Normal', 'Arial';
font-weight: 400;
font-size: 11px;
white-space: nowrap;
}
.offers table th .fistClass {
font-family: 'Arial Gras', 'Arial';
font-weight: 700;
font-style: normal;
font-size: 12px;
color: #669900;
text-align: center;
}
.offers table .td {
background-color: #ffffff;
}
.offers .departureTime {
color: #35A6F4;
font-size: 18px;
font-weight: bold;
}
.offers .arrivalTime {
color: #35A6F4;
font-size: 11px;
}
.offers .originStation {
font-family: 'Arial Gras', 'Arial';
font-weight: bold;
font-style: normal;
font-size: 11px;
}
.offers .destinationStation {
font-family: 'Arial Gras', 'Arial';
font-style: normal;
font-size: 11px;
}
.offers .duration {
font-size: 11px;
color: #666666;
}
.offers .priceFirstClass {
color: #7ABB00;
text-align: right;
font-family: 'Arial Gras', 'Arial';
font-weight: bold;
font-size: 20px;
}
.offers .minPrice {
}
.offers .lastPlaces {
}
.offers .unavailable {
font-size: 12px;
color: #E4E4E4;
text-align: center;
}
.offers .foo {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: auto;
}
.offers p.espacement_important {
margin: 5px 0;
}
.offers span{
padding-left: 15px;
}
<div id="presentation">
<section>
<div class="offers">
<table border="0">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td>
<div>
<p>
<span class="departureTime">03h00</span>
<span>New-York</span>
</p>
<p>
<span class="arrivalTime">15h00</span>
<span>Bahamas</span>
</p>
<p class="duration"><span >8h00</span>
<span>2 correspond.</span>
<span>A380</span>
</p>
</div>
</td>
<td class="unavailable">indisponible</td>
<td><input type="radio" />
<label >10.00 €</label>
</td>
<td>
<label >50.00 €</label>
</td>
</tr>
</table>
</div>
</section>
</div>
Try below code.
HTML
<div id="presentation">
<section>
<div class="offers">
<table class="locationtable" width="100%;" cellpadding="0">
<tr>
<td width="50%"><span class="departureTime">03h00</span></td>
<td width="50%"><span>New-York</span></td>
</tr>
<tr>
<td class="duration">8h00</td>
<td><span>Bahamas</span></td>
</tr>
</table>
</div>
</section>
CSS
.locationtable{
width: 200px;
margin: 0 auto;
background: #eee;
}
table td{
padding: 5px 10px;
vertical-align: middle;
text-align: center;
}
.departureTime,
.duration{
color: blue;
}
JSFIDDLE DEMO
What you want to do, is to force the text on a unique line.
I can think now of two solutions to proceed so.
The first one, would be to give to the cell that contains your text a minimum width that would always allow the text to display on one line, but, what if a new longer station name is created forward ?
The second solution is to force the text on one line with a css property call "white-space", and, in a table cell it will automatically resize the "td" to fit your text :
.offers td:first-child p{
white-space:nowrap;
}

HTML/CSS Table height ignored in Internet Explorer

I'm adding a new 'News Container' to a slightly older webpage at our firm.
This container is made up of a 2x3 table. I want the Cell 2x2 to be as High as the Text.
Here's the Problem:
Everybody uses IE in our offices (Security reasons etc.) but for some reason IE ignores the height attribute given either directly in HTML (style="height:;" or height="") or in a separate CSS.
So in Chrome it looks like this (how it should):
╔════════════════╗
╠══╦═════════════╣
║  ║Test String  ║
║  ╠═════════════╣
╚══╩═════════════╝
And in Internet Explorer like this:
╔════════════════╗
╠══╦═════════════╣
║  ║Test String  ║
║  ║ ║
║  ╠═════════════╣
╚══╩═════════════╝
Picture: http://imgur.com/a/jQXhQ
View it yourself (Open in both Chrome and IE) here.
How can I get IE to use the Height attribute or alternatively is there a different way?
IE Version: 11.0.9600.17358
Update: 11.0.13
Code:
<table id="NewsTable">
<tr>
<th id="NewsHeader" colspan="2">IT Status</th>
</tr>
<tr>
<td rowspan="2">
<img id="NewsAmpel" alt="NewsStatus" src="Ampel/AmpelA.jpg" width="36px" height="100px">
</td>
<td id="NewsStatus"><b>Status:    </b>Test String</td>
</tr>
<tr>
<td id="NewsDesc"><b>Description: </b>Sample Text</td>
</tr>
i have made some changes in html as well as CSS
Working Fiddle
http://jsfiddle.net/UzCRc/60/
HTML
<table id="NewsTable">
<tr>
<th id="NewsHeader" colspan="2">IT Status</th>
</tr>
<tr>
<td id="NewsAmpel">
<img alt="NewsStatus" src="Ampel/AmpelA.jpg" width="36px" height="100px">
</td>
<td id="NewsStatus"><b>Status:    </b>Test String</td>
<td id="NewsDesc"><b>Description: </b>Sample Text</td>
</tr>
</table>
CSS
#NewsAmpel{
width:36px;
}
body {
font-family: Verdana, sans-serif;
font-size: 13px;
}
h1 {
font-size: 15px;
font-weight: bold;
}
h2 {
font-size: 14px;
body {
font-family: Verdana, sans-serif;
font-size: 13px;
}
h1 {
font-size: 15px;
font-weight: bold;
}
h2 {
font-size: 14px;
font-weight: bold;
}
img {
border: 0;
}
a {
color: #00538E;
}
#content {
width: 100%;
float: left;
}
#center {
width: 600px;
height: auto;
margin: 0 auto;
}
font-weight: bold;
}
img {
border: 0;
}
a {
color: #00538E;
}
#content {
width: 100%;
float: left;
}
#center {
width: 600px;
height: auto;
margin: 0 auto;
}
#NewsTable {
border: 2px solid #000000;
background-color: #FFFFFF;
width: 100%;
}
#NewsStatus {
height: 20px;
padding:0;
border-bottom: 1px solid #000000;
width: 100%;
vertical-align: top;
display:block;
}
#NewsDesc {
height: 20px;
width: 100%;
margin:0;
padding:0;
display:block;
}
#NewsHeader {
text-align: center;
font-size: 14px;
font-weight: bold;
border: 1px solid #000000;
background-color: #FF1000;
}
Changes in html
Removed colspan
added image TD in same TR
Instead of image, ID has given to TD
CSS changes
#NewsStatus {
height: 20px;
padding:0;
border-bottom: 1px solid #000000;
width: 100%;//modified
vertical-align: top;
display:block;//added
}
#NewsDesc {
height: 20px; //added
width: 100%;//modified
margin:0;
padding:0;
display:block;//added
}
#NewsAmpel{
width:36px;
}