I'm in the middle of applying inline CSS-styling to HTML for email and I'm encountering a problem that when I send a test mail, the CSS-styling partially works. Does anyone know how I can fix this problem?
Steps to reproduce:
Step 1 - applying CSS-styling to HTML in an inline way (see code below).
<div class=" product-items" style="max-width: 600px;">
<div class="button-div" style="margin-bottom: 45px; text-align: center;">
<a href="#" style="background: #F26E11; padding: 13px 24px 14px; box-shadow: 16px 20px 10px rgba(0, 0, 0, 0.01), 9px 12px 9px rgba(0, 0, 0, 0.05), 4px 5px 6px rgba(0, 0, 0, 0.09), 1px 1px 4px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); border-radius: 15px; margin: auto; color:#FFF; text-decoration: none;">
<span>Bestelling afmaken</span>
<span class="arrow-icon" style="background: #F9B788; border-radius: 50%; padding: 1px 3px;">
<img src="//app.squeezely.tech/uploads/prod/personalization/63c01436e8098.png">
</span>
</a>
</div>
<table align="center" class="mcnTable product-item" border="0" cellpadding="0" cellspacing="0" width="288" style="margin-top: 10px; background: #F9F9F9; box-shadow: 9px 22px 10px rgb(51 33 42 / 2%), 5px 13px 8px rgb(51 33 42 / 5%), 2px 6px 6px rgb(51 33 42 / 9%), 1px 1px 3px rgb(51 33 42 / 10%), 0px 0px 0px rgb(51 33 42 / 10%); border-radius: 10px;">
Result:
It should look like this
but the actual result is:
When inspecting on chrome-console some inline styling seems to be removed, for example: table-tag:
Does anyone have some advice of how I can able to solve this issue?
Gmail doesn’t support box-shadow (see Can I email for details). It should by default only remove the box-shadow property. But in the case of your <table> tag, you’re using a slash notation (rgb(51 33 42 / 2%)). This makes Gmail’s parser go absolutely berserk and remove the entire corresponding inline style attribute. (You can read more about this specific issue here.) In that case, it’s safer to not use this slash notation (and preferably use an hexadecimal color).
Related
My html does not load the css style file. The preview povided by Eclipse correctly shows the changes I made in the css file. If I am loading the file with Firefox on the other hand these changes are gone. This also hapens if loaded on another machine. I emptied my cache etc. (using CCleaner). However if I load the html file with IE all changes are visible. Intrestingly this is only the case for colors.
I include the css file using the following line:
<link rel="stylesheet" type="text/css" href="./css/style.css" />
The releveant css lines:
#menubar
{ width: 920px;
height: 50px;
text-align: center;
margin: 0 auto;
background: #000099;
background: -moz-linear-gradient(#535353, #1d1d1d);
background: -o-linear-gradient(#535353, #1d1d1d);
background: -webkit-linear-gradient(#535353, #1d1d1d);
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border: 15px 15px 15px 15px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
}
The lines in html:
<div id="menubar">
<ul id="menu">
<li class="current">Home</li>
<li>Practical Information</li>
<li>People</li>
<li>Programme</li>
<li>Contact Us</li>
</ul>
</div><!--close menubar-->
Based on the comment:
I have changed the color to blue #000099 but it remains in the original grey color that was there before
You have 4 rules to set the background colour.
background: #000099;
background: -moz-linear-gradient(#535353, #1d1d1d);
background: -o-linear-gradient(#535353, #1d1d1d);
background: -webkit-linear-gradient(#535353, #1d1d1d);
Each one is applied in turn and ignored if the rule isn't supported by the browser.
You are only changing the first rule, which is the only rule supported by IE.
Since Firefox supports -moz-linear-gradient that continues to override the previous background colour rule, so it gets ignored.
You need to change your gradient rules too.
Note, however, that the -prefix- rules are experimental and should generally be avoided for production work and that you are missing an unprefixed linear-gradient for use in browsers which have their final implementation of the property. Support for prefixed rules will be dropped at some stage.
First, here's the dropdown/collapsible menu I've constructed.
As for what the "menu" and "menu-item" are in the preview shown in the fiddle -- Channels, Search, and About Us are menus, while the ones that drop-down/slide-out when you click on the menus are menu-items.
SCREENSHOT:
I am using position: absolute; on the menu-items (.collapse), and position: relative; on the menus.
The Relevant code (more in the fiddle):
/* Menu: <li class="float-left top-menu">... */
.top-menu {
position: relative;
}
/* Menu-Item: <div id="channels-menu-item-container" class="collapse">... */
.collapse {
position: absolute;
width: 570px;
z-index: 1000;
padding: 0;
margin: 0;
color: #222;
background-color: #fff;
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.12);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.12);
overflow: hidden;
}
Is it possible to achieve the same functionality using position: relative; on the "menu-item" (.collapse) as well?
NOTE: Before you submit an answer with a fiddle, please do make sure that the menus in both fiddles (yours and mine) are functioning the same by clicking on each menu and comparing (so as to confirm that no menu-items are misplaced due to change in positioning).
You may add extra bits of HTML and CSS, of course.
And yes, I tried for hours in vain, and wanted to see if it's at all possible.
How about something like this:
Remove the width from .collapse.
Remove float from the columns, change to inline-block.
Change white-space to nowrap.
Html:
<div class="in collapse" id="channels-menu-item-container" style="height: auto;">
<div id="channels-menu-item-wrapper">
<ul class="channel-column" id="nav-channels">
<!-- ... -->
</ul>
<ul class="channel-column" id="nav-topics">
<!-- ... -->
</ul>
<ul class="channel-column" id="nav-editions">
<!-- ... -->
</ul>
<div class="aahans"></div>
<div class="clearfix"></div>
</div>
</div>
Css:
.collapse {
position: absolute;
min-width:200px; /*for the seach box*/
/* ... */
}
#channels-menu-item-wrapper {
border-bottom: 4px solid #259;
white-space:nowrap;
}
.channel-column {display:inline-block; vertical-align:top;}
You may also want to reset the white-space value in each .channel-column.
Result: http://jsfiddle.net/kobi/fxSYT/1/embedded/result/
I am trying to link buttons using a button tag that is set to show a button made with CSS3.
The button works and display properly in Chrome and Safari but in FireFox the button shows but it doesn't link, it also messes up the style of the page a bit.
I know you use to not be able to use the
The link to the page is here http://pt11.com/index2.php?x=videos.html
Here is my HTML:
<head>
<link rel="stylesheet" type="text/css" href="videos.css" />
</head>
<br>
<div class="vidholder">
<div class="textbox">
<h2>Eythor Bender at TEDMED 2011</h2>
</div>
<div class="textbox2">
Eythor Bender's Ekso Bionics makes powered, wearable robots known as "exoskeletons" that boost human strength, endurance, and mobility. But can they help a paraplegic walk? Watch this incredible story.
</div>
<div class="img">
<img src="ted.png">
</div>
<button type="button" name="" value="" class="css3button">Watch Video</button>
</div>
<br>
</div>
Then the CSS for the button
button.css3button {
padding
margin:-3px 0px 0px 325px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ff2819 0%,
#ab0000);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ff2819),
to(#ab0000));
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border: 1px solid #7d0000;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}
Is there a reason that you need the button element? Why not just use
<a class="css3button">
and change your css selector to match. That would apply the styles to the anchor, remove the need for the button element, and it would work in all browsers.
I want to create a content wrapper with a left and right shadow, not a bottom shadow. This is sort of what I'm going for: http://community.mybb.com/ notice the shadow (though this uses an image, not css).
What's the best way to do this with CSS?
Your best bet is to use an image to be compatible with older browsers. For CSS you'll use box-shadow but IE9 is the first IE to support box-shadow.
That being said you'll need to use two box-shadow properties if you want to use CSS. You'll need to do two of them.
Take a look at http://css-tricks.com/snippets/css/css-box-shadow/
Also the generator at http://css3generator.com/
Here is a vague idea of what to do
<div id="leftBorder">
<div id="rightBorder">
<div id="content">Content here</div>
</div>
</div>
#leftBorder {
-webkit-box-shadow: -10px 0px 5px 0px #999999;
-moz-box-shadow: -10px 0px 5px 0px #999999;
box-shadow: -10px 0px 5px 0px #999999;
}
#rightBorder {
-webkit-box-shadow: 10px 0px 5px 0px #999999;
-moz-box-shadow: 10px 0px 5px 0px #999999;
box-shadow: 10px 0px 5px 0px #999999;
}
Alternatively you can potentially set just the border property alone bit it won't give you the nice fuzzy shadow look.
It may be tough to support below IE9 and you may need to throw in some pictures anyway. An old A List Apart article explains how to do this but it's not pretty.
http://www.alistapart.com/articles/cssdrop2/
I'm trying to create an input box with two buttons on the left and right. Here's the frankenstein monster I have so far: http://vegan.fm/clone/?p=8679
It should look like the textbox+button here: http://appsumo.com/welcome/?next=/
I've been able to get it to align sort of well, but then it seems to just get jumbled on a different OS or computer.
I've done this by obsessively tweaking the padding and margin values, but my gut tells me there's a better practice. So far, I haven't found anything with a google/stackoverflow search. Any help is appreciated. Thank you.
Update: The problem I'm having is the "height" value for the button and the input box are exactly the same, yet the button is always higher than the input box.
Here's some code:
.halfbutton {
border-top: 1px solid #f0d995;
background: #806a43;
padding: 0px 3px 0px 3px;
background: -webkit-gradient(linear, left top, left bottom, from(#d1ad51), to(#806a43));
background: -moz-linear-gradient(top, #d1ad51, #806a43);
height: 30px;
width:25px;
-webkit-border-radius: 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
And for the input box:
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input style="z-index:1999;height:30px;margin:0 -.1em 0 -.1em;border:1px solid;border-color:#a1a1a1;" size="20" type="text" name="s" id="s" value="<?php ... />
</form>
Dunno have i understood the question right.
To make it seems like in your link you need to use background img in your input form;
You may make it look like inset input form with css3
in css
#inputform{
background-color: #f7f7f7;
-moz-box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
-webkit-box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
...
}
There's a link in the comments with your code from website;
At the moment, the alignment seems ok to me (in Chrome) but there's no border on the input so it's hard to tell what's going on.
My comment though - right now you have the add'l search options as a dropdown to the left of the input field, then the "more" dropdown with add'l choices attached to the right of the input. I'd argue this doesn't follow the typical user's model of search boxes where immediately to the right of the input is the submit/options button. Maybe move the options button to the right, then float the "more" as a separate button to the right of that (or below).
Just a thought.