On Stack Overflow, I can use markup for keyboard shortcuts like <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>F2</kbd> for Ctrl+Alt+F2.
Is something like this also possible in Confluence? If yes, how?
I haven't tried it yet, but it seems the free official plugin Markdown Macro for Confluence will help you to use any Markdown syntax.
Two solutions found on Atlassian's forums:
The first is to
Paste table row <kbd>⌘</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd> in the Confluence's shortcuts
The second is to add your own CSS to the page, which is not ideal:
This is done with a combination of CSS and HTML.
Start with a CSS macro (or edit the Look and Feel):
kbd > kbd {
box-shadow: 0 1px 0 rgba(0,0,0,.2);
border-radius: 3px;
padding: .1em .7em;
border: 1px solid #ccc;
font-family: Arial, sans-serif;
background-color: ;
display: inline-block;
margin: 0 .1em;
white-space: nowrap;
font-size: 1em;
}
Then wrap the key letters and words in HTML:
<kbd><kbd>K</kbd></kbd>
I am having an issue making my a drop down menu visible over the content below it. I have tried using the overflow: visible; command but it doesn't seem to work so I presume there is some sort of conflict going on. The other issue I have encountered is when you move down the menu to click on the options it closes once you get to the the point where it is not visible. I presume though that both issues are interlinked.
JSfiddle: http://jsfiddle.net/aXcje/
#menu {
height: 44px;
font-family: otto;
font-size: 42px;
word-spacing:15px;
text-shadow: 0px 0px 1px #000;
border:1px solid #1a1a1a;
margin-bottom: -1px;
margin-top: -1px;
background-image: url("images/menu.png");
background-repeat:repeat-x;
box-shadow: 2px 2px 2px #000000;
}
Website: http://www.debbie.travismoore.co.uk/
Any help is appreciated,
Cheers,
Travis
Resolved by using the z-index property on the drop down menu
I am getting a odd effect (currently in chrome). I have created my own overlay dialog box. which has a semi transparent background sitting on top of my website with a box on top of that. the top of the bar as you can see has a black background. The main part of the box is white thought.
Its not the easyist to see but it is annoying me.
The white is showing through from behind. (I know as if i change it to red it changes colour) Which you can see in the top right hand corner of the screenshots, just above the "X"
Both the header and the box has a border radius 3px
.blockUI .overlay {
background: #f00;
border-radius: 3px;
margin: 0 auto;
padding: 10px;
overflow: hidden;
position: relative;
top: 20%;
text-align: inherit;
width: 600px;
z-index: 10009;
}
blockUI .overlay h1 {
background: #000;
border-bottom: 2px solid #F48421;
border-radius: 3px 3px 0 0;
color: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: -10px;
padding: 10px;
}
Since overflow: hidden; along with border-radius seems to cause some rendering inconsistencies in some engines (take a look at this), one should use border-radius on both the parent and the child elements to achieve rounded corners.
As you have noticed, you still get some wierd results with extra pixels "shining" through. Just reduce the border-radius of the child (or the other way round) to compensate this.
blockUI .overlay h1 {
border-radius: 2px 2px 0 0;
}
I had same problem. But I solved.
.blockUI .overlay {background:#000;}
and remake some!
You should try on the parent div:
-webkit-background-clip: padding-box;
Finally fixed this completely by adding this on parent and child divs.
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;
I use framesets (I know, that is very very bad :)) and that works for me, but I have one little problem: the frameset does not allow me to see the dropdown box that I have made. It just shows one list item and the other 4 items are invisible. If I enlarge the frameset, then it will show up, but that is not a solution because the site won't be the way I want it to be (it goes to the bottom).
This is the frameset: frameset id="f" border="0" rows="50" and this is the css of the dropdown menu:
.dropdown .dropdown-menu {
background-color: #ECECEC;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
display: none;
float: left;
left: 0;
margin-top: -1px;
min-width: 150px;
position: absolute;
top: 100%;
z-index: 1000;
I have tried overflow etcetera, but it didn't work. Can someone help me out, please?
It's obvious that this happens, because this is a frameset we are talking of.... A thing used before Christ...
So yeah, my answer is solved by my own.
I have a few buttons on my webpage in different colors. I have one class for the shape of the button, and then a few classes that give them colors.
.button {
font-family:"Helvetica Neue W01 75 Bold", Helvetica, Arial, Sans-serif;
text-decoration: none;
white-space: nowrap;
color: #333;
padding: 13px 15px;
display: inline-block;
font-size: 1em;
font-weight: bold;
text-align: center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
a.button {
color: #333;
}
.black.button {
background-color: #dedede;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3));
background: -moz-linear-gradient((linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=##EFEFEF, endColorStr=##D3D3D3);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFEFEF, endColorstr=#D3D3D3)";
-webkit-appearance: push-button;
}
.black.button:hover {
background: #E2E2E2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#E2E2E2, endColorStr=#E2E2E2);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E2E2E2, endColorstr=#E2E2E2)";
}
.orange.button {
background-color: #ffaa44;
background: -webkit-gradient(linear,left bottom, left top, color-stop(0.22, rgb(255,144,9)), color-stop(0.81, rgb(255,170,68)));
background: -moz-linear-gradient(center bottom, rgb(255,144,9) 22%, rgb(255,170,68) 81%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffaa44, endColorStr=#ff9009);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaa44, endColorstr=#ff9009)";
}
.orange.button:hover {
background: #ff9009;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ff9009, endColorStr=#ff9009);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff9009, endColorstr=#ff9009)";
}
I use them like:
<a class="orange button" href="#">Click Me</a>
This works in Chrome and Safari but does not work in Firefox12 (and IE). All I see is a white box with 'ClickMe' (So probably the .button is applied, but not .orange)
From what I read, this is supported in Firefox. But I cannot figure what is wrong in my stylesheet.
When I do an 'Inspect Element', Firefox shows the class as a.orange.button, but in the Styles tab, it doesnot display these classes. It is picking my stylesheet as the rest of the page is displayed okay.
What am I missing here?
It seems to work if you remove invalid CSS code. I'm wondering if you have these exact lines in your original CSS code (with ... and unclosed brackets - which should cause the problem):
background: -webkit-gradient(...
border-radius:...
Cleaned up jsFiddle Demo
The problem is surely not with multiple classes. They work fine in every modern browser.
UPDATE: I found the issue based on this jsFiddle. It is this declaration:
.black.button {
background: -moz-linear-gradient((linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3));
}
You have one more opening ( than needed right after -moz-linear-gradient.
Correct version (jsFiddle):
.black.button {
background: -moz-linear-gradient(linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3));
}
Try using something like the following
background: -moz-linear-gradient( top left, white, black );
-webkit-gradient is for webkit browsers -- like Chrome and Safari; Firefox is not a webkit browser.
see http://jsfiddle.net/Wfxym/
Some notes found # linear gradients and especially Cross-browser CSS gradient (details on the Firefox implementation can be found on MDN: https://developer.mozilla.org/en/CSS/linear-gradient)