This submit button should be rounded on the left side, and pointed on the right side. It's working in non-ie browsers, but in IE9, it is not working.
If I look at the styles in the developer tools, the .flat-button:after rule has everything crossed out, as if it is superseded by something. What?
<button type="submit" class="flat-button">Submit</button>
<style>
.flat-button {
float: left;
position: relative;
border-top-left-radius: 5px;
-moz-border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border: none;
padding: 0 12px;
margin: 0 3px 3px 0;
outline: none;
cursor: pointer;
color: white;
font-family:'Trebuchet MS', Arial, helvetica, Sans-Serif;
font-size: 14px;
font-weight: bold;
font-style: italic;
text-decoration: none;
border-collapse: separate;
height: 26px;
line-height: 26px;
background: #5191cd;
}
.flat-button:hover {
background: #1c3f95;
}
.flat-button:after {
position: absolute;
content: ' ';
height: 0;
width: 0;
left: 100%;
border: 13px solid transparent;
border-left-color: #5191cd;
}
.flat-button:hover:after {
border-left-color: #1c3f95;
}
</style>
After playing around for a while, I found a simple fix for IE9.
http://jsfiddle.net/thirtydot/BWC9q/10/
All you have to is add overflow: visible to .flat-button.
Related
There's an element on my page that's visible in Chrome but disappears in Firefox even though it's using the tinymce library that clearly intended it to be visible.
The element is the button in:
<div class="mce-reset" role="application">
<div id="mceu_17-head" class="mce-window-head">
<div id="mceu_17-title" class="mce-title">Add Parshan Link</div>
<button class="mce-close" aria-hidden="true" type="button">×</button>
<div id="mceu_17-dragh" class="mce-dragh"></div>
</div>
...
and it doesn't help to remove the setting aria-hidden="true" (though I don't know why it's there). Some of the relevant CSS is:
.mce-window-head .mce-close {
position: absolute;
right: 15px;
top: 9px;
font-size: 20px;
font-weight: bold;
line-height: 20px;
color: #858585;
cursor: pointer;
height: 20px;
overflow: hidden;
}
.mce-window-head .mce-close {
position: absolute;
right: 15px;
top: 9px;
font-size: 20px;
font-weight: bold;
line-height: 20px;
color: #858585;
cursor: pointer;
height: 20px;
overflow: hidden;
}
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
margin: 0px;
padding: 0px;
border: 0px none;
outline: 0px none;
vertical-align: top;
background: none repeat scroll 0% 0% transparent;
text-decoration: none;
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
text-shadow: none;
float: none;
position: static;
width: auto;
height: auto;
white-space: nowrap;
cursor: inherit;
line-height: normal;
font-weight: normal;
text-align: left;
box-sizing: content-box;
direction: ltr;
max-width: none;
}
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
margin: 0px;
padding: 0px;
border: 0px none;
outline: 0px none;
vertical-align: top;
background: none repeat scroll 0% 0% transparent;
text-decoration: none;
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
text-shadow: none;
float: none;
position: static;
width: auto;
height: auto;
white-space: nowrap;
cursor: inherit;
line-height: normal;
font-weight: normal;
text-align: left;
box-sizing: content-box;
direction: ltr;
max-width: none;
}
button, input[type="submit"], input[type="button"] {
background: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6) no-repeat scroll 0 0 #fafafa;
border-color: #ccc #ccc #bbb;
border-radius: 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
color: #333;
cursor: pointer;
display: inline-block;
font-size: 13px;
line-height: 18px;
padding: 4px 10px;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
I found that if I add
padding: inherit;
to the element's style, then the element is always visible, but with improper padding.
I also see that the CSS is getting loaded twice which is not proper, but might not be what's causing the problem.
Can anyone please tell me what's causing the element to become invisible (It's there and can be clicked on but I can't see it)? To see the problem, please go to the page, click on the words "agreeing with I.B.", then click on the "Parshan" button in the toolbar that appears above the text. There is a button at the top right corner of the dialog box which I can't see in Firefox (latest release: 37.0.2).
Also note: When I inspect the element via Firefox, the × often appears immediately.
I'm running on Windows 8.1 64 bit, but the problem is also sometimes seen on Windows 7.
Thanks a lot!!
In the end, the following LESS caused the X to appear and in the right place, though I guess that it's just a workaround, since I still don't know what's causing the problem:
.mce-window-head .mce-close {
padding: inherit;
box-shadow: none;
.mainContainer.ltr ~ div & {
top: 0px;
/* #noflip */ right: 0px;
}
.mainContainer.rtl ~ div & {
top: 0px;
/* #noflip */ left: 0px;
}
}
I am coding a button with html5 and css3. Here are how it looks in different sizes:
You can see the icons are not in the middle. I know why it happens. But how can I set the icons in middle? Here is my code:
<i class="icon">a</i><span>start</span>
CSS:
.blue-pill {
display: block;
text-decoration: none;
width: 135px;
height: 50px;
margin-bottom: 15px;
position: relative;
background-color: #002032;
border: none;
color: #FFF;
text-transform: uppercase;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
font-size: 14px;
padding: 0;
border-radius: 50px;
cursor: pointer;
z-index: 2;
text-align: center;
line-height: 50px;
-webkit-box-shadow: 0px 5px 0px #1488ae;
-moz-box-shadow: 0px 5px 0px #1488ae;
box-shadow: 0px 5px 0px #1488ae;
}
.blue-pill .icon {
display: inline-block;
margin: 0 5px;
color: #e57125;
font-size: 20px;
}
.blue-pill span {
display: inline-block;
}
.blue-pill.centered {
margin-left: auto;
margin-right: auto;
}
.blue-pill.inline {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
I am using icon fonts for icons. Here is what I want:
add vertical-align:middle to .blue-pill .icon and .blue-pill span
Example
Working on this mobile page:
http://mockup.comule.com/ (may contain pop-ups!)
Currently only working on the mobile aspect. When in the mobile view, the yellow menu 'Hamburger' icon is shown. I copied its CSS from elsewhere. Before it was used, the word 'Menu' was in its place. I didn't remove this word - the icon replaced/covered it.
The html markup still shows the word 'Menu' as being present:
Menu
The newly-added CSS:
.handle {
background-color: #990000;
font-size: 0;
line-height: 0;text-align:right;
padding: .75rem .5rem;
display:block;
}
.handle:after {
content: "";
border-color: yellow;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
height: 4px;
width: 2rem;
}
What I want is the menu icon to appear on the right-hand-side of the bar and the word 'Menu' to re-appear on the left.
What needs to be changed in order for this to happen?
Thanks in advance.
"Menu" written on left and menu icon on right, for this try following:
.handle:after {
content: "";
border-color: yellow;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
height: 4px;
width: 2rem;
float: right;
margin-top: -4px;
}
.handle {
background-color: #990000;
text-align: left;
padding: .75rem .5rem;
display: block;
line-height: 1.5em;
text-transform: uppercase;
font: 90%/1.3em Arial, Helvetica, sans-serif;
color: white;
font-size: 1em;
}
And for "Menu" on right and icon on left, try this:
.handle:after {
content: "";
border-color: yellow;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
height: 4px;
width: 2rem;
float: left;
margin-top: -4px;
}
.handle {
background-color: #990000;
text-align: right;
padding: .75rem .5rem;
display: block;
line-height: 1.5em;
text-transform: uppercase;
font: 90%/1.3em Arial, Helvetica, sans-serif;
color: white;
font-size: 1em;
}
Also just to inform, I am not sure about the "margin-top: -4px" in ".handle:after", it would be either -4px or -18px, try it out and let me know which works.
I'm styling some and my add to cart buttons look fine but I'm trying to create circular buttons for my wish lists and I'm still seeing grey behind them. I'm thinking this might be the browsers' default styling taking over but I'm not sure, has anyone ever seen something like this?
The larger "add to cart" button looks perfect. It's so weird, here's my code and a pic
.button {
color: #fff;
background: #a4cd45;
border: 1px solid #8bb43f;
padding: 10px 20px;
font-size: 135%;
margin: 0 auto;
transition: background 0.2s cubic-bezier(0.86, 0, 0.07, 1);
border-radius: 4px
}
a.button:hover {
background: #8B0204;
border-color: #8B0204;
color: white
}
.wishlist {
height: 40px;
width: 40px;
line-height: 40px;
border-radius: 40px;
color: white;
background-color: #a4cd45;
text-align: center;
margin: 17px 10px 0 0;
position: relative;
z-index: 2;
font-size: 90%;
cursor: pointer;
float:right
}
In .wishlist
Insert:
border:0;
If you want it to disappear.
P.S: You had border: 1px solid #8bb43f; for the other button, which would also work fine for this!
JSFiddle
Here I've made a Sample using a tag and as well using button element. Please have a look at the DEMO.
/*---------------Using Button Element-------------------*/
button.wishlist{
background-color: #a4cd45;
border-radius:50%;
height: 40px;
width: 40px;
border:0;/*If remove this property you will see a gray background as shows on image*/
color: rgba(255, 255, 255, 0);
display:block;
margin: 17px 10px 0 0;
position: relative;
outline:0;
cursor:pointer; /*Give an Effect of Clickable*/
}
button.wishlist:hover:before{ text-shadow: 1px 1px 1px #ef8913; }
button.wishlist:before {
content: "\f08a";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: none;
color: #fff;
font-size: 18px;
position: absolute;
top: 12px;
left: 10px;
}
/*---------------Using anchor Element-------------------*/
a.wishlist{
background-color: #a4cd45;
border-radius:50%;
height: 40px;
width: 40px;
border:0;
color: rgba(255, 255, 255, 0);
display:block;
margin: 17px 10px 0 0;
position: relative;
z-index: 2;
font-size: 90%;
cursor: pointer;
float:right;
}
a.wishlist:hover:before{ text-shadow: 1px 1px 1px #ef8913;}
a.wishlist:before {
content: "\f08a";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: none;
color: #fff;
font-size: 18px;
position: absolute;
top: 12px;
left: 10px;
}
I have used following css for select tag:
select {
background-color: transparent;
border: 1px solid #A96800;
color: #fff;
font-family: "Verdana","Lucida Fax","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
font-size: 10pt;
height: 21px;
margin-bottom: 5px;
padding-left: 3px;
width: 260px;
}
This css affects the text also.
You are unable to see the options because in your css, you are setting text's color to white.
color: #fff;
Just remove the above line so that your css looks like:
select {
background-color: transparent;
border: 1px solid #A96800;
font-family: "Verdana","Lucida Fax","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
font-size: 10pt;
height: 21px;
margin-bottom: 5px;
padding-left: 3px;
width: 260px;
}
Now you can view your options as well.
Here's the updated fiddle: http://jsfiddle.net/UJMkN/1/
Hope this helps.