Whatever reason it is, when I try to send my mailings my css is not loaded correctly. My email background is gone and the email template looks stripped. I tried to use inline CSS but also that was no luck for me. I tried to upload my images to another host to see if that's the reason. But no luck after all.
I have converted my web template to mail template. But still no luck...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html style="margin: 0; padding: 0;">
<head></head>
<body style="background-image: url('http://s30.postimg.org/3zs80ks9t/image.jpg'); background-attachment: fixed; background-position: top; background-repeat: no-repeat; background-color: #5C5959; width: 100%; font-variant: normal; font-style: normal; padding: 0; font-weight: normal; font-size: 13px; margin: 0 auto; font-family: Tahoma, Arial, Helvetica, sans-serif; line-height: 1.8em; text-align: center; letter-spacing: 0.06em;" bgcolor="#5C5959">
<div style="width: 1000px; min-height: 1000px; text-align: center; color: #595959; background-attachment: fixed; background-repeat: no-repeat; margin: 0 auto; padding: 0;" align="center">
<div style="color: white; float: left; margin-left: 55px; margin-top: 40px;"><img src="http://haptotherapiemris.nl/images/logo.png" border="0"></div>
<div style="color: white;"><div style="color: white;"></div></div>
<div style="color: white; clear: both; height: 50px;"></div>
<div style="color: white; clear: both; text-align: center; width: 1000px; height: 38px; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red-up.png'); background-repeat: no-repeat; background-color: transparent; background-position: center top;" align="center"></div>
<div style="color: white; text-align: center; width: 1000px; margin-top: -2px9; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red.png'); background-repeat: repeat-y; background-color: transparent; background-position: center top;" align="center">
<div style="color: white; text-align: left; width: 760px; height: auto; background-color: transparent; margin: -15px 120px -8px;" align="left">
<h1 style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; line-height: 1.5em; font-size: 19px; font-weight: normal; color: #ffffff;">Titel</h1>
<br>content
</div>
</div>
<div style="color: white; text-align: right; width: 1000px; height: 74px; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red-down.png'); background-repeat: no-repeat; background-color: transparent; background-position: center top;" align="right"></div>
<div style="color: white;">
<a target="_blank" rel="nofollow" href="http://www.facebook.com/HaptotherapieMichaelRis" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-fb.png"></a> <a target="_blank" rel="nofollow" href="https://twitter.com/#!/Info_MichaelRis" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-twitter.png"></a> <a target="_blank" rel="nofollow" href="http://blog.haptotherapiemris.nl/" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-blog.png"></a>
</div>
<div style="color: white;"></div>
</div>
</body>
</html>
<html style="margin: 0; padding: 0;">
<head></head>
<body style="background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg.jpg'); background-attachment: fixed; background-position: top; background-repeat: no-repeat; background-color: #5C5959; width: 100%; font-variant: normal; font-style: normal; padding: 0; font-weight: normal; font-size: 13px; margin: 0 auto; font-family: Tahoma, Arial, Helvetica, sans-serif; line-height: 1.8em; text-align: center; letter-spacing: 0.06em;" bgcolor="#5C5959">
<style type="text/css">
h1 a:hover { color: #5e5e5e !important; text-decoration: none !important; }
.veolay-menu ul li.menuitem a:hover { color: #c20016 !important; text-decoration: none !important; background-color: #ffffff !important; height: 47px !important; }
.menusub ul li.menuitem a:hover { color: #c20016 !important; text-decoration: none !important; background-color: #ffffff !important; background: transparent url('http://nieuwsbrief.michaelris.nl/files/images/menubalksub-hover.png') repeat-x center top !important; }
.menusub ul li.menuitemactief a:hover { color: #c20016 !important; text-decoration: none !important; background-color: #ffffff !important; background: transparent url('http://nieuwsbrief.michaelris.nl/files/images/menubalksub-hover.png') repeat-x center top !important; }
></style>
<div style="width: 1000px; min-height: 1000px; text-align: center; color: #595959; background-attachment: fixed; background-repeat: no-repeat; margin: 0 auto; padding: 0;" align="center">
<div style="color: white; float: left; margin-left: 55px; margin-top: 40px;"><img src="http://haptotherapiemris.nl/images/logo.png" border="0"></div>
<div style="color: white;"><div style="color: white;"></div></div>
<div style="color: white; clear: both; height: 50px;"></div>
<div style="color: white; clear: both; text-align: center; width: 1000px; height: 38px; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red-up.png'); background-repeat: no-repeat; background-color: transparent; background-position: center top;" align="center"></div>
<div style="color: white; text-align: center; width: 1000px; margin-top: -2px\9; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red.png'); background-repeat: repeat-y; background-color: transparent; background-position: center top;" align="center">
<div style="color: white; text-align: left; width: 760px; height: auto; background-color: transparent; margin: -15px 120px -8px;" align="left">
<h1 style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; line-height: 1.5em; font-size: 19px; font-weight: normal; color: #ffffff;">Titel</h1>
<br>content
</div>
</div>
<div style="color: white; text-align: right; width: 1000px; height: 74px; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red-down.png'); background-repeat: no-repeat; background-color: transparent; background-position: center top;" align="right"></div>
<div style="color: white;">
<a target="_blank" rel="nofollow" href="http://www.facebook.com/HaptotherapieMichaelRis" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-fb.png"></a> <a target="_blank" rel="nofollow" href="https://twitter.com/#!/Info_MichaelRis" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-twitter.png"></a> <a target="_blank" rel="nofollow" href="http://blog.haptotherapiemris.nl/" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-blog.png"></a>
</div>
<div style="color: white;"></div>
</div>
</body>
</html>
Is it an HTML newsletter?
If so, then i'm sorry but divs are not very well supported and you will have to go back to using tables Unfortunately :(
You have also got two opening html tags - this should only be done once in the whole document
A lot of quirks html email has, check out the link to get you up to speed.
Here are a few of the issues:
For background images, there are only 2 techniques to that work in all major clients. The first technique only works in the entire email (body tag), the second uses VML to support Outlook.
For color declarations you have to use the 6-digit hex code ie color:#FFFFFF; not color:white;, as all other color codes/names are not fully supported.
float:left; isn't fully supported, you need to use align="left" in a <td> element instead.
As mentioned in other answers, you should avoid <div>, but also semantic tags like <h1> as they are not consistently rendered in all clients. Style text in a <td> or in <font> tags instead.
Your CSS selectors won't work also.
Related
I tried to add a verticle bar thats stuck to the top right off my screen but it dosent show up for some reason, i tried everything i could. here is my code.
css: used for the style of my site, just uhh regular old code expect that it show anything thats located at the bottom of my website expressed by the overflow hidden thing. Anyways inspect element tells me that my gradient bar is at the bottom of the site even though its not supposed to be. see last couple lines of the css code for the bar.
body {
margin: 0;
margin: 0;
background-color: #0c7bcb; /* change to desired color */
background-size: cover;
height: 1ch;
height: 150px;
overflow: hidden;
}
.bar {
padding-top: 0.5px;
font-size: small;
border-color: rgba(12, 123, 203, 0.5); /* half transparent #0c7bcb color */
font-family: Arial, Helvetica, sans-serif;
color: aliceblue;
border-style: solid;
background-color: #0c7bcb;
background-image: url("https://www.minecraft.net/etc.clientlibs/minecraft/clientlibs/main/resources/favicon.ico");
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px; /* adjust as needed to make room for the icon */
border-bottom-width: 0.5px;
border-top-width: 0.5px;
background-size: 20px 20px; /* adjust the size as needed */
}
.Texty {
}
#close-button {
padding-top: 1px;
color: aliceblue;
position: absolute;
top: 0;
right: 0;
padding: 10px;
cursor: pointer;
font-size: 24px;
}
.updates {
background-color: aliceblue;
border-color: aliceblue;
color: #2bab10;
position: absolute;
top: 135px;
right: 300px;
font-weight: bolder;
font-family: 'main';
width: 1000px;
overflow: auto;
max-height: 6in;
}
.back {
background-image: url("https://cdn.discordapp.com/attachments/694661573125472256/1070884589108744192/image.jpg");
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
}
#baro {
background-color: #78ac4c;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
}
#play-btn {
background-color: yellow;
color: black;
border-radius: 100px;
padding: 10px 20px;
cursor: pointer;
border: none;
}
#font-face {
font-family: main;
src: url(font.ttf);
}
.discord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.dickkord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0;
margin: 0;
background-color: #0c7bcb; /* change to desired color */
background-size: cover;
height: 1ch;
height: 150px;
overflow: hidden;
}
.bar {
padding-top: 0.5px;
font-size: small;
border-color: rgba(12, 123, 203, 0.5); /* half transparent #0c7bcb color */
font-family: Arial, Helvetica, sans-serif;
color: aliceblue;
border-style: solid;
background-color: #0c7bcb;
background-image: url("https://www.minecraft.net/etc.clientlibs/minecraft/clientlibs/main/resources/favicon.ico");
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px; /* adjust as needed to make room for the icon */
border-bottom-width: 0.5px;
border-top-width: 0.5px;
background-size: 20px 20px; /* adjust the size as needed */
}
.Texty {
}
#close-button {
padding-top: 1px;
color: aliceblue;
position: absolute;
top: 0;
right: 0;
padding: 10px;
cursor: pointer;
font-size: 24px;
}
.updates {
background-color: aliceblue;
border-color: aliceblue;
color: #2bab10;
position: absolute;
top: 135px;
right: 300px;
font-weight: bolder;
font-family: 'main';
width: 1000px;
overflow: auto;
max-height: 6in;
}
.back {
background-image: url("https://cdn.discordapp.com/attachments/694661573125472256/1070884589108744192/image.jpg");
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
}
#baro {
background-color: #78ac4c;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
}
#play-btn {
background-color: yellow;
color: black;
border-radius: 100px;
padding: 10px 20px;
cursor: pointer;
border: none;
}
#font-face {
font-family: main;
src: url(font.ttf);
}
.discord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.dickkord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#gradient-bar {
background: linear-gradient(to right, #000000, #ffffff);
height: 20px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eaglercraft.xyz</title>
</head>
<body>
<div class="bar">
<p>
Eaglercraft.xyz Launcher
</p>
</div>
<div id="close-button">×</div>
<div class="back">
<pi></pi>
</div>
<div id="gradient-bar">
<p>aaseasea</p>
</div>
<div class="updates">
<div class="Texty">
<p> Be sure to join our discord!</p>
<div class="discord">
<ul style="color: black; font-weight: 100;"></ulstyle>Stay up to date with the latest news, contests, giveaways and other cool things: discord.gg :)</ul>
</div>
<div class"dickkord">
<p style="color: #298bc4"> Minecraft 1.8</p>
<ul style="color: black;"></ulstyle>Diorite: Crafted using 2 cobblestone and 2 Nether quartz in a checkerboard pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Andesite: Crafted using 1 cobblestone and 1 diorite.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Granite: Crafted using 1 Nether quartz and 1 diorite.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Coarse Dirt: Replaces grassless dirt found in mega taiga, mesa and savanna biomes. It is slightly darker than regular dirt. Tilling it with a hoe turns it to regular dirt. Can be crafted using dirt and gravel in a 2x2 checkered pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Prismarine: Generates in ocean monuments and can be crafted using prismarine shards. Cracks in prismarine slowly change color.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Prismarine Bricks: Generates in ocean monuments and can be crafted using prismarine shards.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Dark Prismarine: Generates in ocean monuments and can be crafted using prismarine shards and an ink sac.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Red Sandstone: Can be crafted using 4 red sand in a square. Comes in chiseled, smooth, stair, and slab forms. Generated only in Mesa biomes at cave entrances.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Iron Trapdoor: Can only be opened and closed using redstone. Crafted using iron ingots in a 2x2 pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Sea Lantern: Generates in ocean monuments and can be crafted using prismarine shards and prismarine crystals. Emits light and has an animated texture.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Wet Sponge: Obtained when a sponge soaks up water. Smelting yields a dry sponge. Emits water dripping particles. Dropped by elder guardians.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Slime Block: Crafted using 9 slime balls. Players and mobs bouncing on top. Pushes and pulls blocks when moved by a piston. Does not affect falling items.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Banners: Crafted like signs but using wool. Can be stacked to 16 and have up to 6 layers. Can be placed on walls or on the ground. Different patterns can be made using dyes and certain items.</ul>
</div>
</div>
</div>
<div id="baro">
<select id="menu1">
<option selected value="latest">Latest Releases</option>
<option value="1.5">1.5</option>
<option value="1.8">1.8</option>
</select>
<select id="menu2" style="display: none;">
</select>
<button id="play-button" style="background-color: #f0c43c; border-radius: 20%; align-content: center;">Play</button>
</div>
<script src="epic.js"></script>
</body>
</html>
Reasoning:
Due to the 'back' class div set to the height of '100vh' (Vertical Height), The following div with static positioning will sit just below the div with the class of 'back'
Solution:
Rearranging your code makes it visible just under the blue bar
<div class="bar">
<p>
Eaglercraft.xyz Launcher
</p>
</div>
<div id="close-button">×</div>
<div id="gradient-bar">
<p>aaseasea</p>
</div>
<div class="back">
<pi></pi>
</div>
To put it in the very top of the page I used the following
HTML:
<div id="gradient-bar">
<p>aaseasea</p>
</div>
<div class="bar">
<div id="close-button" style="top: 20px">×</div>
<!-- style attr to fix the cross -->
<p>
Eaglercraft.xyz Launcher
</p>
</div>
<div class="back">
<pi></pi>
</div>
CSS:
#gradient-bar p {
margin-top: 0;
position: relative;
}
And to half it you could set #gradient-bar width to 50%
And to put it in the top right corner you could put
#gradient-bar {
position: absolute;
right: 0;
}
Hoped I helped in some way!
I put a banner in the div tags except it is not showing on my website. Here is my html:
.alert-box {
background-color: #DB5461;
color: #ffffff;
font-size: 14px;
line-height: 23px;
padding: 13px 16px;
text-align:center;
font-family: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
border-radius: 20px;
margin-bottom: 20px;
}
#header {
background-image: url(“./background.jpg”);
background-position: center;
background-repeat: no-repeat;
position: relative;
background-size: cover;
top: 0;
height: 40px;
width: 100%;
}
<div id="header">
<div class="alert-box">
<span class="badge">Announcement</span>Announcement text here (I'm not sharing this)
</div><br>
</div>
I don't see an evident problem.
I have tried changing up the CSS to no avail, and I believe the HTML is fine.
I was trying to make a website and had an error; I cant make 2 backgrounds in a singular html page: I want to make it so that the header, footer and the body have separate backgrounds but the element repeats when it specifies in the CSS 'no-repeat. Here is the code:
* {
margin: 0 auto;
padding: 0;
background: url(image/stacks.jpg);
background-position: center;
background-repeat: no-repeat;
}
#web {
border: solid 3px;
width: 460px;
height: 40px;
margin: 0 auto;
background-color: black;
font-size: 33px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
color: white;
}
#mar {
border: solid 3px;
width: 230px;
background-color: tomato;
font-size: 30px;
background-color: white;
color: white;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
margin: 0 auto;
}
#OK {
border: solid 3px;
width: 150px;
background-color: tomato;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
background-color: white;
color: white;
background-color: green;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
}
#HI {
margin-left: 100px;
margin-top: 20px;
width: 100px;
color: red;
font-size: 23px;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
}
a {
text-decoration: none;
color: white;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
margin-right: 10px;
}
#hehe {
margin-right: 10px;
}
ul {
float: left;
}
li {
display: inline;
font-size: 30px;
color: white;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
}
<!DOCTYPE html>
<html>
<head>
<meta keywords="htmls,tech,learn" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>t3lem_تعليم</title>
</head>
<body>
<div id="hehe">
<ul>
<li> Home</li>
<li> الفيديوهات </li>
<li> اتصل بنا</li>
<li> عن الموقع</li>
</ul>
</div>
<div id="HI">
<a href="https://www.youtube.com/channel/UCi0k9ygpc-NXOL090pIUkuw/"> <img src="https://yt3.ggpht.com/4qs1rBAWeor-sAeiNr9fDSHw4dtpF6--drGr70O_xAhA5Zq9LVSZAPe-
vuiVIzRKIxwvlF5Evw=s600-c-k-c0x00ffffff-no-rj-rp-mo" width="80px"> </a>
العودة للقناة
</div>
<div id="wrapper">
<div id="web">
Welocme to T3leem_Website
</div>
<div id="mar">
أهلا بكم في موقع تعليم
</div>
<div id="OK">
الصفحة الرئيسية
</div>
</div>
</body>
</html>
I cant put 2 backgrounds and wanted to know why. I tried methods but nothing seems to work in HTML/CSS
I hope you can answer my question
and thanks
Read this to understand more about specificity .
And you can use one of the following things :
either add !important to background-repeat: no-repeat; in this way :
*{background-repeat: no-repeat !important;}
or you can add background-repeat: no-repeat; to individual element which are using background-image property
I am new to coding (so go easy on me) doing this project for fun and I'm pretty close to being complete but I can't seem to get rid of this 2-5 px white space dividing my header from the first section. See the screenshot below:
I set all element margins to 0 such as
* {
margin: 0
}
but this didn't help.
the following code uses tables with inline CSS. Can somebody help me!
table.t00 {
width: 640px;
margin: 0;
}
table.t00 th {
max-width: 630px;
max-height: 474px;
}
table.t01 {
height: 162px;
width: 640px;
background-color: #1ab3ba;
}
table.t01 tbody {
text-align: center;
color: #f1f1f1
}
table.t01 th {
width: 636px;
}
table.t02 {
width: 640px;
background-color: white
}
table.t02 tbody {
text-align: center;
width: 634px;
height: 291px;
}
table.t02 th {
width: 634px;
}
table.t03 {
width: 634px;
height: 320px;
}
table.t03 tbody {
text-align: center;
width: 634px;
height: 320px;
padding-top: 60px;
}
table.t03 th {
width: 634px;
padding-bottom: 40px;
}
table.t04 {
width: 640px;
height: 84px;
background-color: #052f66;
}
table.t04 tbody {
text-align: center;
}
<body>
<table class="t00">
<tbody>
<th style="margin: 0;">
<img
class="header-image"
src="victory-club header.jpg"
alt="header for victory clubs membership"
/>
</th>
</tbody>
</table>
<table class="t01">
<tbody>
<th>
<p style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 28px; margin: 10px 0;">Your Member ID is:
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 36px; margin: 0;">FL-9999999</h2>
<p style=" font-size: 14px;
font-style: italic; margin: 5px 0;">Please keep this for your records</h4>
</th>
</tbody>
</table>
<table class="t02">
<tbody>
<th>
<p style="padding-top: 3%;
color: #052f66;
font-size: 28px;
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center; width: 634px; margin: 25px 0px 0px 0px">
Member Benefits
</p>
<br>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;">These are just some of the amazing benefits that come with your <br> Victory Clubs membership!</p>
<br>
<br>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Exclusive events and parties at local venues for Victory Clubs members only.</p>
<div style="background-color: white;
width: 634px;
height: 7px;"></div>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Deals and Savings at hundreds of retail and restaurant locations.
<div style="background-color: white;
width: 634px;
height: 7px;"
></div>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Exclusive Perks through your School.</p>
</div>
</th>
</tbody>
</table>
<table class="t03">
<tbody class="schedule">
<th>
<p style=" padding-top: 3%;
color: #052f66;
font-size: 28px;
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center;">
Schedule Now!
</p>
<br>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px; margin: 0 59px;">Schedule and pass your initial drug test now so you can start enjoying all the perks and benefits your Victory Clubs membership has to offer.
</p>
<br>
<br>
<button style="display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 100px;
border: 1px solid;
color: white;
border-color: #dc1d40;
background-color: #dc1d40;">SHEDULE MY DRUG TEST</button>
<br>
<br>
<br>
<p style="color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px; margin: 0 59px;">
You’ll receive an email letting you know your free 90-day subscription has been activated once you pass your drug test.
</p>
<p style="color: #052f66;
text-align: center;
font-size: 16px; margin: 0 59px;">
<b> Keep up the great work!</b>
</p>
<br>
</th>
</tbody>
</table>
<table class="t04">
<tbody>
<th>
<ul style="padding: 20px;">
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">FB</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;"href="" target="_blank">Twitter</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">Insta</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">Youtube</a></li>
</ul>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
height: 32px;">© All Rights Reserved. Privacy Policy | Accessibility Policy | Terms & Conditions</p>
</th>
</tbody>
<table>
</body>
Try adding this code:
table.t00 th img {
display: block;
}
One thing about images is that they have a default display: inline-block which makes them leave margins around other elements ... putting block display eliminates this effect
Also try adding
table.t00 {
border-collapse: collapse;
}
instead of having separate which is the default behaviour
<table> have border-spacing and by default it's value is 2px..so change it to 0 ....
border-spacing: 0px;
for both of your tables...t00 and t01
table.t00 {
width: 640px;
margin: 0;
border-spacing: 0px;
}
table.t01 {
height: 162px;
width: 640px;
background-color: #1ab3ba;
border-spacing: 0px;
}
I'm having trouble getting the image and text to be horizontally and vertically align in the center of this div.
Currently, it seems to be off center (but close enough that it looks almost center?)
.Rectangle {
height: 57px;
border-radius: 8px;
background-color: #0e74af;
margin: 50px auto;
margin-left: 14px;
margin-right: 14px;
}
.call {
height: 24px;
object-fit: contain;
margin-left: 72px;
margin-top: 16px;
}
.Call-Support {
height: 23px;
font-family: BentonSans-Regular;
font-size: 20px;
font-style: normal;
font-stretch: normal;
color: #ffffff;
margin-left: 8px;
text-decoration: none;
margin-top: 17px;
}
<div class="Rectangle show-mobile hide-desktop">
<a href="tel:555-555-5555>
<img class=" call icon-image " src="images/call#2x.png ">
</a>
<a class="Call-Support " href="tel:555-555-5555 ">Call Support</a>
</div>
Here's the code. Current code shows a responsive button that has 25% padding on each side. You can change width:50% to width:250px if you want a button with a fixed width.
/* Styles go here */
.Rectangle{
height: 57px;
border-radius: 8px;
background-color: #0e74af;
margin: 0 auto;
width:200px;
text-align:center;
}
.call {
display:inline-block;
margin: 0 auto;
margin-top:15px;
}
.Call-Support {
height: 23px;
font-family: BentonSans-Regular;
font-size: 20px;
font-style: normal;
font-stretch: normal;
color: #ffffff;
text-decoration: none;
display:inline-block;
}
<div class="Rectangle show-mobile hide-desktop">
<img class="call icon-image" src="images/call#2x.png" />
<a class="Call-Support" href="tel:555-555-5555">Call Support</a>
</div>