I'm trying to get three images on a single line, one left-justified, one centred and the last one right-justified. I've settled on using a single row table to do it, but am having a hard time getting the images to be centred within their respective cells.
Is there a better way of doing it than I've chosen? I'm not going to use the <td align="center"> attribute as it's been deprecated in HTML5, so am looking for a way to do it using CSS. This is what I have at the moment (I've set the table border attribute to '1' so I can see how the image alignment within the cell renders):
<style>
.centre_image
{
float:center;
}
</style>
<body>
<table border="1">
<tr>
<td class="centre_image">
<object type="image/svg+xml" data="images/lawfirms.svg">
<img src="images/lawfirms.png" alt=""/>
</object>
</td>
<td class="centre_image">
<object type="image/svg+xml" data="images/industry.svg">
<img src="images/industry.png" alt=""/>
</object>
</td>
<td class="centre_image">
<object type="image/svg+xml" data="images/in-house.svg">
<img src="images/in-house.png" alt=""/>
</object>
</td>
</tr>
</table>
This gives the following result in Firefox 19.0 on Ubuntu:
and the following result in Chrome 25.0:
EDIT - here is the full HTML after making the changes referred to in j08691's answer:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title>SVG Included with <object> tag</title>
<style>
.centre_image
{
text-align:center;
}
</style>
</head>
<body>
<table border="1" style="width:100%">
<tr>
<td class="centre_image">
<object type="image/svg+xml" data="images/lawfirms.svg">
<img src="images/lawfirms.png" alt=""/>
</object>
</td>
<td class="centre_image">
<object type="image/svg+xml" data="images/industry.svg">
<img src="images/industry.png" alt=""/>
</object>
</td>
<td class="centre_image">
<object type="image/svg+xml" data="images/in-house.svg">
<img src="images/in-house.png" alt=""/>
</object>
</td>
</tr>
</table>
</body>
</html>
Here is the result of Naresh Kumar's answer:
As there is no float:center property, have you tried text-align:center?
.centre_image {
text-align:center;
}
jsFiddle example
try something like :
.centre_image{
text-align:center;
margin-left:auto;
margin-right:auto;
}
i hope that this will help you.
In HTML5 vAlign is deprecated. Here is a tips put all three images in side li tag. And in CSS assign a property display: inline block for the li tag.
There were many ways to not make it right. Especially the 'float:center'.
I fiddled an example here
and another fiddle with basic .css reset here
Since you want to center horizontaly in a TD tag, you can simply align it ..
<td align="center">
But you will be noticed that 'align' property is 'deprecated' and you will be suggested to use CSS instead. For this, others already showed you the answer
.centre_image {
text-align:center;
vertical-align:middle;
}
This CSS will work for as long has your element is not 'floated'
p.s. 'DEPRECATED' is not evil.
p.s. w3school has a not so good reputation on StackOverflow.
Related
I've been trying to get a table to span a two-column article container using column-span:all in my CSS-file. The spanning part works, but my problem is that I've got a couple of links inside my table that for some reason don't work in Chrome (v 85) and Ms Edge. By not working, I mean that I cannot click the links and while hovering over them, no change takes effect (a:hover does nothing). The issue doesn't seem to appear using Firefox or IE.
If I remove margin: 2em auto; the links work again, but then my table isn't centered.
So, the question is, how can I make a centered table that spans a two-column article container with still functioning links across Chrome, IE, FF, Safari (not tested) etc?
Is there perhaps an alternative?
MWE:
<html>
<head>
<style>
article{column-count:2;}
a{color:green;}
a:visited{color:red;}
a:hover{color:blue;}
a:active{color:yellow;}
table{column-span:all;margin:2em auto;}
</style>
</head>
<body>
<article>
<table>
<tr>
<td>google</td>
<td>unimportant text</td>
</tr>
<tr>
<td>duckduckgo</td>
<td>another unimportant text</td>
</tr>
</table>
</article>
</body>
</html>
<html>
<head>
<style>
article{column-count:2;}
a{color:green;}
a:visited{color:red;}
a:hover{color:blue;}
a:active{color:yellow;}
.center{
column-span:all;
margin:2em 0;
display:flex;
justify-content:center;
}
</style>
</head>
<body>
<article>
<div class="center">
<table>
<tr>
<td>google</td>
<td>unimportant text</td>
</tr>
<tr>
<td>duckduckgo</td>
<td>another unimportant text</td>
</tr>
</table>
</div>
</article>
</body>
</html>
I am working with some HTML/CSS and VML code to make a button render consistently in most email clients. As outlook doesn't support rounded corners I'm having to add some VML code to achieve this effect. I managed to fix most of the alignment issues but I can't figure out where the spacing at the top/bottom on the button is coming from and how to get rid of it?
I was able to use some VML code from this bulletproof email button generator and Microsoft's reference site
The reason why I'm not using the bulletproof generator is because the people responsible for adding content to emails are not technical and as such I'm trying to minimise issues by exposing them to code as little as possible. Also I understand clicks on VML buttons might not track on some Outlook clients.
Also a similar question can be found here but the solution provided there didn't work in my case or I might have overlooked something?
Below is the code I'm working with. Please note the VML button background colour has been set to green and the table that's meant to be the button is blue. I did this as it was easier for me to troubleshoot.
So far I managed to identify the strange padding around the text itself is coming from the inline css on the a tag but I can't figure our where those random lines of space at the top and bottom of the VML button are coming from.
<!-- button -->
<div align="center" class="float-center" >
<!--[if mso]>
<v:roundrect
xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" arcsize="100%" fillcolor="green" style="width:250px; height:70px;mso-fit-shape-to-text:True;"
<v:stroke color="#1e6db1"/>
<center>
<![endif]-->
<table class="button rounded cta-main float-center" style="Margin:16px 0 16px 0;border-collapse:collapse;border-spacing:0;float:none;margin:16px 0 16px 0;padding:0;text-align:center;vertical-align:top;width:auto">
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:none;-webkit-hyphens:none;Margin:0;border-collapse:collapse!important;color:#1f2935;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:none;line-height:1.5;margin:0;padding:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word" valign="middle">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:center;vertical-align:top;width:100%" valign="top">
<tr style="padding:0;text-align:left;vertical-align:top;">
<td style="-moz-hyphens:none;-webkit-hyphens:none;Margin:0;background:#1e6db1;border:none;border-collapse:collapse!important;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px;color:#fefefe;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:none;line-height:1.5;margin:0;padding:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word" valign="top">
<a href="https://click.email.ucas.com/?qs=6c9084e0730ba4dc1922768cfa83b05115461a1febe2fb9df4b046be8ebdbf014229f45cf8558f65a28e9fcdb54ced5d6a5fa122aee33ef8" style="Margin:0;border:0 solid #1e6db1;border-radius:50px;color:#fefefe;display:inline-block;padding:24px 32px 24px 32px;font-family:Helvetica,Arial,sans-serif;font-size:18px;font-weight:700;mso-line-height-rule:exactly;line-height:1.5;margin:0;text-align:left;text-decoration:none;">
<span style="color:#fefefe;">
Finance ›
</span>
</a>
</td></tr></table></td></tr></table>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
<!-- end button -->
VML stuff in general adds a lot to your file size unnecessarily.
I use this for my button code and it works on all the major litmus clients:
<table class="button" border="0" cellpadding="0" cellspacing="0" style="background-color:#212121; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; overflow:hidden; mso-padding-alt:0px 21px 0px 21px;">
<tr>
<td width="100%" height="54" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#FFFFFF;">
<a href="http://buttonLink.com" target="_blank" style="color:#FFFFFF; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:21px; padding-bottom:0px; padding-left:21px; color:#FFFFFF;">
SHOP NOW
</span></a>
</td>
</tr>
</table>
Litmus also has this super helpful article on buttons:
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design
can anyone help me with my problem? I try to build newsletter with couple table segments because mailchimp have problem with code and break my mail content if he is not in the table. Main problem for me is image over image. Please, take a look at my code.
Pattern is bottom image and have 100% size (700x50px) and logo is top image (32x32px). Logo must to be on right side and over pattern image with margin-top -20px and margin-right 30px but without using "position" property (mailchimp break all position property).
Right now, my logo is under pattern. I was try to fix this problem with z-index but nothing happens here.
<table class="header_class">
<td>
<img class="pattern_header"src="pattern.jpg" alt="pattern" />
<img class="logo_small"src="logo.jpg" alt="logo" align="right"/>
<h1>July 2017</h1>
</td>
</table>
my css:
pattern_header{
max-width: 700px;
}
logo_small{
margin-right: 30px;
margin-top: -20px;
}
(I am totally beginner and maybe my code isn't ok)
What the header should look like:
For background to work on emails you can use positions (as you have found out). For backgrounds to work in Outlook you need to use VML (vector markup language), this is native to outlook (>2007). All the rest of the email clients should be able to read the background declaration on the td.
Few things to note in the below code:
I have added [HEIGHT OF IMAGE] where you need to add the height for the VML.
You have not provided image dimensions which you will need for logo. Note Outlook doesnt read style attributes on images.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="https://i.stack.imgur.com/UX7Jw.png" style=" background:url(https://i.stack.imgur.com/UX7Jw.png);background-image:url(https://i.stack.imgur.com/UX7Jw.png);">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:700px;height:159;">
<v:fill type="frame" src="https://i.stack.imgur.com/UX7Jw.png" color="#e9e9e9" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right" valign="top" style="padding:30px 30px 30px 0px;"><img class="logo_small" src="https://i.stack.imgur.com/164VA.png" alt="logo" align="right"/></td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Let me know if this works for you.
This is what I need. Logo alignment is not to the top (offset from top 20px and from right 30px). Pattern alignment is top.
Example
A picture is worth a thousand words and so I'll start off with it
As you can see, there is white background appearing in Chrome while in Firefox, the movie fits perfectly.
Here is the embed code:
<embed id="movie" src="movie.swf" loop="false" menu="false" quality="best"
bgcolor="#ffffff" width="250" height="250" scale="aspect" name="movie"
align="middle" allowscriptaccess="always" allowfullscreen="false"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
flashvars="shutter_enabled=1&shutter_url=shutter.mp3&width=250&
height=250&server_width=250&server_height=250">
For the time being, I've used bgcolor=#e0efe8 to merge it with background. But what I'm curious about is why doesn't the movie fit perfectly as it does in Firefox?
I tried to look at css but right clicking over it brings up the flash settings menu.
The embed tag is withing a td and the table has cellspacing = "4" and cellpadding = "3", but I don't think that would cause a problem. The table, tr, or td doesn't have a height property defined so I guess we can tick that off of 'to check' list too.
Is there anything else from my side that needs to be provided to come up a solution?
UPDATE
Throwing in the HTML too if that helps:
<table width="100%">
<tbody>
<tr>
<td>
<embed id="movie" src="movie.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" scale="aspect" name="movie" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="shutter_enabled=1&shutter_url=shutter.mp3&width=250&height=250&server_width=250&server_height=250" align="middle" height="250" width="250">
</td>
</tr>
</tbody>
</table>
Finally managed to view the CSS through Firebug lite. Here is the SS:
Thanks in advance
We'll need to have a look at your CSS file or inline style code, have you tried setting the td padding property to zero?
CSS code:
td {
padding: 0;
}
Edit1: If that doesn't work, maybe this css property:
border-collapse: collapse
Edit2: Try using these CSS properties:
position: relative;
overflow: auto;
Source (someone else having a similar problem): http://productforums.google.com/forum/#!topic/chrome/2EqmQiwApz4
Can anybody tell me why the outer div is not expanding to the page width? Is there any solution for this without removing the doctype declaration(If I remove doctype, it is expanding) ? Also my page is in js disabled mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<div style="border:1px solid #ff0000;">
<div>
<table class="storeList">
<thead>
<tr>
<th>
Country Code
</th>
<th>
Store ID
</th>
<th>
Store Name
</th>
<th>
TownName
</th>
<th class="actions">
Store Operation
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
TEST
</td>
<td>
TEST
</td>
<td>
hghjgdkjvhkjhvhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjhghjgdkjvhkjhvhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjdhgfdhf
</td>
<td>
TEST
</td>
<td class="actions">
TEST ACTIONS
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
This answer works, promise!
To your outermost div (<div style="border:1px solid #ff0000;">), add either:
float: left, or;
display: inline-block.
If you would like to see demos of these two fixes, check these older answers I provided:
How to fix table going outside of div tag in IE6 & 7?
Expand a div width to the width of the sibling table which has a lot of rows and causes vertical scroll
It would probably be because browsers apply their own default style, which include margins and padding on various elements. The body tag probably has default padding so you'd need to add a "reset CSS" file to your page to reset these defaults or just try:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
In the head of your page. Also, just to note, it looks like you're using tables for layout. This is a big no no in todays modern world of CSS:
http://www.hotdesign.com/seybold/
http://www.mardiros.net/css-layout.html
Why not use tables for layout in HTML?
You can also set your table to 100% width to cover the area provided by the div
table { width: 100%; }