We Keep Coding

Transparent/Opaque Navigation Bar is Behind "div" with Class "transbox"

I started off with some text over a background image for the home page on my website. I wanted to make the letters more legible so I added an opaque box using the class "transbox" and setting it's opacity. I'm not too concerned about the text being transparent, but now the navigation bar that I have set up sits behind the "transbox" and will not let me click the links when I scroll over the "transbox" since it is sitting over the navigation bar.
I have already tried setting the z-index appropriately and even went through changing the classes and css code to make it simply a transparent container with some text, however the problem persists and new issues arise regarding container/text placement.
All I want is the navbar to be over everything so it is not covered and unusable in any situation as the user scrolls through the page. I'm curious if this is a bug with opacity, if I am using the wrong type of class, or if it is something entirely different.
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('black');
$('header').addClass('black');
$('header .logo img').addClass('black');
$('header ul').addClass('black');
$('header a').addClass('black');
}
else
{
$('nav').removeClass('black');
$('header').removeClass('black');
$('header .logo img').removeClass('black');
$('header ul').removeClass('black');
$('header a').removeClass('black');
}
})
header{
background: #35424a;
color: #ffffff;
z-index: 999;
}
header.black{
z-index: 999;
}
header a{
color: #5ff5a3;
text-decoration: none;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-transform: uppercase;
padding: 5px 20px;
font-size: 16px;
transition: .5s;
}
header a.black{
color: #ffffff;
font-size: 14px;
}
header ul{
float: right;
padding: 68px 50px 0 10px;
display: flex;
transition: .5s;
}
header ul.black{
padding: 40px 10px 0 10px;
}
header li{
float: left;
display: inline-block;
box-sizing: border-box;
padding: 1px;
transition: .5s;
}
header nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: .5s;
}
header nav.black{
background: rgba(0,0,0,.8);
color: #000000;
}
header .current a, header a:hover{
color: #ffffff;
background: #000000;
font-weight: bold;
border: 1px solid #ffffff;
transition: .5s;
}
header .logo img
{
width: 500px;
padding: 0px 50px;
height: auto;
float: left;
transition: .5s;
}
header .logo img.black
{
width: 300px;
padding: 0px 20px;
}
#showcase{
min-height: 1000px;
background: url(../img/showcaseimg.jpg) no-repeat 0 -200px;
background-size: cover;
background-position: center;
text-align: center;
color: #ffffff;
}
#showcase h1{
font-size: 55px;
color: #ffffff;
padding: 0px 20px;
}
#showcase p{
font-size: 20px;
color: #ffffff;
padding: 0px 20px 20px;
}
#showcase .transbox{
margin-top: 700px;
margin-bottom: 10px;
background-color: #000000;
opacity: 0.6;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container">
<nav>
<div class="logo">
<img src="./img/creativecs_logo.png">
</div>
<ul>
<li class="current">HOME</li>
<li>SERVICES</li>
<li>PRODUCTS</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>NEWS</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="transbox">
<h1>Custom PC solutions for anyone and everyone.</h1>
<p>Designed by engineers. Tested by enthusiasts. Check out what CreativeCS has to offer you.</p>
</div>
</div>
</section>

It work fine for me.
That being said, for z-index to work you need your elements with z-index to be positionned (MDN).
header {
position:relative;
z-index: 999;}
#showcase {
position:relative;
z-index: 1;
}
You might need to read about the stacking context.
Here header and #showcase exist in the stacking context of the root element (html) so it will work fine. Other times you might want to create a stacking context that is not as high as the root element.

Everything seams to be fine, anchors do fire as expected, you can add this script to see wich element is selected..
var x = document.getElementsByTagName("*")
for(var i = 0; i< x.length; i++){
x[i].addEventListener("click", function(e){
alert(e.target.tagName)
})
}

Strange behavior - <li> menu item moving to next line in Internet Explorer, good on other browsers

I have a simple ul/li navigation menu in my wordpress site. It looks good on Chrome, Firefox but when website opened in Internet Explorer, it behaves strangely and pushes the "Blog" menu item on next line where as it's fine and on same line on other browsers.
Link: http://construction.windoverdevelopment.xyz/construction/
I understand that this is not an upto mark question but please support with this issue - I haven't been able to resolve it. Thanks in advance
Screenshot 1: (in Chrome - whole menu in same line)
Screenshot 2: (in IE - BLOG is moved on next line)
The css for navigation is:
.main-navigation {
background: rgba(0, 70, 127, 0.95);
margin: 0;
padding: 0;
-webkit-box-shadow: 0 17px 14px -8px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0 17px 14px -8px rgba(0, 0, 0, 0.75);
box-shadow: 0 17px 14px -8px rgba(0, 0, 0, 0.75);
/*
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
*/
}
.main-navigation li {
margin: 0;
padding: 5px 0;
font-size: 16px;
}
.main-navigation li:last-child {
position: absolute;
top: 95px;
right: 30px;
background-color: rgba(255, 255, 255, 0.75);
}
#menu-main-menu>li.menu-item:last-child>a {
color: #00447C;
font-family:"Open Sans", Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 14px;
text-transform: none;
padding-top: 10px;
}
.main-navigation li ul li {
padding: 0;
}
.main-navigation li ul li:last-child {
position: relative;
top: 0;
right: 0;
background-color: transparent;
}
.main-navigation li > a {
display: block;
padding: 0 35px;
}

I think sum of child controllers width exceeds the parent div container width. You can optimize padding value for IE browser. But better way is that remove the rule that works different in IE and Chrome.
In style.css; (line: 535)
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
font-family: "adrianna-condensed-demibold",sans-serif;
font-style: normal;
font-weight: 600;
border: none;
display: none;
padding: 3px 0 2px;
text-align: center; /*This one is problematic*/
width: 100%;
}
text-align: center; rule works different in IE and Chrome you can adjust this rule.

The rule:
/*media all*/
.main-navigation li > a {
display: block;
padding: 0 35px;
}
looks to be causing your issue, adjust the right padding for that last element.
A css reset would likely have helped to resolve this, but it can be a PITA to deal with adding one late in the game.

You can try this only for IE, for specific version use some CSS hack.
.main-navigation li > a {
padding-right: 34px;
}

Text overlapping issue only in Internet Explorer

I have search box with text input and button input side by side with button inside the search box. On Internet Explorer, when we type a long string the text overlaps with the button. This works flawlessly with other browsers like firefox and chrome and text overlaps do not happen there.
HTML code:
<td style="width: 44%" align="right">
<div class="searchBox_div">
<input type="text" id="search" name="search" style="background-color: white; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-left-colors: none; -moz-border-bottom-colors: none; border-color: black -moz-use-text-color black black; border-image: none; padding: 2px 15px 0 0; border-width: 1px;">
<input type="button" id="overlay_search" title="Perform Search" style="-moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; padding: 5px 6px; border-width: 0px 0px 0px 0px;">
</div>
</td>
CSS:
.searchBox_div {
display: inline-block;
verticle-align: middle;
background: #FFF url(/themes/default/images/glyphicons-halflings-black.png) no-repeat 5px 6px;
position: relative;
}
.searchBox_div: before {
content: "";
display: block;
position: absolute;
background: url(/themes/default/images/glyphicons-halflings-black.png) no-repeat center center;
width: 24px;
left: 4px;
top: 50 % ;
margin-top: -12px;
z - index: 1;
overflow: hidden;
}
.searchBox {
height: 30px;
width: 400px;
padding-left: 30px;
font-size: 20px;
}
.searchBox_div::-ms-clear {
width: 0;
height: 0;
display: none;
}
#overlay_search {
position: absolute;
background: url(/themes/default/images/glyphicons-halflings-black.png) no-repeat center center;
width: 24px;
height: 24px;
right: -4px;
top: 50 % ;
background-position: -48px 5px;
margin - top: -11px;
z - index: 1;
display: inline-block;
overflow: hidden;
}
#overlay_cancel {
background-image: url("/themes/default/images/glyphicons-halflings-black.png");
background-position: -313px 5px;
background-repeat: no-repeat;
display: inline-block;
height: 24px;
line-height: 14px;
margin-top: 0;
vertical-align: text-top;
padding: 2px 25px 0 0;
width: 14px;
}
I will post screenshot as soon as I get enough points on stackoverflow. I am trying something like this from Dojo Javascript which is partially working for me. But does not look as good as I want.
if(dojo.isIE){
on(dom.byId("search"), "focus", function () {
style.set("search", "backgroundColor", "rgb(253,216,87)");
style.set("searchBox_div", "border-width", "1px");
style.set("searchBox_div", "backgroundColor", "rgb(253,216,87)");
style.set("searchBox_div", "background-position-x", "15px");
});
}
Please help me fix this in internet explorer.

If you have problems only with the IE you can target your CSS only for IE different versions, i had this problems with different IE version and the solution below helped me a lot and still helping me:
check out browser compatibility: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
For example tell me in which version of IE u have problem:
and u can do something like this to create a css file and write inside the css
[if IE]
<link rel="stylesheet" type="text/css" href="your_css_that_will_affect_only_ie.css" />
[endif]
or u can do something like this
[if IE]
.searchBox_div {
display: inline-block; // u change anything here
verticle-align: middle;// u change anything here
background: #FFF url(/themes/default/images/glyphicons-halflings-black.png) no-repeat 5px 6px;// u change anything here
position: relative;// u change anything here
}
[endif]

I couldn't see any difference in the explorer with your code. What i can advice you for this class
#overlay_search{
right: -22px; // take it out completely from input field
}
if that will not help make a screenshot how is looking now and how u want that will look. And i will fix exactly as you wish.

I solved this issue by adding CSS and HTML right from stratch and removing absolute positioning and other unnecessary CSS.
<div>
<input type="text" class="tftextinput" name="search" id="search" size="21" style="border:gray solid;border-width: 1px 0px 1px 1px;"/>
<input type="submit" value="" id="overlay_search" class="tfbutton" style="border: 1px gray solid;height:22px;border-width: 1px 1px 1px 0px;"/>
</div>
.tftextinput{
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
width: 94px;
height:10px;
border:none;
}
.tfbutton {
margin: 0px;
height:20px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
background: url(/themes/default/images/glyphicons-halflings-black.png) #ffffff no-repeat center center;
background-position: -47px 3px;
border:none;
width:20px;
}

fixed header jumps after scrolling down the page

I have found a few questions similar to this, but were unable to help me.
When I scroll down the page the header/navigation bar doesn't move "smoothly" with the page. After I reach a certain amount down the page, the header "jumps", but after that it's fine.
I have the following code for a fixed header:
$(window).scroll(function(){
if ($(window).scrollTop() >= 147) {
$("#top_nav").addClass("fixed");
$("#top_nav").css("position", "fixed");
$("#top_rule").hide();
$("#bottom_rule").hide();
}
else {
$("#top_nav").removeClass("fixed");
$("#top_nav").css("position", "initial");
$("#top_rule").show();
$("#bottom_rule").show();
}
});
My CSS:
.fixed {
width: 100%;
background: white;
border-bottom: 1px solid black;
box-shadow: 0 0 20px #000000;
top: 0px;
padding-top: 15px;
padding: 10px;
}
I don't have a position: fixed in my CSS, because for some reason it isn't working, so instead I used jQuery to set the position to fixed.
I have posted the rest of my page on jsfiddle.net
http://jsfiddle.net/5n4pF/
If I did not explain propelry, please ask and I'll try and explain better :)
Thanks in advance
EDIT
When I reach 147px, it must not jump. It looks as if it "hides and shows". Instead it must move smoothly as you scroll down the page.

You should position your header absolute. and give the news a margin-top the size of the header.
The reason why your position: fixed wasn't working is because you fixed it inside of a relative element. It get's fixed inside of that element (which isn't what you want, because you want it fixed on top of the page).
It jumps because of the fact that you change the element from static to fixed. All of a sudden you miss about 53 pixels of height in your layout . Which makes it jump.
In this fiddle: http://jsfiddle.net/5n4pF/3/
* {
margin: 0px;
padding: 0px;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
#black_top {
background: black;
font-size: 5px;
display:block;
width: 100%;
height: 5px;
}
#logo_header {
margin-top: 20px;
}
.list_item {
list-style-type: none;
display: inline-block;
font: 16px Arial;
padding: 10px 30px 10px 30px;
text-align: center;
}
#top_nav {
font: Arial 30px;
display: block;
width: 100%;
}
.nav_links {
text-decoration: none;
color: black;
}
hr {
margin-right: 30px;
margin-left: 30px;
color: #f00;
opacity: 0.3;
}
.nav_bullets {
color: #D6D6D6;
}
::-moz-selection {
background: #93E6E5;
}
::selection {
background: #b3d4fc;
}
#news_block {
/*Chrome & Safari*/
-webkit-column-count: 3;
-webkit-column-gap: 40px;
/*Firefox*/
-moz-column-count:3;
-moz-column-gap: 40px;
margin: 20px;
position: absolute;
top: 249px;
width: 100%;
box-sizing: border-box;
}
#search_field {
font-size: 25px;
}
.fixed {
width: 100%;
box-sizing: border-box;
background: white;
border-bottom: 1px solid black;
box-shadow: 0 0 20px #000000;
top: 0;
position: fixed;
padding-top: 15px;
padding: 10px;
}
the correct code is given. It's still a bit buggy with widths of something. But the code in general is not very tidy. So I'll leave that part to you. Hope this works for you.

I was working on it today, and I found the solution.
Change the CSS from
.fixed-header .main-header {
display: none;
}
to
.fixed-header .main-header {
display: inline;
}

Which CSS should I apply to appear tool tip over a text box?

I want to display tooltip on click of textbox.
What i did is:
CSS:
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
float:right;
text-align:left;
font-size:12px;
position:absolute;
z-index: 1;
}
.input1 {
background: none repeat scroll 0 0 #F8F8F8;
border: 1px solid #DDDDDD;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 2px #DFDFDF inset;
clear: left;
min-height: 45px;
position: relative;
}
.textfield {
background: none repeat scroll 0 0 transparent;
border: medium none;
font-family: inherit;
font-size: inherit;
font-size-adjust: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
height: 100%;
line-height: 1em;
margin: 0;
padding: 15px;
width: 100%;
}
.label {
float: left;
line-height: 15px;
margin: 0;
padding: 15px 0;
text-align: right;
width: 26%;
}
JS:
$(function () {
$("#help_form :input").tooltip({
position: "center right",
offset: [-2, 10],
effect: "fade",
opacity: 0.7
});
});
HTML:
<div id="help">
<form id="help_form" class="help_form" action="/me/problem" method="post">
<div class="input1">
<label class="label" for="issuetitle">Title</label>
<input class="textfield" type="text" name="issuetitle" title="must be 100 characters long" />
</div>
</form>
</div>
Actually by setting width of textfield = 30%. We can able to see tooltip. But because of some restriction i don't want want to do it. Is there any other way to do it by using it tooltip comes over textbox.
Thanks in advance.

you can also use jquery for tooltip, like this,
$(function() {
$( document ).tooltip();
});
</script>
And if you want to know more about it then refer this link,
http://jqueryui.com/tooltip/

First you need to have a correct html : put a <style>after your head.
Then you need to load the tooltip plugin you want to call with .tooltip().
Then check for your console and javascript errors.
But maybe you have stripped down your code to post here.
If it's the case, try with a display: block on your .tooltip declaration and check if you can see it.