I'm trying to get the buttons in my mobile email to stop stacking on top of each other so closely. It looks good in desktop view, but mobile cuts out any space between the buttons.
I've tried adding padding-bottom and margin-bottoms, but they end up making the mobile buttons bigger but still touching.
.buttonstyles {
font-family:arial,helvetica,sans-serif !important;
font-size: 16px !important;
color: #FFFFFF !important;
padding: 10px !important;
}
This code is currently making the buttons touch.
The buttons currently
I think it will work or else plz share your code..
css
.buttonstyles {
display: inline-block
}
Please Try with this code.
.buttonstyles {
background:#000;
color: #FFFFFF;
padding: 10px ;
margin:10px;
float:left;
border:none;
}
<button class="buttonstyles">Demo1</button>
<button class="buttonstyles">Demo2</button>
Related
community,
I have a question regarding the CSS styling of MailChimp's "Submit"-Button. So far I managed to change the colour and font of my button using CSS.
I wanted to change the padding and margin of my Submit button, but after trying different "margin/padding"-combinations and just experimenting inside Google Chrome's DevTools I cannot find a solution to this: It seems like the button is cut off if I increase the padding.
Screenshot 1 is how it looks right now, screenshot 2 is what happens if I increase the top/bottom-padding from 0 to 20px.
This is what I used in my Custom-CSS to change the font, colour etc:
#mc_embed_signup .button {
background-color: #d1e5e6 !important;
color: #000000 !important;
border-radius: 0 !important;
border: none !important;
font: 16px, bebas_neue, Helvetica,Arial,sans-serif !important;
font-weight: bold !important;
padding-left: 40px !important;
padding-right: 40px !important;
padding-bottom: 13px !important;
}
And this is the HTML for the submit button:
<div style="text-align: center !important;"><input type="submit" value="Abonnieren" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
I hope someone out there can help me with this curious issue. I would like that all buttons are the same size (for consistency) but I already struggle with changing the "read more" button for post grids. Hope I can at least adjust the submit button so it doesn't look too off. This one is just too skinny.
Thanks!
You are using the important keyword in #mc_embed_signup .button. The padding-bottom is one of them
#mc_embed_signup .button {
font-weight: bold !important;
padding-left: 40px !important;
padding-right: 40px !important;
padding-bottom: 13px !important;
}
This is why when you set padding-top and padding-bottom the text is cut-off. Simply, the padding-bottom is not applied. You can either git rid of the important keyword, which I strongly recommend, or use the important keyword with additional specificity rules.
Edit
After removing the important keyword, you can set a height for your button as follows
#mc_embed_signup .button {
height: 30px;
}
Try to experiment whether you need the !important keyword for it. Try to avoid it as possible
You can also use padding-top and -bottom; for instance as below. Make sure to use auto height. Otherwise, you will need to set uneven values for your paddings; i.e 20 for top and 40 for bottom
#mc_embed_signup .button {
padding-top: 17px;
padding-bottom: 17px;
height: auto;
}
Update addition css with this:
#mc_embed_signup .button {
height: 45px !important;
}
Basic css question here.
Every time I press "Check all", the button populates with the names from a list (which is fine).
The issue is: The button width itself expands and gets bigger. I want to keep it fixed. Furthermore, how can I set a limit to the number of list items it can show? So for example, if there are a lot of items, after "test 5", a "..." should appear.
By the way: this is all in my custom.css, .btn-default is actually from bootstrap, but I wanted to change some things in my multi select-class. I changed caret margin because the caret was right beside the text, I wanted it to be to the VERY right, maybe that's what's messing everything up??
custom.css :
.sv-manage-multiselect-dropdown {
.btn-default {
background-image: none;
border: 1px solid #ADA9A9;
padding: 6px 8px 1px 8px ;
}
.btn .caret {
margin-left: 160px;
margin-bottom:5px;
}
}
Html:
<td class="col-xs-2">
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="Mylist.names"
options="Names.name for link in Mylist"
multiple="true"
ms-selected="{{Mylist.names}}"
</am-multiselect>
</td>
Before:
After:
Have you tried using max-width in your css?
max-width: 40px;
For example.
Hope this helps!
I looked in angular-multiselect/src/multiselect.tmpl.html, adding this css should work, 10px is just for the example, put width and height of the checkmark, like this <i> will fill same place even if it's void:
.sv-manage-multiselect-dropdown {
ul.dropdown-menu > li > i{
display: inline-block;
min-width: 10px;
min-height: 10px;
}
}
I have a button on a form;
<button type="button" class="button" onclick="validate_form_newsletter_wide( form )"><img src="index_htm_files/btn_newsletter_wide.png" alt="Send"></button>
It styled using;
<style>
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
#form_newsletter_wide .button {
position:relative;
float: right;
cursor:pointer;
border: 0px;
padding: 0px;
margin: 0px;
margin-top: -1px;
z-index:100;
}
</style>
When clicked in Firefox nothing about the button changes, in Chrome I get a highlight border around the button which I can live with but in IE it's more of a pressed effect where the button almost seems to move down and right. Is there anyway to prevent this?
It's a browser behaviour, a simple solution is to use a link tag instead of button (since you're calling a javascript function).
<img src="myimg"/>
If you still want to use the , I've found that there are some characteristics on each browser (in a simple debug):
Chrome adds outline and padding
Firefox adds a whole lot of stuff with the standart button border
IE messes with the inner text position
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
<button type="button" class="button"><span>Buttom or Image</span></button>
<style>
button,
button:focus,
button:active{
border:1px solid black;
background:none;
outline:none;
padding:0;
}
button span{
position: relative;
}
</style>
Pen
I read once how to create cross-browser rounded buttons with shadow using images, I lost my bookmarks unfortunately that's why I ask does anybody remember the technique.
There is left side picture i.e
And then very wide body image which ends up with right curved border/shadow like this :
So at the end you end up with one button which can be used with multiple sizes? I was googling this, but it seems noways everyone use css without images.
Does anybody knows how this technique is called or can refer me to the link? or give me code example, I'd appreciate any of those
When using an image for the start and one for end of the button, these technique is called "sliding doors" and there are myriads of search results with any search engine…
For an introduction read the A List Apart article: http://www.alistapart.com/articles/slidingdoors
But as Neurofluxation asked you in the comment above: Why the hell would you do that years after we have multiple other methods of styling a button in CSS? The A List Apart article for example is from 2003 - which is an age in Internet terms.
This technique is a variation of the "Sliding Doors" technique:
http://www.alistapart.com/articles/slidingdoors/
http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
Basically you use markup like this:
<button><span>Text</span></button>
Then style the span with the edge image to the side, overlapping the main background image of the parent element. Something like this:
button {
background:url(main-image.png) top right no-repeat;
border:0;
padding:0;
width:80px; /* with only 1 "door", you might need to set a width */
/* other resets may be necessary */
}
span {
background:url(left-door.png) left top no-repeat;
}
button, span {
height:37px; /* height of your sprite */
display:block;
}
Demo: http://jsfiddle.net/Kqs3m/
Your results may vary depending on your sprites and the natural width of the content.
Here's the technique which I think you are looking for (using the same images you attached):
HTML:
<a href="#" class="button">
<span>Small</span>
</a>
<a href="#" class="button">
<span>Large button</span>
</a>
CSS:
.button {
background: url('http://i.stack.imgur.com/htUHL.png') no-repeat left top;
padding-left: 9px;
height: 37px;
display: inline-block;
text-decoration: none;
color: #555;
text-shadow: 0 1px 1px #FFF;
font-family: sans-serif;
font-size: 0.8em;
}
.button span {
background: url('http://i.stack.imgur.com/ID6nO.png') no-repeat right top;
display: inline-block;
height: 37px;
padding: 5px 12px 5px 3px;
}
.button:hover span {
color: #333;
}
Link to the demo: http://jsfiddle.net/v284q/
Using CSS properties instead of images can make your applications faster.
In this case you could just use: Border-Radius, Box-Shadow combined with a gradient background.
Here you can find a good Gradient Editor:
http://www.colorzilla.com/gradient-editor/
How to use Border-radius and Box-shadow:
http://www.css3.info/preview/rounded-border/
http://www.css3.info/preview/box-shadow/
I have an HTML / CSS project on JS Fiddle with several issues jsfiddle ZyBZT.
The <DIV class"footer"> is not showing up at the bottom.
The background image does not display: url('http://i.imgur.com/z5vCh.png')
The Sprite Images are not showing up in the <UL> list.
Originally, the Sprites were working, and nothing I had added has changed any of the Sprite CSS code, which is as follows:
#nav {
list-style-type:none; /* removes the bullet from the list */
margin:20 auto;
text-shadow:4px 4px 8px #696969; /* creates a drop shadow on text in non-IE browsers */
white-space:nowrap; /* ensures text stays on one line */
width:600px; /* Allows links to take up proper height */
}
#nav li {
display: inline-block;
text-align: center;
width: 192px;
}
#nav a {
background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
display: block;
height: 50px; /* This allowed the buttons to be full height */
color: Blue;
}
#nav a:hover {
background-position: 0 -50px;
color:Red;
}
#nav .active, a:hover {
background-position: 0 0;
color: Black;
}
#nav .active:hover {
background-position: 0 0;
color: Black;
}
#nav span {
position:relative;
text-align: center;
vertical-align: middle; /* This doesn't seem to work (???) */
}
Sometimes, the background image works, but other times it does not.
Lately, I have been trying to get this FOOTER div to work, and now it appears that much more of it is messed up.
How am I supposed to be able to tell when one piece of CSS breaks another piece of CSS? How do I tell when something tries to execute the CSS and there is an error?
The best you can to is to
Use Firebug or the browser developer tools of your choice to see what classes/styles the browser is applying, and the effects, and
Study the HTML standards to make sure you're coding them correctly; keep in mind that they are often counter-intuitive. MDN has some excellent articles on HTML layout, vertical alignment and many other HTML/CSS/Javascript topics.
Fixed the footer problem easy enough:
div.footer {
bottom:0px;
position:fixed;
text-align:center;
}
However, this does NOT answer the main question: How to Troubleshoot!
Best tool I've found for this is Firebug, it's still better than Chrome's tools. When you inspect an element it will show you the hierarchy of applied styles and those styles that have been overridden. (with strikethrough)
This is your best tool to see what is happening.
I think you're having z-index issues and the text-shadow is causing issues.
Removed the z-index:-1 and the text-shadow and the background behaves.