I am attempting to make a dropdown menu - in CSS only - that drops down on mouse-click (instead of on mouse-hover) and has a scroll bar, as there will be around 22 options. What I have so far, is here: http://fiddle.jshell.net/yobqsjb2/1/
(I am limited to CSS only, as Javascript, PHP, etc are blocked by the university. I also cannot use the select or options codes (IE: [select name='menu'] [option value='1']first item[/option]) in the HTML of the page, because the editor keeps stripping them out. I gather from looking online that the TinyMCE visual editor on WordPress is doing this, but unfortunately, I have no access to change it, so I need to work around the limitation.)
I've grabbed code from other sources to tweak, but I fully admit that I was more on the PC repair side of things a few years ago (career-changed and now migrating the company website in the new field) not a former programmer. A lot of what I'm seeing that is supposed to fix the problem for other users' code, I don't quite understand what they're doing well enough to apply it here...
I know the "on click" problem is with the a:hover and li:hover (vs a:active / li:active), but when I switch them, the menu goes away when the mouse hits it. I read that I needed a 'display:block;' somewhere in the code, but based on examples shown, I've put it in each code segment and in all of them... it doesn't seem to want to fix the problem.
In terms of the scroll bar, everything I keep finding is in Javascript or, in a few places saying that it can't be done for IE (ideally, it would work everywhere, or have an IE alternative that wouldn't look funky).
Are either or both of these things possible? I've figured out how to change the dropdown menu's size, color, borders, etc, just not these two items...
Thanks in advance
For the :focus to work, you'd need a tabindex for the element (li).
Fiddle: http://fiddle.jshell.net/yobqsjb2/3/
Related
I do a lot of work during the day and I program in quite a few languages so doing CSS work is a little tough because i don't specialize in it. I have run into an issue where wordpress no longer works for me so I have to do mysite on my own. can you guys point me to a web resource that will show me how to get a a look of a multi-level horiz. menu at the top of my homepage similar to the one found here?
https://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/
I got that link from a similar thread here on S/O.
I copied all of the code there and put it in the appropriate CSS and HTML files, but I do not get the multi-leveledness. I only got a vertical menu on the left side without color. I'm a source coder, and generally automate things and I'm horrible at designing anything. I draw stick people and that's as far as my artistic talent goes. so CSS falls into that same boat. thanks!
If you really only got a vertical menu on the left side without color, that sounds like none of the CSS styles are actually taking effect. And since none of the elements have classes from what I can see, it sounds like your CSS isn't actually loading or being applied to the DOM. How have you included the CSS rules into your website? Before trying to use a different demo, try to get this specific one working by looking at your HTML structure and figuring out how to get the styles to grab onto the right elements...
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
On my home page in ie for some reason it makes a line about 3px high right about the content and right below the bread crumb bar. example.
Second problem, is that it also makes a box on this page
example
On the second example it messes with the user photo moves it into a box that should not be there. Along with the follow forum button. Which should be right below in the box as well. To see how it should look check those pages in any browser but ie. I really could use a fix for this. If its a css thing i have a ie specific css file i can put code in i just cant figure out what i need to put in there.
Also can someone check it out in ie 8 because i don't have it anymore and if there is a different fix maby you could help with that as well.
Looks like you have something going on that's changing your HTML or your DOM based on the browser. Likely you either have some client or server side code that manipulating things in a browser-variant way.
For example, in IE you have two DIVs with ID "boardindex", but I only see one in Chrome. Use F12 and/or Firebug to further investigate the differences. Isolate the code that's causing the differences using a binary search method if necessary.
I'm adding a drop down menu bar to my blog using html & CSS.
The code is from My Blogger Lab with tweaks to color etc.
My test site is: http://practicedailygratitude.blogspot.com/
I'm 100% happy with the way it looks in Chrome & Firefox (drop downs are really only for About, Images, and Home DIY; the rest are just links).
I'm having the following issues in IE (I tried 7, 8 and 64-bit):
In Explorer, the drop downs are showing up with almost a transparent background (I can see the post's text behind them)
In Explorer the drop down happens so quickly that I can't hover or pick a choice.
In safari, links aren't active and the drop downs down appear on the hover.
I've been searching for two weeks and trying different tweaks & suggestions from other posts but I don't know how to make it work in IE.
I don't use IE, but 30+% of her blog followers do, so I need to make adjustments, I'm just totally out of ideas (and I've reached my competency) at this point.
I've been able to adjust the code to get it exactly how I want it (with the drop downs hovering over the flag banner in the header) in Chrome & Firefox.
Note: This code requires the html gadget to be put at the top of the blog post section, not the header, so that's why I've changed some margins etc. to get the drop downs to move and "look right" with the header image behind it.
Here's what I'm seeing:
The theme is SIMPLE from Blogger by Josh Peterson. It's one of the few choices in Blogger ---- I haven't modified it; I'm only modifying through 1 html widget I added above the post section and then there is an advanced CSS tab for the template ---- that's where I went to Advanced and then "add CSS" and added the CSS from My Blogger Lab (only updating the colors and moving so it would overlay the header) ---- it appears that the CSS then adds itself in the SIMPLE template.
html for widget: http://practicedailygratitude.blogspot.com/2012/09/my-blogger-lab-html-code-for-widget.html
CSS: http://practicedailygratitude.blogspot.com/2012/09/my-blogger-labs-css-i-modified-for.html
Simple template in Blogger http://practicedailygratitude.blogspot.com/2012/10/simple-template-from-blogger.html
I took a look at your code and it first needs to be cleaned up. By cleanup, I mean syntax errors in your markup: http://validator.w3.org/check?uri=http%3A%2F%2Fpracticedailygratitude.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
There are quite a few errors here which might be causing the issue you are experiencing.
If you still see the problem after the cleanup, you should probably approach it as a regular z-index issue on IE7. This can be solved if you put position: relative; and z-index: 500; on all the parent elements that contain the menu. So, go div by div and add the position and z-index rules. Since your menu has a z-index value of 500, its parents must have a defined value for that rule as well, which needs to be equal or greater than the child element - in this case the menu. This will solve the issue with the menu going behind the content (I already tested it on the current state of the site).
On a side note, you have the following tag declared on your page: <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>. What this does is force Internet Explorer 8+ to render the page using the IE7 compatibility mode. I think you want this tag removed.
Let me know if this helped you out.
I'm creating a Wordpress theme from scratch, and so far everything's going well (it's my first time). However, underneath the admin bar I have 18 pixels of whitespace that wasn't in my static HTML page before Wordpress-ing it up. See below for a screenshot:
The blue part is the header, which should be flush with the admin bar. Is there any obvious reason for this happening?
I've had a similar thing happen, and I believe your issue is white space in your html. Go through and remove any extra spaces which may be rendering, especially before (or after) your <?php ?> tags.
maybe you could give us some more css. That could have thousands of reasons. If you dont work with firebug or other developer tools you should defenitley check that out. With this tools you can click at the place with the css element you want to see and see the attributes...
https://addons.mozilla.org/de/firefox/addon/firebug/
or click at chrome on the preferences of the browser...than "tools" and then "developer tools"
If you don't find the answer with this tools, post us some css from your stylesheet
We're short on information here. We need to see your CSS for an accurate answer.
Either way, if you log out, is the margin still there? I'm pretty sure it is. I actually think you're having a margin-top or padding-top on your container/header/whatever element is on top.
If there is no margin, then your CSS is probably interfering with the admin bar. You probably set a margin-bottom on an element that matches either your class, tag or structure of the admin bar.
If you still don't see anything, there is a very slim chance that it could be browser-related. If the other solutions didn't work, try adding a CSS reset.