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

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

Related

My emails keep getting messed up when lists are introduced

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>

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.

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

Multiline text highlight css in email design

I'm trying to create a highlight effect for a headline using css, see css-tricks article for background.
Here's a stackoverflow question that has solutions that work in the browser using box-shadow declaration, but email clients like Gmail don't support a lot of the newer CSS3 features.
Is there a workaround for doing CSS-based text highlighting that works and can be used in email templates?
When working with HTML email, you have to go really old-fashioned with your code. I don't think you can give a block of inline text a background color, but you can give a box like a table cell a background color fairly reliably.
The following text is highlighted: <table><tr><td bgcolor="eeff00">Highlighted Text</td></tr></table>
This probably won't even be highlighted in email clients: <span style="background-color: #eeff00">Highlighted Text</span>
An old trick could be using double texts (adjust the shadow color to fit your requirements).
Updated, with opacity, which might work and will give it even more "shadow-ish" look
<h1 style="text-align: center">
<span style="font-family: Verdana; position: relative">
<span style="position: absolute; left: 2px; top: 2px; width: 100%; color: #f00; opacity: 0.5; ">
Service Request Created
</span>
<span style="position: relative">
Service Request Created
</span>
</span>
</h1>

css to visualize that element is clickable (like a tab)

I want the user to see that the text is clickable. As of now I have changed cursor to a pointer, and added an underline to the text on the <span> element, I have also tried different borders and highlights on text (basically changed colors), but I was unable to make that look good.
I am using panel panel-primary from bootstrap, and I know they have have a Tabs component also, but I can not use that due to other reasons.
Simple plunker
<div class="panel panel-primary" >
<div class="panel-heading"> SomeHeading <span style="text-decoration: underline; cursor: pointer" >Tab1</span> <span style="font-size: 8px;" class="badge">1</span> / <span style="text-decoration: underline; cursor: pointer">Tab2</span> <span style="font-size: 8px;" class="badge">3</span>
</div>
<div class="panel-body">
Some content here
</div>
What more can I do to make the user understand that these are actually tabs?
I want the user to see that the text is clickable. As of now I have
changed cursor to a pointer, and added an underline to the text on the
element.
These are both pretty standard conventions. Other visual cues (usually activated on :hover) might include:
bolding the text with font-weight:bold
changing the color of the text
changing the background-color of the text
changing the border of the text
You might even:
give the text a text-shadow
give the text's containing element a box-shadow
In addition to what Rounin said, you could also add a border:
border-style: groove; border-color: #3377ff;
See the new plunk.
EDIT: I realized he also mentioned borders.