We Keep Coding

Trying to fix height of element so it highlights correctly when hovered

Hey so I have a bunch of tabs made up of like this:
<li><h6>Tab1</h6></li>
<li><h6>Tab2</h6></li>
<li><h6>Tab3</h6></li>
<li><h6>Tab4</h6></li>
<li><h6>Tab5</h6></li>
<li><h6>Tab6</h6></li>
There are all horizontally aligned with display: table-cell;
The problem is that some of them have text that wraps onto a second line, and the hover state when I mouse over an item isn't going to the full height of the row.
You can see the table I'm refering to on this site here: http://perennial.chkpt.com.au/invest-with-us/

You can add :hover style on li instead of a.
Example: apply this style for the website you provided
li.ui-state-default.ui-corner-top:hover {
background: red;
}

Centering images and text in a div

I have been having some trouble centering some items on my website.
The items in question are in the passphrase generator (images and text elements in the dark box). I have tried the usual margin:auto, all the different display properties, text-align, align-self, align-content and align-items. None worked.
I was also wondering if anyone knew how we could get the text element under our images isntead of to the right, this is the code used for the generator.
All help is appreciated

A p tag is a block element, so the default width is 100%. This is why you have one element per line
#passphraseBilder {
text-align: center;
display: block;
}
#passphraseBilder p {
display: inline-block;
}
Turn the p tag into inline or inline-block, and it will work ;-)
Have a look to the difference between block and inline: https://www.w3schools.com/html/html_blocks.asp

Try this:
#passphraseBilder {
display:inline-block;
width:100%;
}
Note: I have just added the properties which you should add or overwrite. Existing properties has to be there.

Wordpress drop down menu styling

I have recently started learning WordPress and have started creating a WordPress website.
I have created a drop down side navigation for one of my pages (using the menu options given in WordPress, and added it " ") and am having a little trouble styling it the way I want.
Since it is a drop down menu, I would like to style the parents of the navigation with a grey border (but not the children) if I style the li in css, then all li's are surrounded with a border (even the children). I know this is because they are also li's, but is there a class assigned to the parents (or a way I can assign a class to them) so I can style them separately?
http://jsfiddle.net/twLj3eba/
The fiddle is basically a visual example (this is not being used by me). I would like the parents to have a border around them, and the children to not have anything around them.
.sideNavi a{
color:#666666;
}
.sideNavi li ul{
display: none;
}
.sideNavi li:hover ul{
display: block;
}
The css code is my code
thank you

Create a class for the parent li in the same way as you have created a class for the ul. Assign this class to all your parent li.
For example:
<li class="parent-li">
Then assign styles to that class in your css.
.parent-li {border: 1px solid #222; display: inline-block;}
Unless I've miss understood what you're trying to achieve it should be a simple solution. Hope that helps.
Edit: I've just seen your comment mentioning you're using the edit menu screen within Wordpress. You should be able to assign custom classes to the menu items. If you can't see the option go to the screen options drop down tab at the top right and enable css custom classes under advanced properties. You will still need to create the css class either by editing your theme style sheet (not recommended) or by creating a child theme.

.parent > li{
border: solid 1px #000;
}

Show div on hover issue

In this fiddle you will fill when i hover on "action" a dropdown is showed.
The problem is when we see the last item it goes below the scroll and it is not seen.
in .scrollable class i have used the position:relative;
.scrollable
{
overflow: auto;
height: 300px;
position:relative;
width:100px;
}
and the child class "drop" has the position:absolute;
i dont want to change the position:relative of .scrollable class and i want the .drop element to comeout of the scrollable on hover and .drop should not be shown below the scroll;
here is the fiddle : http://jsfiddle.net/napper7/XPxsx/15/
THanks in advance!!

here is a working code,i added a bit of js to get the current cursor position
$('.navItem').each(function() {
$(this).hover(function(e) {
$(this).find(".drops").css('left',e.pageX-20);
$(this).find(".drops").css('top',e.pageY);
}, function(e) {});
});​
http://jsfiddle.net/XPxsx/43/

.scrollable
{
position:relative;
height:300px;
width:100px;
}​
I think your best bet is to drop off the overflow behavior. As far as I know, it is not possible to display nested divs outside their parent when it has an overflow value different from visible. Ever other values clip the outside box content of some sort (either by adding a scrollbar or by hiding completely the content)
I edited a jsfiddle that does what you want but without a scrollbar :
http://jsfiddle.net/XPxsx/42/
And here is some documentation on overflow behavior :
http://www.w3.org/TR/CSS21/visufx.html
Anything out of this, will be using js to display the content in a different place DOM wise.
Also, as a more general opinion : it is good to use sass (i guess from css indentation), but even better to order your selectors in a meaning order, that would be from the most general to the most specific (such as html, then body, then div.. in your case .scrollable, then .actionTools, then .navItem..)
hope that helps

tabs not opening on html webpage jsfiddle

I have made a tabbed menu: http://jsfiddle.net/zWMYp/
However when I add it to my webpage, it does not open the tab content like above: http://jsfiddle.net/vL5VJ/
I am unsure what is interfering with the tabs.

.css-tabs ul.noint11_menu li > div {
z-index: -1;
}
is the culprit. remove it (and add color: #fff) and it will work
http://jsfiddle.net/vM5VJ/2/

two issues here in your code
1) the z-index in the div under the a href have z-index of -1 thus it's behind everything else
2) the color of the text is almost the same as background
i've changed this css class as an example, you can use other methods such as define a css color for the div text;
.css-tabs ul.noint11_menu li:target > div
{
display:block;
z-index:1;
color:white;
}
here is the updated jsfiddle link
http://jsfiddle.net/vM5VJ/3/
my advise is to use google chrome to inspect the element, and incrementally remove or add css to figure out where is the problem. I never liked looking at the whole code to figure out a very focus issue