Simple Email CSS displaying different than in Browser - html

I am trying to create a simple email with embedded CSS but the result emailed to me comes out very different than what I am seeing in browser.
Here is my code:
<html>
<head>
<style>
body {
background-color: #96D60D;
}
div {
background-color: white;
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
padding: 20px;
}
</style>
</head>
<body>
<div>
<center><img src="logo.png">
</center>
<u>
<p>
<H1>API updates list:</H1>
</p>
</u>
<p>
<b>
<h2>Successful Entries</h2><br></b>
<ul>
<li>asdasdasd</li>
<li>asdasdasd</li>
<li>asdasdasd</li>
<li>asdasdasd</li>
<li>asdasdasd</li>
</ul>
<ul>
<li>asdasdasd</li>
<li>asdasdasd</li>
<li>asdasdasd</li>
<li>asdasdasd</li>
<li>asdasdasd</li>
</ul>
</p>
</div>
</body>
</html>
It looks fantastic in the browser as you can see here:
https://www.w3schools.com/code/tryit.asp?filename=G1EU5RK1DPMG
However, when put into an email, it looks pretty bad:
https://ibb.co/6FVJpZJ
Anyone know how to fix this?

I guess you are using Outlook. Some css properties are not fully supported by it and some others are not supported at all. Mailchimp has a cool page with lots of information that I find useful for you. Just check which properties you can use. From my experience, box shadows, margins and border radius have really made me go crazy because the changes don't work.
Here you can even find differences between the desktop and the app version of Outlook: https://templates.mailchimp.com/resources/email-client-css-support/

Related

How can I fix this to apply CSS?

body {
background-color: red;
font-family: arial;
}
h1 {
text-align: center;
}
.thumbail {
height: 600px;
width: auto;
}
<!doctype html>
<html>
<head>
<title>Services - Salazar's Stickers</title>
<link rel='stylesheet' type='text/css' href='./style.css'>
</head>
<body>
<header>
<h1>Salazar's Stickers</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
<h2>Personalized Name Stickers</h2>
<p>
These stickers can be customized with your name or initials, making it easy to add a personal touch to your belongings.
</p> <br>
<img src="./nameStickers.png" class='thumbnail' alt="Personalized Name Stickers">
<h2>Decorative Sticker Packs</h2>
<p>
Our decorative sticker packs include a variety of designs, perfect for adding a touch of creativity to your notebook, phone case, or any other item.
</p> <br>
<img src="./decStickers.jpg" class='thumbnail' alt="Decorative Stickers">
<h2>Vinyl Wall Decals</h2>
<p>
Our vinyl wall decals are a great way to decorate your living space. They are easy to apply, remove, and won't damage your walls, making it the perfect solution for apartment dwellers or those who prefer not to make permanent changes to their walls.
</p>
<img src="./vinylWallDecal.jpg" class='thumbnail' alt="Vinyl Wall Decals">
<div class='content'> </div>
<footer>© Salazar's Stickers 2023 </footer>
</body>
</html>
It was working initially, but now, any changes that I implement do not seem to work?
I can't change the color or the text-alignment.
The thumbnail class doesn't seem to be working either.
I'm new to CSS and HTML, so I'm probably sure that this is some simple mistake, but I searched the web and nothing seems to be working.
Not sure if this helps, but your css has .thumbail, and your html classes have thumbnail. You are missing the letter n.

HTML padding-left not working for div

I'm creating a very simple webpage. It has a div tag with a single paragraph containing some text.
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
Here is a the CSS style for the div:
div#titlebox {background-color:#f2f2f2;
padding-top:2px;
padding-bottom:2px;
padding-left:2px; }
Snippet:
div#titlebox {
background-color: #f2f2f2;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
}
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
</HTML>
The text appears correctly, background color is also fine, but regarding padding, only padding-top is applied while padding bottom and left are ignored. Any suggestions on what is wrong with this code? By the way I am new to HTML. I googled the issue, there was point regarding float, but that doesn't solve my problem.
Here's a solution you can try without using css
<html>
<head></head>
<body>
<div align="left" style="padding-top: 20px;padding-left: 20px;padding-bottom: 20px;">
<p>First Heading</p>
</div>
</body>
Hello I wouldn't criticise you I see you are a beginner, that would just dis encourage you but normal syntax, html,head,body written in simple letters to avoid confusion of reading your own code later
follow this url:
Is it bad to use uppercase letters for html tags?
Your code works fine :)) I simply made padding bigger to make it more obvious
div#titlebox {
background-color: #f2f2f2;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 100px;
}
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
</HTML>
Your left and bottom padding is working but you probably can't see it because 2px is really small. Change it to 20px or something and you should see the padding.
Handy tool - if you are using Chrome, you can right-click on the element you want to inspect and select the Inspect tool to see all your padding and margins on a diagram.
--note-- depending on which browser you are using, there will be some default styles/padding/margin applied to certain elements already, in this case your paragraph tag already have some top and bottom padding

html/css floating image right of text

I am attempting to float an image to the right of some text currently wrapped in the P tag inside a parent div. using float: right for the image takes it all the way to the right but under the text.
I would like to see them aligned side by side, please check screenshot here:
https://drive.google.com/file/d/0B3STRGf0b16iNWhMVDBETEpaczQ/view?usp=drivesdk
My css
h1 {
font-family: 'open sans';
font-size: 35px;
font-weight: 200;
padding: 0;
margin: 0;
}
p {
max-width: 550px;
padding: 0;
margin-top: 15px;
font-size: .9em;
line-height: 1.8em;
}
.why-nexishost {
width: 980px;
overflow: hidden;
margin: 70px auto 0 auto;
background-color: #f2f2f2;
}
.quality-badge {
float: right;
}
My html
<head>
<title>NexisHost</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<div class="header-content">
<img src="images/twitter-icon.png" class="twitter-icon" alt="Twitter icon">
<ul>
<li>Support 513.571.7809</li>
<li>Account Manager</li>
</ul>
</div>
<div class="navigation">
<img src="images/logo.png" alt="Site Logo">
<ul>
<li>Products</li>
<li>Domains</li>
<li>Services</li>
<li>Something</li>
<li>Design</li>
<li>Support</li>
<li>Signup</li>
</ul>
</div>
<div class="home-banner"></div>
<div class="why-nexishost">
<h1>Quality is our #1 priority</h1>
<p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help#your_company), simple management tools and other helpful features.</p><img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
</div>
</div>
</body>
</html>
Try adding this:
p{
display: inline-block;
}
.quality-badge{
display: inline-block;
}
You can also do this by floating left as another person suggested, but inline-blocks will put things in a line.
You can check this site out for more info.
I'm not sure what is considered better-practice, I think inline-blocks are just the newer way of doing things although old versions of some browsers may not support it. This site shows which don't.
You probably want to float your <p> left, not your image right.
p {
float: left;
...
}
.quality-badge {
//float: right;
}
You can do it like this with your current css:
<div class="why-nexishost">
<img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
<h1>Quality is our #1 priority</h1>
<p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help#your_company), simple management tools and other helpful features.</p>
</div>
You'll probably want to keep float:right applied to your image. This will make your image float to the right and HTML elements that come after it in the same container will wrap around it. However, you'll need to move your img tag up so it comes before the text you want to wrap.
HTML:
<div class="container">
<img src="myImage.png" class="myImage" alt="Alt Text" />
<h1>Heading</h1>
<p>Paragraph text</p>
</div>
CSS:
.myImage {
float:left;
}
See this fiddle using your code for a demonstration.
If you want the container to expand to the size of the floating image (by default if the image is bigger than the container it overflows out) you can add the following CSS to your container class:
.container { overflow: auto; }
As an additional note, your img tags aren't closed (you have <img src="source" > rather than <img src="source" /> which will probably cause rendering errors in at least some browsers.
You can learn more about float and clear in CSS here.

Why does my external CSS not work in FF or IE, but does in Chrome?

When I run my (very basic) page in Chrome, it shows the title and list in the correct size, colour and position. Also the background image fits to the screen. But when I run my page in FF or IE, there is no background image and the title and list haven't got my CSS position, colour or size.
I have copied my code below. My question is: how can I make my title and list show up on my web page in all/most browsers in the correct size, colour and position to what I have set it to in my CSS? Also for the background image to be shown as well. I hope this isn't too general. Please help!
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="txt/css" href="C:///****/*****/Desktop/FifaStream1.0/indexstyle.css"/>
<title> Fifa Stream </title>
</head>
<body>
<h1 id="Title1"> <font color="grey"> Fifa </font color> <font color="red">Stream </font color></h1>
<nav class="IndexList">
<li> Home <br> <br> </li>
<li> Youtube <br> <br> </li>
<li> About Us <br> <br> </li>
<nav>
</body>
</html>
And this is my CSS:
body {
font-family: "proxima-nova",sans-serif;
background:url(fifa13messi.png);
-moz-background:url(fifa13messi.png);
background-size:100%;
-moz-background-size:100%; /* Old Firefox */
background-repeat:no-repeat;
}
#Title1 {
position:relative;
left:5%;
top:5%;
font-size: 3em;
}
.IndexList {
list-style: none;
position:relative;
left:5%;
top:40%;
font-size:2em;
font-weight: 600;
letter-spacing: -1px;
}
a {
color:white;
text-decoration: none;
}
It would a great help if anyone could explain where or why I'm going wrong.
Because <li> elements can't be children of the <nav> element - they can only be children of the <ul> or <ol> elements...
The type attribute should be text/css, not txt/css. IE and Firefox are (correctly) rejecting it for the mismatch.
First thing I want to say is try to do smart work, use some html eiditor, like dreamweaver or some other that provide hints forcodig.
Now point by point here are list of problems in you coding
Type attribute for link css should be text/css. Not. Txt/css
Try to close tags just after creating it. This will always make shure all tags are closed. Bcz your nav tagi not closed,but created two nav tags without closing them.
Li tag should be wrapped with 'o' or 'ul'
Thanks.
Your <nav> tag needs a </nav> closing tag, not a second <nav>.

Where to start when changing HTML to CSS [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am trying to learn CSS, so far it seems that changing HTML to CSS is more of just changing font, colors, text size, tables and background to some CSS statements.
My problem is I am not sure what HTML I still need and what to remove.
Where do I put the CSS stuff?
Basic HTML trying to learn with this easy one:
<html>
<head>
<title>CSS practice</title>
</head>
<body style="background-color:white;">
<table border="1" width="990" bgcolor="#99CCFF">
<tr>
<td width="990"><p align="center"><font face="Arial Black" size="6" color="#680000">DDDD</font></td>
</tr>
</table>
<table border="0" width=990 bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="990"><font color="#FFFFFF" face="Arial" size="2"><b> Personal Portfolio</b> </font></td>
</tr>
</table>
<table border="0" width=990 cellspacing="0" cellpadding="0">
<tr>
<td width="18%" bgcolor="#99CCFF" valign="top">
<p style="margin-left: 20"><b><font face="Arial" size="2" color="#000000">
Home <br><br>
About Me <br><br>
Outreach <br><br>
Contact Me <br><br>
Experience <br><br>
Education <br><br>
Skills <br><br>
<td width="61%" valign="top">
<blockquote>
<p><br>
<font face="Arial" size="5">Welcome</font></p>
<p><font size="2" face="Arial"> Aspiring CSS programmer </font></p>
<img src="me.jpg" alt="US"/>
</blockquote><br><br>
<p align="center"><font face="Arial" size="1">© COPYRIGHT 2012 ALL RIGHTS
RESERVED </font></td>
<table border="0" width="990" bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><font size="1"> </font></td>
</tr>
</table>
</body>
</html>
Start from scratch. Building semantic HTML is about focusing only on content, and you will find out that its a lot easier than make the ol'table HTML.
Table-less, semantic HTML
Your new HTML should look like this:
<html>
<head>
<title>CSS practice</title>
<link rel="stylesheet" href="css-file.css" type="text/css">
</head>
<body>
<span>DDDD</span>
<h1>Personal Portfolio</h1>
<nav>
Home
About Me
Outreach
Contact Me
Experience
Education
Skills
</nav>
<p>Welcome <span>Aspiring CSS programmer</span></p>
<img src="me.jpg" alt="US"/>
<span>© COPYRIGHT 2012 ALL RIGHTS RESERVED</span>
</body>
</html>
See? Just the contents, nothing about styles at all. Much simpler!
So after that you can start moving on CSS with your new separated css-file.css (look the css declaration inside the head tag).
CSS styles
CSS is just about finding paths to your HTML elements, and then styling it. It's really easy.
For example, you could spot and style your title like:
h1 {
font-family: "Verdana";
font-weight: bold;
}
... your menu buttons like:
nav a {
color: blue;
text-style: italic;
}
nav a means you want to style every a tag living inside a nav tag, leaving unstyled the a ones outside of a nav tag.
Well... and this is a path! Build your paths freely, as long they meet their respective targets (the HTML elements).
Classes and IDs
Every tag in HTML can have both a class and an id attribute. Apply them freely into your HTML tags to help you spot your elements. Use them like this:
<span class="class_name" id="id_name">content</span>
In your CSS, you can refer to a class by putting a dot before the name, like:
nav a.class_name {
color: blue;
text-style: italic;
}
So the styles will be applied to every a tag that has the class-name class, living inside a nav tag.
Id's will work the same way, but in CSS you refer to them by placing a hash (#) instead of the dot we used for class.
That's it, you have already begun. :)
I personally would recommend you start from here: How to make websites.
And remember... use LOTS of Google.
You'll be there in no time.
css should handle size/position/color/font -- in short, anything that's not structure. w3schools is a good resource.
Use jsfiddle to try out test implementations.
Here's a rough cut, I did with just a few minutes playing around my fiddle
html:
<html>
<head>
<title>CSS practice</title>
</head>
<body>
<div class='header'>DDDD</div>
<div class='subHeader'>Personal Portfolio</div>
<div class='links'>
<ul>
<li> Home </li>
<li> About Me </li>
<li> Outreach </li>
<li> Contact Me </li>
<li> Experience </li>
<li><a href="education.html"> Education </a</li>
<li> Skills </li>
</ul>
</div>
<p class='welcome'>Welcome</p>
<p class='welcome2'>Aspiring CSS programmer</p>
<img src="me.jpg" alt="US" />
<div class='copyright'>© COPYRIGHT 2012 ALL RIGHTS RESERVED</div>
</body>
</html>
css:
:root{
background-color:white;
font-family: Arial;
}
.header {
border: 1px;
width: 990px;
background-color: #99CCFF;
text-align: center;
font-size: 16pt;
color: #680000;
}
.subHeader {
background-color: black;
color: white;
font-weight: bold;
}
.links {
width: 200px;
background-color: #99CCFF;
font-size: 12pt;
padding-left: 20px;
float: left;
}
.welcome {
font-size: 15pt;
}
.welcome2 {
font-size:12pt;
}
.copyright {
float: left;
width: 990px;
text-align: center;
}
The general concept is that CSS replaces ALL of the styling information in HTML, so that HTML should only be there as a "markup" language which only provides data structure to your content.
All of the attributes that refers to color/size/position etc. should be remade as CSS statements, and a class added to those HTML elements instead.
For example, the table tag would change to <table class="mytable">.
If I understand your question correctly, you are trying to replace the styles in your HTML with CSS.
This is where you add your css (note that I am giving examples, they might nor be syntactically correct)
<head>
<title>CSS practice</title>
<style>
//Your CSS styles - e.g.:
.body {
attribute1: value1,
attribute2: value2
}
</style>
</head>
And, remove all the style, border, width, etc. attributes inside HTML tags - basically anything that adds any sort of styling, like height, color, font, width, border, etc. would be moved into the CSS code.
Basically, you almost don't need any attribute on HTML tags anymore, except for id and class, and sometimes style for inline styling (that is not good but can be handy if you are in trouble and have no time).
Then border, width, background-color, font size and color, etc... are all managed through CSS, plus hundreds of other things.
For basic stuff on unique elements, you can use ID attribute, for elements repeated in the page, use class.
In CSS, refer to IDs with
#myID{ color: red;}
, to class with
.myClass{ color: red; }
and to elements with the element name, like
div { color: red; }
Good luck, have fun :)
w3schools as mentioned above is a really good resource. Try to put your css code in a separate "css" file. Also if you just want to see how things interact, developer tools on the browser comes in really handy, if u r on windows/linux using firefox or chrome u can try Ctrl+F12.
Hope this helps.