With the recent Chrome upgrade Version 66.0.3359.139 (Official Build) (64-bit) the links in our Main menu's submenu are not clickable in any column after the first one. dickinsonstate.edu
Removing the columns creates one giant list of links but all of them seem to work. I tried to work with display:flex but couldn't seem to get the nice left aligned columns we have currently.
Links are still clickable in IE and FF.
Screen capture of Broken Links in Columns 2 and 3
.nav-main .nav-level-2>ul{
visibility:hidden;
background-color:#f5f5f5;
position:absolute;
left:0;
width:100%;
right:0;
z-index:2;
text-align:left;
overflow:hidden
}
.nav-main .nav-level-2>ul:before{
-webkit-box-shadow:1px 1px 5px rgba(50,50,50,.75);
-moz-box-shadow:1px 1px 5px rgba(50,50,50,.75);
box-shadow:1px 1px 5px rgba(50,50,50,.75);
-webkit-box-shadow:1px 1px 19px rgba(50,50,50,.4);
-moz-box-shadow:1px 1px 19px rgba(50,50,50,.4);
box-shadow:1px 1px 19px rgba(50,50,50,.4);
content:"";
position:absolute;
height:100px;
top:-100px;
width:100%;
left:0;
right:0
}
.nav-main .nav-level-2>ul .submenu-links{
column-count:3;
-moz-column-count:3;
-webkit-column-count:3
}
.nav-sorted.nav-main .nav-level-2>ul{
display:none;
visibility:visible
}
I experienced the same problem. Try setting position:relative and a z-index on the parent of the columns.
Related
I am using Datatbale 1.10.10
In the Buttons Colvis I have set it to Multicolumn Layout.
I have added this CSS to get the checkbox in the buttons. But it doesn't show on the second column in Chrome, but does get displayed in the Firefox.
https://stackoverflow.com/a/32701608/4017803
Here is the CSS code snippet
.dt-button-collection a.buttons-columnVisibility:before,
.dt-button-collection a.buttons-columnVisibility.active span:before {
display:block;
position:absolute;
top:1.2em;
left:0;
width:12px;
height:12px;
box-sizing:border-box;
}
.dt-button-collection a.buttons-columnVisibility:before {
content:' ';
margin-top:-6px;
margin-left:10px;
border:1px solid black;
border-radius:3px;
}
.dt-button-collection a.buttons-columnVisibility.active span:before {
content:'\2714';
margin-top:-11px;
margin-left:12px;
text-align:center;
text-shadow:1px 1px #DDD, -1px -1px #DDD, 1px -1px #DDD, -1px 1px #DDD;
}
.dt-button-collection a.buttons-columnVisibility span {
margin-left:20px;
}
Check box works with single column.
So I have converted single column to look like multi-column.
buttons container width double than the buttons width and float left to the buttons.
But this is just a temporary solution. But I would like to know how to fix the multicolumn layout in Chrome.
I have created a custom class for some sliders.In chrome everything is working fine.See image below:
Chrome
My problem though is that on internet explorer i get this:
Now here is my css:
input[type="range"].slider-black::-ms-thumb{
height:40px;
width:40px;
border-radius:100px;
background:rgba(0,0,0,0.7);
border:2px solid silver;
box-shadow:0 0 4px 2px rgba(1,1,1,0.8);
}
input[type="range"].slider-black::-webkit-slider-thumb{
height:40px;
width:40px;
border-radius:100px;
background:rgba(0,0,0,0.7);
border:2px solid silver;
box-shadow:0 0 4px 2px rgba(1,1,1,0.8);
}
Is there any way to do my ::-ms-thumb look exactly the same as it is on chrome?
The trick is to apply a margin, half the width of thumb-button, in the ::-ms-track.here's an online demo
although my questions has been answered lots of times before, but all the proposed solution I have tried and nothing seems to work.
what am trying to do is a big div that contains li tags; the li tags will also contain anchor tag, 2 divs and p tag.
to understand the big picture.. am trying to make a posting wall (activity-board), the wall will have posts looks like a bubble (div post) and the bubble will point (post-arrow) to a thumbnail image (a thumb3), to make the bubble style I made the post div absolute positioned with z-index less than the arrow-post.
and here is my css:
.activity-board {
background:#fff;
width:600px;
min-height:652px;
height:auto;
border:solid 2px #e7d28d;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1);
box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1);
float:left;
margin-left:20px;
}
.post-body{
position:relative;
display:block;
list-style-type:none;
width:600px;
height:auto;
background:#f9f9f9;
border-bottom:1px solid #CBCBCB;
border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
background: #fff;
float:left;
overflow:visible;
clear:both;
z-index:9;
}
.post{
position:absolute;
width:500px;
line-height:20px;
height:auto;
background:#FFF;
display:block;
margin-top:22.5px;
margin-left:77px;
text-align:left;
float:left;
z-index:1;
}
.post-arrow{
position:relative;
margin-top:32px;
margin-left:6px;
width:12px;
height:18px;
background:url(images/post-arrow.png);
float:left;
z-index:5;
}
.post p{ color:#025373; padding:8px; word-wrap:break-word; }
a.thumb-3 {
margin-top:18px;
display:block;
margin-left:18px;
width:46px;
height:46px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index:10;
float:left;
}
a.thumb-3 img{
padding:0;
margin:0 auto;
width:46px;
height:46px;
float:left;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
here is my html:
<ul>
<li class="post-body">
<a class="thumb-3"><img src="images/Alsheikh Center (177).jpg" /></a>
<div class="post-arrow"></div>
<div class="post">
<p>
Hi there!
</p>
</div>
</li>
</ul>
http://jsfiddle.net/r9YpX/
Everything worked fine but the li tag does not expand to the content.. it only expands if I change the position of the post div to relative not absolute, which I cant change because it must be absolutely positioned under the arrow image to give it the bubble look.
any help would be appreciated.
Thanks.
ok Thanks guys i figuered it out.. I made position:relative and changed margin for post div and it worked! I thought I did this but perhaps I did something wrong that make it not work
I have CSS code from a template design that a client wants to use. One of the issue I'm having is that, once a text option is selected (those options with wide length) is writing over the drop-down arrow.
See image
I have tried using z-index and placing overflow:hidden where appropriate. Here is the CSS code:
/* search drop-down values */
select option {}
option.level-0{padding:0 3px;}
option.level-1,option.level-2,option.level-3,
option.level-4,option.level-5,option.level-6,
option.level-7{}
.selectBox-dropdown{ height: 34px; min-width:190px; max-width: 320px; position:relative; border:solid 1px #BBB; line-height:1; text-decoration:none; color:#666; outline:none; vertical-align:middle; background:#FFF; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; display:inline-block; cursor:default; margin-top: 1px\9; height: 33px\9;}
.content_right .selectBox-dropdown {width:303px;}
.content_right a.selectBox-dropdown:hover {text-decoration:none;}
.selectBox-dropdown:focus,
.selectBox-dropdown:focus .selectBox-arrow{border-color:#BBB}
.selectBox-dropdown.selectBox-menuShowing{-moz-border-radius-bottomleft:0; -moz- border-radius-bottomright:0; -webkit-border-bottom-left-radius:0; -webkit-border-bottom-right-radius:0; border-bottom-left-radius:0; border-bottom-right-radius:0}
.selectBox-dropdown .selectBox-label{width:100%; padding:0 .7em; line-height:2.4em; display:inline-block; white-space:nowrap; overflow:hidden; font-size:14px}
.selectBox-dropdown .selectBox-arrow{position:absolute; top:0; right:0; width:23px; height:100%; background:url(images/sb-arrow.png) 50% center no-repeat; border-left:solid 1px #BBB; }
.selectBox-dropdown-menu{position:absolute; z-index:99999; max-height:200px; border:solid 1px #BBB; background:#FFF; -moz-box-shadow:0 2px 6px rgba(0,0,0,.2); -webkit-box-shadow:0 2px 6px rgba(0,0,0,.2); box-shadow:0 2px 6px rgba(0,0,0,.2); overflow:auto}
.selectBox-inline{width:250px; outline:none; border:solid 1px #BBB; background:#FFF; display:inline-block; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; overflow:hidden;}
.selectBox-inline:focus{border-color:#666}
.selectBox-options,
.selectBox-options li,
.selectBox-options li a{list-style:none; display:block; cursor:default; padding:0; margin:0}
.selectBox-options li a{color:#666; padding:1px .7em; white-space:nowrap; overflow:hidden; background:6px center no-repeat; text-decoration:none; font:14px/1.5em Arial,Helvetica,sans-serif;}
.selectBox-options li.selectBox-hover a{background-color:#EEE}
.selectBox-options li.selectBox-disabled a{color:#888; background-color:transparent}
.selectBox-options .selectBox-optgroup{color:#666; background:#EEE; font-weight:bold; line-height:1.5; padding:0 .3em; white-space:nowrap;}
.selectBox.selectBox-disabled{color:#888 !important}
.selectBox-dropdown.selectBox-disabled .selectBox-arrow{opacity:.5; filter:alpha(opacity=50); border-color:#666;}
.selectBox-inline.selectBox-disabled{color:#888 !important}
.selectBox-inline.selectBox-disabled .selectBox-options a{background-color:transparent !important}
code for the drop-down:
<div class="state-dropdown"><?php wp_state_dropdown() ?></div>
<span id="campus_dropdown"><?php if (empty($_GET['cp_state'])){ wp_campus_dropdown();} ?></span>
<?php if (!empty($_GET['cp_state'])){?>
<script type="text/javascript" >loadXMLDoc('<?php echo $_GET['cp_state'];?>','<?php echo $_GET['cp_your_college'];?>')</script>
<?php }?>
Any suggestions or help would be greatly appreciated. I know this is a bit too much of CSS, but again its from a template and I have been pulling my hair out for weeks!
Thank you so much in advance!
First of all without sample HTML, we can only guess at how the css is used. After analyzing the css you provided, I took a stab at how I thought it might be used, jsFiddle here. Based on this assumption there are two options:
Set a right padding for the elements that contain the menu options. This may cause the dropdown to widen, but should be better as it will allow users to see the entire text of the option.
Set the background for the dropdown arrow element ('.selectBox-arrow') to a solid color and match the border radius of the containing element. Note that the background color defaults to transparent.
If for whatever reason neither of these options work in your situation, remember, Firebug (or other browser's developer tools) are your friend. These tools can help make short work of problems like this.
Since i won't be able to post an image here's the link to it
http://i.stack.imgur.com/LxO1e.png
I have this website, the PHP and all other stuff are working. The problem is that when I scroll up to see other stuff below, the elements that get scrolled up goes over the header instead of going under. How do I solve this?
I can't seem to post the HTML in here, I tried the indent four spaces thing but it doesn't work with HTML stuff so instead here is the site: pageboost.comze.com
Here's the css for the main that is going over instead of under
.inmain
{
width:95%;
height:100%;
left:20px;
top:42px;
position:relative;
}
and here's the css for the header
.header
{
background-color:#ffd800;
width:100%;
height:42px;
position:fixed;
left:0px;
top:0px;
-webkit-box-shadow: 0 5px 6px -6px black;
-moz-box-shadow: 0 5px 6px -6px black;
}
You have to define z-index with one these positions relative,absolute or fixed.
For example write like his:
.header{
position:fixed;
z-index:1;
}
just define z-index value into your Header class or Id where you have defined the position.
It happens so when you will give the z-index value i hope that will work smoothly.....
UPDATED ANSWER
I have given the z-index value in header class its working fine now please check it.....
HTML
<div class="header"></div>
<div class="inmain">afdadfasf</div>
CSS
.header
{
background-color:#ffd800;
width:100%;
height:42px;
position:fixed;
left:0px;
top:0px;
-webkit-box-shadow: 0 5px 6px -6px black;
-moz-box-shadow: 0 5px 6px -6px black;
z-index:1;
}
.inmain
{
width:95%;
height:100%;
left:20px;
top:35px;
position:relative;
}
for better understanding see the live demo:- http://jsfiddle.net/X8vpg/6/