CSS not aligning email header correctly

I have been given the task of coding an HTML email for mailing campaigns. I have managed to get everything working, except for a particular piece of code. What I am trying to accomplish is having an image with other elements on top such as titles, a button, and a logo. Initially, I had all of this (the not commented lines), but in order to make it responsive, I had to make some changes (the commented lines) and as a result, the layout became completely messed up. To add to the challenge, when viewing it in Outlook, even the not commented lines look horrifying. It seems that Outlook strips all positioning attributes, so finding a solution for that would also be greatly appreciated.

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Title</title>
    <style>
        @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
        html {
            font-family: 'Open Sans',sans-serif; 
            font-size: 13px; 
            line-height: 20px; 
            /*color: #87888a; */
            color: #00000;
            letter-spacing: 0,5px;
        }
        #headertable {
            border-bottom: 5px solid #E40520; 
            position: relative;
            max-width: 600px;
        }
        .absolutepos {
            position: absolute; 
            left: 0; 
            right: 0; 
            bottom: 0;
        }
        #invitation {
            color: #ffffff; 
            text-transform: uppercase; 
            padding:5px 23px 5px 15px; 
            font-size: 24px; 
            border-radius: 0 5px 5px 0;  
            -webkit-border-radius: 0 5px 5px 0; 
            -moz-border-radius: 0 5px 5px 0; 
            background-color: #E40520; 
            border: solid #E40520; 
            display: inline-block; 
            letter-spacing: 2px;
        }
        h1 {
            font-size: 30px; 
            line-height: 24px; 
            color: #ffffff; 
            font-weight: normal; 
            text-transform: uppercase; 
            letter-spacing: 1px;
            margin: 0;
            padding: 0;
        }
        h2 {
            font-size: 20px; 
            line-height: 24px; 
            color: #ffffff; 
            font-weight: normal; 
            text-transform: uppercase; 
            letter-spacing: 1px;
            margin: 20px 0 0 0;
            padding: 0;
        }
        .submit-button {
            padding:7px 12px; 
            text-decoration: none; 
            border-radius:5px; 
            -webkit-border-radius:5px; 
            -moz-border-radius:5px; 
            background:rgba(255,255,255,0.5); 
            /*border:solid #87888A;*/ 
            display:inline-block; 
            font-size: 18px; 
            line-height: 24px; 
            color: #ffffff;
            text-transform: uppercase; 
            letter-spacing: 1px;
            transition: background .2s ease-in-out, color .2s ease-in-out;
        }
        .submit-button:hover {
            background: #E40520;
        }
    </style>
</head>
<body bgcolor="#eeeeee">
<table border="0" cellspacing="0" cellpadding="0" align="center" width="600" height="290" id="headertable">
<!--<table border="0" cellspacing="0" cellpadding="0" align="center" id="headertable" bgcolor="#00000">-->
    <tbody>
        <tr>
            <td>
                <img class="absolutepos" width="600" height="290" style="z-index: -1; top: 0;" alt="header_image" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" >
                <!--<img class="absolutepos" style="max-width: 600px; z-index: -1; top: 0;" alt="header_image" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" >-->
            </td>
        </tr>
        <tr>
            <td class="absolutepos" style="top: 15px; padding: 0 0 0 20px;">
                <a href="http://google.com" target="_blank" title="google">
                    <img width="175" height="47" alt="logo" src="https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png">
                </a>
            </td>
        </tr>
        <tr>
            <td class="absolutepos" style="top: 80px;">
                <span id="invitation">type</span>
            </td>
        </tr>
        <tr>
            <td align="center" class="absolutepos" style="top: 150px;">
                <h1>Big title</h1>
                <h2>subtitle</h2>
            </td>
        </tr>
        <tr>
            <td align="center" class="absolutepos" style="top: 225px;">
                <a href="http://google.com" target="_blank" title="Register" class="submit-button">
                    Register
                </a>
            </td>
        </tr>
    </tbody>
</table>

<table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" width="600">
    <tbody>
        <tr>
            <td colspan="2" style="padding: 40px 30px 10px 30px;">
                ...

Thank you in advance!

htmlcssemailoutlook

Answer №1

In Gmail, using position:absolute won't yield the desired results.

It's worth noting that Outlook uses an HTML renderer, so potential complications may also arise when working with it.

For more information on CSS support across various email clients, please refer to this comprehensive source.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting HTML to CSV using PHP

I need assistance with exporting MySQL fields to CSV. I have successfully exported all fields except the one that contains HTML content. My MySQL table is structured as follows: Name: Address: Profile: The 'Name' and 'Address' fields ...

phphtmlmysqlarrayscsv

Utilizing JavaScript and PHP to dynamically load HTML content on a webpage

Below is the code snippet I'm working with: <?php if ($x == 1){ ?> <b>Some html...</b> <?php } else if ($x==2){ ?> <b> Other html...</b> <?php } ?> Now, I want to create two links (a ...

phpjavascriptjqueryhtml

Stopping all animations with JQuery animate()

I have a question about stopping multiple animations. Here's some pseudocode to illustrate my situation: CSS #div1 { position: absolute; background-image: url("gfx/cat.jpg"); width: 60px; height: 70px; background-size: 50%; b ...

javascriptjquerycss

What methods can I use to achieve a stylish and responsive design for my images?

I have been encountering difficulties styling the images for my website. Despite multiple attempts, I am unable to apply CSS properties such as border-radius and responsive design to the images on my page. The images load fine, but they do not seem to acce ...

htmlcssimageresponsive

Focus on styling a single theader element within a jQuery Data Table with CSS

Struggling to work with a dynamic Jquery Data Table that has 10 table headers. I am having difficulty adding a class or an Id in the code to the specific th element with the title 'Unused'. In my .css file, I attempted: [title~= Unused] { ba ...

jquerycssdatatablecss-selectors

Using setTimeout with drag and drop functionality in HTML

I need a setTimeout function to be triggered only after dragging and dropping an image into a division, not before the drop occurs. ...

javascriptphphtmlweb

Using CSS to conceal an element when a different element is also invisible

My inquiry is as follows: I currently possess a code that conceals class element 1 when it possesses a specific value (which varies across different sites). Now, my objective is to also conceal class element 2 ONLY IF class element 1 is already hidden. ...

csshideelement

Looking to deactivate a particular checkbox in a chosen mode while expanding the tree branches

I encountered an issue with a checkbox tree view where I needed to disable the first two checkboxes in selected mode. While I was able to achieve this using the checked and readonly properties, I found that I could still uncheck the checkboxes, which is no ...

javascripthtmlcss

Hide and show submenus with jQuery while ensuring that the initial submenu remains visible, along with the main menu

I am struggling to figure out how to make the first message active by default along with its corresponding menu selection in my navbar. I have implemented a show/hide functionality on the main menu click, but currently only the menu is being set as active ...

javascriptjqueryhtmlcss

The PHP "include" function seems to be malfunctioning when used inside

Hey there! I'm trying to incorporate an echo statement that includes a variable along with some CSS and an image, but for some reason it's not working as expected. Can anyone lend a hand? <?php if (isset($_POST['sharebutton'])) ...

phphtmlimagecss

Is it possible to combine two conditions using CSS?

Hello, I have a question about CSS. In my navigation bar, I have 3 links with different styles: #p1 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 45px; font-weight: bolder; color: #999999; text-dec ...

htmlcsscss-selectors

Aligning two images vertically using the display: table-cell property

I'm trying to align two images vertically using CSS' display: table-cell property, but it doesn't seem to be working even after specifying the height. <div style='display: table;height:500px'> <div style=' displa ...

csslayout

Understanding how to activate a React navbar button is essential for creating a seamless user

How can I make my sidebar button change color when I navigate to the page it links to? ...

javascripthtmlsassreact-redux

Drop-down options disappear upon refreshing the page

Code snippet for sending value to server using AJAX in JavaScript In my script, the status value may vary for each vulnerable name. When selecting a status option and storing it in the database through AJAX, the selected value is lost after refreshing th ...

javascriptphphtmlajaxdropdown

What is the best way to incorporate parallax scrolling in the center of a webpage?

I am trying to implement a parallax scrolling effect in the middle of my page, but it seems to be causing issues once I reach that section while scrolling. I attempted to use intersection observer, but unfortunately, it did not resolve the problem. const ...

javascripthtmlcssscrollparallax

Is it possible to apply a background image on top of an existing image?

Is it possible to set a background image on an img tag? This is my current HTML markup: <div id="content"> <img src="my-image.jpg" alt="image" class="img-shadow"> </div> Here is my CSS code: #content img { floa ...

htmlcssimagebackground-image

ways to run php script based on screen resolution or size

I have 2 php files that I need to execute based on screen size. include_once('large.php'); include_once('small.php'); The condition is to run large.php when the screen size is greater than 992px, and small.php when the screen size is ...

javascriptphpjqueryhtmlajax

Challenges surrounding jQuery's .before

Currently, I am in the process of creating a simple carousel consisting of 4 divs. The carousel is utilizing 2 jQuery functions to position a div at either the first or last slot. The transitions being used are only alpha transitions as there is no need fo ...

javascriptjqueryhtml

Ways to incorporate horizontal scrolling into a flex container within a Bootstrap navigation bar

I am encountering an issue with my Bootstrap navigation menu that uses a flex container (). The goal is to have horizontal scrolling for the menu items when they surpass the width of the container. I have implemented the following CSS style on the containe ...

htmlcssbootstrap-5

Tips on including starting information into an angularjs application from the displayed HTML

I'm currently working on a complex AngularJs application that requires User Login. Once the user is authenticated, a page will be displayed to them and additional data will be loaded later. There are two methods for achieving this: XHR Fetch af ...

javascripthtmljsonangularjs