My emails keep getting messed up when lists are introduced - html

For some reason, the ending of my email gets messed up any time there's a list (or div, or blockquote) above it. If I remove the list, then the problem magically goes away. Everything is closed properly, everything is aligned properly, etc. So I'm at a loss - what am I doing wrong? Template below:
<div style="max-width: 600px !important; padding: 20px; background-color: #FFFFFF"><p style="color: #191C22;font-family: Arial, sans-serif;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-size: 16px;line-height: 150%;text-align: left; width: 100%;">Hi! <br>
<br>
Thanks for starting your application!<br><br>
Give us a call at our number or you can email us with questions.
<br><br>
Thanks for your business!<br>
<br>
<ul></ul>
Best,<br>
Magenta & Co
</p>
</div>

Related

Dark mode overwriting colors in email

Most of the issues have been cleared up but one of my h1's will turn black in dark mode on Outlook 360 and I'm not quite sure as to why.
<h1 mc:edit="header-title"
color="#ffffff"
mc:label="header-title"
class="header-title darkmodecolor"
style="margin: 0;padding: 0;box-sizing: border-box;font-family: Arial, Helvetica, sans-serif;max-width: 100%;color: white !important;font-weight: 700;font-size: 28px;line-height: 140% !important;">
<span
class="header-title darkmodecolor"
style="color: white !important;">
text is here
</span>
</h1>
I have tried using the color scheme media query but nothing is affecting it.

Attempting to align text to the style of a SNES game

Let's make a long story, short.
I want the text in this...
To look more like this...
And I mean the alignment of it when I type. In the layout I have, the first line is longer, and the second is shorter. It looks pretty ugly with those dots there.
The site I'm using is very limited with the way their code works, which kinda sucks. But here's my code so far.
<div style="width:100%;height:550px;background:url(https://www.vizzed.com/smd/photo_album_pics/fullsize/35979-1555716669.gif) no-repeat;background-size:100% 100%;">
<div style="width:67%;height:25%;background-color:transparent;position:relative;left:135px;position:relative;top: 365px;border-style:hidden;overflow: auto;border-width:0px;padding: 5px">
<p style="font-size: 26pt;font-family: Arial Black;font-weight: bold;text-align: center;word-spacing: 10px;letter-spacing;6px;color: black; -webkit-text-fill-color: white; -webkit-text-stroke-width: 2.3px; -webkit-text-stroke-color: black; }">
</div>
</div>
I am not sure I understand exactly your problem, but if you just want to control where to cut the sentence, you could use the <br> tag.

White box appearing next to button on hover - css issue?

I can't for the life of me figure out what is causing this little white box when hovering over a button. I've recreated the code on codepen and it isn't there.
The html for the section is:
<div class="custom">
<h3><span style="color: #ffffff; margin-top: 50px;"><br>
Thinking of a new website?</span></h3>
<p style="text-align: left;"><span style="color: #ffffff;">Get started with this free guide</span></p>
<h4 style="text-align: left; margin-top: 20px;"><span style="color: #ffffff;">8 Steps To A High Impact Website Redesign</span><br>
<span style="color: #ffffff;"><small>How To Finally Get Your Website Sorted (And Actually Getting Results)</small></span></h4>
<p style="text-align: left;"><span style="color: #ffffff;"><a class="manual-optin-trigger" data-optin-slug="rnrqwxq9x7zlekfs" href="#" style="color: #ffffff;"><span class="btn">Send me the guide</span></a></span></p>
</div>
There are a couple of extensive stylesheets which apply to the page, so I'm not sure whether it would be easier to view the page here.
The button in question is the one about half way down under the heading 'Thinking of a new website?'. If you hover over the button that says 'Send me the guide' you will see it turns yellow and a white box appears to the right of it....I'm baffled???
Can anyone provide any ideas as to what might be causing it?
Thank you in advance.
D

Dropdown Menu not displaying in Body when in Iframe

I am trying to make it so that I only have to update one page for my menu bar. This is an intranet page for internal use only. I don't wish to use PHP.
The issue I am having is that once I scroll over the menu tab and the dropdowns show they are stuck in the iframe and will not flow onto the main page.
Is there any way to fix this so that someone wont need to scroll through the iframe just to click the menu tab.
<body>
<iframe frameborder="0" height="260px" width="100%" src="Navigation.html" name="iframe_a" allowfullscreen wmode="transparent"></iframe>
<p style="font-family: Arial; text-align: center;" class="MsoNormal"><b><span style="font-size: 18pt;">NEW SPECIFICATIONS AND UPDATES</span></b></p>
<p style="font-family: Arial; text-align: center;" class="MsoNormal"><b><span style="font-size: 18pt;"></span></b></p>
<span style="font-size: 11pt; font-family: Arial;"><big>Please be advise the December 2015 update for Traffic Control (TC) Signs has been released.</big><br>
<br>
</span>
Your thought on this would be greatly appreciated

IE 9/8 breaks my div into 2 divs of same id and separates elements

Hey I just made a landing page and it looks fine on chrome
http://www.advicestudents.ro/tommy/homepage/homepage_v1/homepage.html
well the CRT_abs div that holds the heading subtitle and button duplicates on IE 9 and 8 it goes CRT_abs for the text and CRT_abs for the button same goes for the H1 holder DIV !
Dose anyone understands why this happens?
HTML code for holder :
<a href="#"><div id="h1" style="margin-top:-3px;">
<img src="images/h1.jpg" alt="" />
<div class="CRT_abs" style="text-align: center;width: 711px;left: 139px;top: 219px;padding: 0px;">
<div class="CRT_title_s_i CRT_white" style="line-height:16px; font-size:16px; text-transform: none; margin-bottom: 8px;">
Fall Outerwear
</div>
<div class="CRT_gills CRT_white" style=" font-family:ITCCaslon224W01-BookIt;font-size:40px; line-height:40px; margin-bottom: 9px; letter-spacing:1px;">
THE WARM UP
</div>
<div class="CRT_subtitle CRT_white" style="font-size:14px; margin-bottom: 12px;">
The perfect coat for every occasion,
<br />
from vintage bomber to collegiate duffle.
</div>
SHOP OUTERWEAR <span class="CRT_f18 CRT_gills">›</span>
</div>
</div></a>
so some CSS styleing is already inline coded into the HTML as you can see + the Position:absolute on the CRT_abs. I think thats all
The problem was that the first link tag that was wraping the whole main div, moved it to wrap only the image so i got the same effect and no more buggs. The buttons have the right possition now.