I have a problem with a navigation menu for which I have applied pie.js (library that allows you to have css3 on ie6-8 browsers). Works well at first sight but if we will play a little bit with the menu, wrong behavior will raise:(. To receive that strange behavior you must move cursor a little faster left and right over the drop-down menu on IE8. This is a function through I call js library.
$(document).ready(function(){
if (window.PIE) {
$('.aahov,ul#menu,ul#menu li ul').each(function(){
PIE.attach(this);
});
}
});
Check this example: http://mainpage.ueuo.com
...and don't forget, only on IE8 browsers ...
Thank's.
It might just be IE8 adding some extra padding.
I noticed from your css that you aren't using a css reset which may help to eliminate browser based differences.
You could have a look at http://meyerweb.com/eric/tools/css/reset/ or something similar.
Also IE8 doesn't support last-child
ul#menu li ul li:last-child{ border-bottom:none; }
So this will also affect the look of your menu items.
Also as a side note from a usability point of view it would be good practice to let the user know that the menu link is a drop down. Possibly add a down arrow to the right of the link.
Your scripting looks good to me, it looks like it's something in your styling. Not really sure what you have there, but you might be able to work it around to use overflow:hidden, or at least that might be a place to start.
Related
I have a drop down element which works great on desktop.
http://www.c-testing.nl/werkenbijvanaarsen/growing-together/
But on mobile devices, the drop down won't collapse back when tapping again.
I read some answers on this forum, but it doesn't seem to work in this case.
I'm trying to achieve this only with css, but the more I read about this, it seems that online javascript can achieve it.
Does anybody know how I can set something like an un-hover on this element?
.pl-drop_down:hover ul {
opacity: 1;
visibility: visible;
}
Best regards, Mark
It’s unlikely you’ll get what you want using just CSS :hover, as this wasn’t designed for touch screens.
To get it to collapse back on mobile, you could add the javascript:
$('[selector that you want to tap]').click(function() {
$('.pl-drop_down').css({'pointer-events': 'none'});
});
This will remove the hover state on mobile and should make it collapse back, you’ll need jQuery for this solution to work though.
How can I make my scroll bar black for a <div>?
Is there anything that will work in Webkit, IE7 to IE9 and Firefox?
You cannot do this in Firefox. Only IE and webkit browsers support modifying the scrollbar.
See http://msdn.microsoft.com/en-us/library/ie/ms531153%28v=vs.85%29.aspx on how to do it in MSIE and http://www.webkit.org/blog/363/styling-scrollbars/ on how to do it in webkit.
You cannot style the scrollbar of the browser. It's not universally supported (although IE did try to implement it).
Also, it's a bad idea to do so from an accessibility perspective. Think of (old) people who cannot see your very slim, almost invisible custom scroll bar or don't know that what you have there is actually a scroll bar.
You can use custom scrollbar plugins in JS like this one. It's all over the place
As Pez Cuckow said:
I imagine that custom scrollbar is implemented in javascript, it looks
very slick and you can't make a browsers scrollbar look that good!
Find an example I just put together for you at:
http://jsfiddle.net/9LHPW/2/ - note check the resources tab as this
includes four external files (3x Js and 1x CSS)
Have a look at this website for a further example (looks like exactly
what you want) with Javascript and jQuery:
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
You can find the plugin's home at
http://manos.malihu.gr/jquery-custom-content-scroller
Along with a how to use it section!
I agree you shouldn't tamper with the visibility (I'm looking at you Apple) of the scrollbar of a scrollable region. Sometimes, a box with scrollable text fits just inside the boundaries and there is no visual clue letting a user know that it scrolls thereby confusing the user. Is it really a good idea to prevent the user from being able to use your application? Most likely not, but you can also argue back that your target demographic wont have any problems; an application for extreme inline competition is probably not going to be used by people who aren't able to see very well. However there are accessibility/usability concerns that go beyond visual hinderances; cognitively impaired, or non tech-savvy, individuals might be very good at said aggressive inline and want to compete in your upcoming event but wont be able to because the black-on-black scrollbar looks awesome.
That all said, do what make you happy. That's what I do.
I have two problems... I've tried altering my CSS file, the JavaScript files and all kinds of other things. A google search yielded no remedy to these problems, so I come to the awesome site of answers!
This page -> http://students.cmps.subr.edu/aaron.chauvin/misc/test2.html
has some issues in Chrome and Safari. Only when my CSS is in effect, the pictures that are supposed to be side-by-side aren't, but when the CSS is off, they are. This problem isn't evident in FF/IE9. I'm thinking it has something to do with the but I'm not totally sure. Edit Edit: Thanks for the fix Genzer!
Also on that page, even if all my CSS/JavaScript isn't linked, I have a small gap between the bottom of the images that are links and the dotted link border... I want to get rid of the gap. What's causing this gap? This happens in all browsers.
Thanks in advance.
Edit: Here's the CSS: http://students.cmps.subr.edu/aaron.chauvin/misc/style.css
Edit Edit: Fixed the side-by-side image link problem, now trying to figure out what's causing the variation in the display of the custom a:focus border (non-existent in IE9, partially encases image link in Webkit browsers) and the gap between it and the bottom of the image link (all browsers BUT IE9).
The problem is you're wrapping all your column's info in a span: <span class="reg">...</span>
IE9 and FF figure out that you want it to display as a block element, but Webkit (Chrome and Safari) don't. Set display:block on the "reg" class and you should be set. (I think this fixes the "dotted border" issue as well, but i'm not quite sure what you meant there)
To get the orange border to show up in IE9, make sure to set outline-style to something like "solid" or "double" in the a.piclink:hover css class, in style.css. Once i did that, the border shows up.
I'm still not entirely sure why your links and nested images are behaving like they are, but I found a little tweak (tweak = almost a hack) to get it to work: Set display:inline-block; on a.piclink and set a fixed height on it. Note that inline-block tacks on 4px, so the height should be 4px taller than the height of the image; in your case: 47px. It's a bit of a hack, but it's valid and it works. Unfortunately IE7 doesn't like this, but zoom:1; *display:inline; get it working.
Adding following CSS code in your style will make Chrome display your TestPage the same as IE8.
span.reg a {
display: inline;
}
I'm stuck. I've never done drop down menus before but wanted to try on a site I'm working on, so I imported someone else's java and css code and got it running just fine in Firefox. Problem is, the drop down menus are appearing way off to the right in IE.
I've created a separate style sheet just for IE, but I haven't been able to figure out what to put on it to correct this!
Here's the site:
http://www.erricksonequipment.com
There is a lot of superfluous nonsense in that style sheet as it was imported from an online example. That said, there may be issues in there too that are preventing ie from reading correctly? I'm not sure.. I'm new to this java/css drop down menu stuff! :)
Any help would be GREATLY appreciated.
The script you're using for the drop down menu is not very good. Also, it's quite possible to create that whole drop down menu using just CSS, without any JS.
The drop down menu, in its current state, does not work in IE7 or IE8.
In the spirit of "fixing your problem":
It will work in IE8 (and Firefox, etc) if you change Line 203 in dropdownMenuKeyboard.js from this:
? (isie ? li.offsetLeft + 'px' : 'auto')
to this:
? 'auto'
However, I recommend you replace the drop down menu code with something more modern.
Be careful when using 'em' as your unit of measurement. The size of 1 'em' is relative to the default font-size set in your browser (or in your CSS if you define it). By default, these font-sizes differ between Firefox and Internet Explorer. I'd recommend using pixels instead, but if you're set on using 'em', just be sure to add a new default font-size in your CSS by doing something like:
html { font-size: 16px; }
By standardizing the default font-size throughout the browser, you won't see any differences in Firefox or Internet Explorer.
How can I replace the scrollbar's images using HTML/CSS?
I have:
scrollbar-base-color: #00acee;
scrollbar-dark-shadow-color: #00acee;
scrollbar-track-color: #ffffff;
scrollbar-face-color: #00acee;
scrollbar-shadow-color: #00acee;
scrollbar-highlight-color: #00acee;
scrollbar-3d-light-color: #00acee;
Can I use an image to accomplish the same idea?
No you can't use images in place of the scroll bar. I'll also just mention that changing the colours is very annoying to users and it only works in IE anyway, so just stick with the standard GUI elements.
For webkit based browsers (for a sufficiently new value of "webkit") there are a collection of propriety CSS properties.
No, you can't use an image in the scroll bar. (Also, even changing the color is only supported in IE in non-standard mode.)
The only way to use images in a scroll bar would be not to use the standard scroll bar at all, but implement a replacement scroll bar yourself using DHTML, or find someone who has done that already.
However, you should be a bit restrictive when changing the look of controls that the users are already used to. If you are not careful you may end up confusing people so that they don't even recognise it as a scroll bar at all...
It is not possible to put an image inside the scrollbar. Customizing the scrollbar is not a W3C spec (IE only CSS), but details on what is possible can be found here:
http://www.quirksmode.org/css/scrollbars.html
as far as i know you cant style a scroll bar with an image.
if you want to use jquery, you can do so easily using this jquery plugin:
http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html
The trick there is to "simulate" a scroll bar using some divs, which you can style any way you want, since they are just regular divs. After that its easy to just use the scrollTop property and scroll events etc (but you dont really need to know how it works to use it)
For MooTools, there's MooScroller.
Steve
jScrollPane (demo)
or
Interface (demo).
Both using jQuery.
Webkit == Safari and Chrome, but Firefox and Opera have plans to implement similar in upcoming releases. The spec is a killer though, so it may not be worth using even if you have the support.
Mootools has quite a few:
Mooscroller (will be
implemented into Mootools -more),
MooScroll (based on
Solutaire's?)
UvumiScroll
MochaUI's
I imagine it is part of Ext UI, and probably JQ's UI library, but have no personal experience there.
One non-library dependent class: http://www.hesido.com/web.php?page=customscrollbar