Folks,
My dropdown menu work well in Chrome, Firefox, IE9 but not IE8.
When I place my cursor on dropdown about halfway it closes the drop down.
I am using modernizr on my project.
Also how can auto adjust the dropdown?
http://jsfiddle.net/zH6qH/
I appreciate any help.
I had to put code in order to submit. ignore below.
nav{
width: 100%;
height: 30px;
}
Related
Codepen: https://codepen.io/Bobby__K/pen/eYZXQKo
I made a navbar with the encompassing nav given position: fixed.
.main-nav {
position: fixed;
z-index: 10;
left: 0;
top: 0;
padding: 0 5%;
height: 100px;
background-color: white;
width: 100%;
}
When I run this on Chrome, Firefox, and Firefox mobile, it works as intended; i.e. the navbar doesn't move and stays at the top. However, when I run it on Google Chrome mobile and scroll down, the navbar goes up a bit and then the fixed positioning seems to kick in. The problem here is that this cuts off a good 10% of my navbar.
Since this only happens when I preview Google Chrome's mobile view, I was wondering if this was just a visual bug shown in developer tools, instead of something that would happen once the website's live.
Notes:
I've made it responsive using the input method and with CSS :checked. As such, I usually keep the checkbox to the side with overflow-x hidden. I've tested the project while having the checkbox on the screen, but the same problem happens, so that wasn't the problem.
I've also tested this on Opera mobile view and Brave mobile view and the scrolling issue happens there too; so maybe this is something to do with how my code reacts to the Chrome Engine?
I've narrowed it down to a weird interaction with my #media screen and query. Whenever I make a change, it fixes the problem. However, once I close developer tools and reopen it, the scrolling issue reappears.
do you happen to have a codepen or something with the full html and css (and js if applicable). I'm wondering if there's a conflicting style outside of .main-nav that's causing this.
I am using foundation framework. When I scroll down to the page in firefox and open the Reveal result in gray overlay only here i need to scroll to the top by myself to see the Reveal. I added this CSS to the model.
#id-of-the-reveal-element {
position: fixed;
top: 100px !important;
}
This is working fine but the slideDown and slideUp not working as normal instead it will just fadeIn and fadeOut in both Firefox and Chrome. What is the solution for this issue to get the normal behavior of the Reval as in Chrome.
Take a look here, at Ken Smith's Post
By adding onclick="javascript: location.hash='#page'; location.hash='';" to the button/link that opens modal it will automatically scroll for you.
Just replace #page with your modal id.
Unfortunately this is only a temporary workaround. Hope it helps though!
comment out your CSS...
#id-of-the-reveal-element {
position: fixed;
top: 100px !important;
}
whenever foundation reveal js tries to position its modal box on the center of the screen or the place you trigger the modal box, your CSS forces it to display 100px from top of the page with fixed position.
else you could post your code (structure) of the triggering part and the reveal modal box so that I could get a clear idea.
I'm working on building new site , i need a drop down menu to select the amount of something in my site . but this drop down menu has a style that i have to make it.
the style of this drop down menu is that the drop down box has no arrow - the arrow that appear on the right to click on it and open the drop down items-.
I have made many searches and I hove found this style property :"-webkit-appearance:none ", in the class of the drop down list ,I have put this property and the arrow has been disappeared using the google chrome browser.
but the "problem" is : this property is not working on the Firefox browser , the arrow has not been disappeared .
i will give you a simple view to see how this arrow has not been disappeared in the Firefox browser :
here is the chrome view as the drop down menu without the arrow:
my question is :
is there CSS style property to make a drop down menu without this arrow in the "Firefox" browser ?
-webkit prefixed properties are respected by Safari and Chrome only, for Firefox, you need to use -moz prefix. When you use -webkit, Firefox will just skip the property and will move ahead, thus it spoils your select design.
Though, you can achieve the above with a lil hack, wrap your select tag using a div, assign fix width to your div, and than use greater width for your select tag. Now use background-image for your select, and use overflow: hidden; for the wrapper
Demo
div {
width: 200px;
border: 1px solid #f00;
overflow: hidden;
}
div select {
width: 220px;
background-image: url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/256/Download-icon.png);
background-size: 13px 13px;
background-repeat: no-repeat;
background-position: 180px 5px;
}
This way, the above will give you better cross browser compatibility, and you don't have to use prefixes as well.
You can try your luck with:
-moz-appearance: none
But this is a non-standard property..
You can read more about it HERE
for example:
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
but ie still not cover(
Or may be you want to use plagin jquery https://select2.github.io/, but I think, is not very appropriate if you wont castomise only one select.
http://metagraf.github.io has been behaving well in all tested browser until IE10 came along. The top menu is overlaying the entire page when viewed in IE10.
A screenshot of how the page looks in IE10 can be seen here: https://dl.dropboxusercontent.com/u/2897577/ie10.png
Any ideas on how to fix this?
regards Oskar
So when I run the site in question in IE 10, yes indeed, the top menu does look buggy in IE 10.
The immediate source of the problem is the img in the navbar.
If you hit F12 and use IE's developer toolbar, and then if you set the width property of the img from auto to just being un-checked (so that auto is no longer the value, the site all of the sudden looks normal.
Digging deeper into the issue, here's the css setting for img in bootstrap:
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Ok, so what in the world is width: auto\9?
Well, looks like it is an IE hack, but a hack that does not apply to IE 10.
CSS \9 in width property
http://www.paulirish.com/2009/browser-specific-css-hacks/
So as a quick fix, I suppose one thing you could do would be to set a custom css property
on the img in the navbar that is exact about the width of the img.
Scrollbar in boxes with both overflow auto and pointer-events none are not responsive to clicks in firefox.
I have created a very basic jsfiddle reproducing the bug:
http://jsfiddle.net/PgaeC/2/
.out {
overflow: auto;
pointer-events: none;
height: 100px;
}
.in {
height: 200px;
}
this works in chrome and internet explorer (tested with ie9 and ie10)
in firefox the scrollbar is unresponsive and cannot be clicked at all.
any idea how to give clicks back to the scrollbar in firefox ?
What i want is a box handling click, and another box sometimes going over it, grabbing clicks on its own, with a space on top where you can still interact with the bottom box, and the scrollbar spanning on the whole page
like this : http://jsfiddle.net/NczQG/2/
EDIT: created bug in mozilla bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=880671
(as seen in https://bugzilla.mozilla.org/show_bug.cgi?id=880671)
the mozilla team fixed it :
http://hg.mozilla.org/mozilla-central/rev/f8bf18dceb1c
so it's fixed on the nightly.