input#submit {
position: relative;
background: transparent;
bordeR: none;
font-family: raleway;
text-transform: uppercase;
border: 1px solid #1ba39c;
margin-left: auto;
font-size: 13px;
display: block;
color: #1ba39c;
letter-spacing: 1px;
top: -5px;
left: -1px;
padding: 7px;
padding-top: 8px;
}
As you can see on chrome mobile the text inside of input with the value post comment gets moved upwards whereas on chrome desktop it perfectly centered. What must be the issue?
I'm not 100% clear what you're asking, but see if the following CSS change achieves what you are looking for:
textarea#comment {
background: transparent;
height: 28px;
}
I think this is # line 1663 of http://tenfizz.com/wp-content/themes/tenfizz/style.css
Good luck!
Related
I created an autosuggest usting react-autosuggest, now I'm trying do design the layout. I took a css from an example which seems to work fine.
when I copied this css to my project the suggestion list completely detached from the input of the autosuggest as shown in the image below:
I also tried to move the div in the example but the list follows the input (as it should)
here is the css from codepen which I tried to use:
.react-autosuggest__container {
position: relative;
}
.react-autosuggest__input {
width: 240px;
height: 30px;
padding: 10px 20px;
font-family: Helvetica, sans-serif;
font-weight: 300;
font-size: 16px;
border: 1px solid #aaa;
border-radius: 4px;
}
.react-autosuggest__input:focus {
outline: none;
}
.react-autosuggest__container--open .react-autosuggest__input {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.react-autosuggest__suggestions-container {
position: absolute;
top: 51px;
width: 280px;
margin: 0;
padding: 0;
list-style-type: none;
border: 1px solid #aaa;
background-color: #fff;
font-family: Helvetica, sans-serif;
font-weight: 300;
font-size: 16px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 2;
}
.react-autosuggest__suggestion {
cursor: pointer;
padding: 10px 20px;
}
.react-autosuggest__suggestion--focused {
background-color: #ddd;
}
I think this css only works for the sandbox as used in the example. Especially
.react-autosuggest__suggestions-container {
position: absolute;
top: 51px;
This means that the suggestions container is always shown 51px from the top of your page. Due to other things on your page the input is probably in the way and pushed aside, since it doesn't has the position: absolute attribute.
I don't know if you're using something like a grid system or another way to manage positions of elements on your website? You might consider using that instead of defining position with pxs.
try to add this
.react-autosuggest__suggestions-container--open {
display: block;
position: absolute;
top: 51px;
width: 100%;
border: 1px solid #aaa;
font-family: Helvetica, sans-serif;
font-weight: 300;
font-size: 16px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 2;
max-height: 300px;
overflow-y: auto;
}
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;
}
}
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.
This question already has answers here:
Circle with two borders
(4 answers)
Closed 7 years ago.
I have a circle with one border, but I would like to know if there is anyway to achieve a circle with two borders of different colors. I have following CSS producing circle as follows:
.circle {
width: 20px;
height: 20px;
border-radius: 12px;
border: 1.5px solid #fff;
font-family: Cambria;
font-size: 11px;
color: white;
line-height: 20px;
text-align: center;
background: #3E78B2;
}
.circle:hover {
width: 27px;
height: 27px;
border-radius: 18px;
font-size: 12px;
color: white;
line-height: 27px;
text-align: center;
background: #3E78B2;
}
Here is link to jsFiddle
You could see currently it has some white border. I would like to add another border on top of white border.
Please let me know if you have any ideas/suggestions.
Hi u can make this also :
.container {
background-color: grey;
height: 200px;
padding:10px; // ADD THIS ALSO
}
.circle {
width: 20px;
height: 20px;
border-radius: 12px;
border: 1.5px solid #fff;
font-family: Cambria;
font-size: 11px;
color: white;
line-height: 20px;
text-align: center;
background: #3E78B2;
box-shadow: 0 0 0 3px #002525; // JUST ADD THIS LINE AND MODIFY YOUR COLOR
}
the advantage is that you can also put a blur effect, changing like this:
box-shadow: 0 0 3px 3px #002525;
If I understand you correctly, I think you're looking to do something along these lines: http://jsfiddle.net/QCVjr/1/
.circle {
width: 20px;
height: 20px;
border-radius: 12px;
border: 1.5px solid #000;
font-family: Cambria;
font-size: 11px;
color: white;
line-height: 20px;
text-align: center;
background: #fff;
position: relative;
z-index: 1;
}
.circle:before {
position: absolute;
right: 2px;
top: 2px;
left: 2px;
bottom: 2px;
content: '';
background: #3E78B2;
border-radius: 25px;
z-index: -1;
}
.circle:hover {
width: 27px;
height: 27px;
border-radius: 18px;
font-size: 12px;
color: white;
line-height: 27px;
text-align: center;
background: #fff;
}
You'll notice that I took your original background color and added it to the :before pseudo-element, moved the #fff to the background, and made your other border color (in this example, #000) the border color of the original element. Both z-indexes are required to get the right layering.
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.