#menu ul ul ul {
position: absolute;
top: 0;
left: 100%; /* everything goes to opposite direction why?? It doesnt make sense */
width: 100%;
}
It's a simple dropDown in CSS (I'm learning CSS)... Have a look at the code where I'm hiding the blocks here in JS Bin.
your code:
left: 100%; /* everything goes to opposite direction why?? :( */
change to:
left: -100%;
Also, this works in Chrome. I noticed your menu code does not work in IE9.
Related
I need to align the lifestyle furniture ad image in the header for http://test.wizs.com/. I need it to be flush against the right side. See how it is vertically aligned to the top? I want it to be in line with the logo.
Everything that I have tried is not working. Some of the css that I have tried makes the image go halfway off the page... :/
Currently, the CSS is:
#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 0;
z-index: 999;
}
Any advice on this would be greatly appreciated! :)
Not sure I fully understand what you mean.
I added:
.proadszone-4788 img {
padding-top: 27px;
}
This should work fine
.wppas_custom_widgets-36 {
position: absolute;
right: 0px;
}
and remove this css
#header .widget {
}
Try this it may help
My dropdown menu works fine normally - http://imgur.com/Ljodw0J
But is covered by widgets on mobile - http://imgur.com/1AyGiaS
And is even covered by the chart on mobile - http://imgur.com/dpoOmai
Shouldn't they render the same?? AND what could be the source of the problem? and how can I fix this issue?
Details
Some styling details:
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
}
NOTES
There is no z-index on the overlapping elements.
The entire content of the page has a snap-content class which sets the z-index: 2;. This is to let me use the snap.js plugin.
Yes, they should, but it's not uncommon that they don't. This is why cross-platform HTML, JS and CSS is such a PITA, and why, if you're good at it you print money.
I have a some drop-down menus set up here: http://emgraphics.net/sokoleye_wp The problem is they only work sporadically - three out of four times I can't click on a link and the menu disappears. However, there isn't any pattern - no page where it works regularly (or doesn't), no particular menu/link that does or doesn't work, sometimes it works on the first try, sometimes not at all until I switch pages. The problem seems consistent across browser/platform (I tried a bunch of options in Browserstack). Even IE follows the pattern! These are just a standard menu set up in WordPress. I assume there must be some css somewhere that is interfering, or something with the random images in the header? But why wouldn't it just stay broken/non-functional (or not)? Any idea what I am missing here? thanks!
For me (Chrome Version 26.0.1410.64 m) there is a gap between the menu items and the drop-down list. When the cursor hits this gap it is not in a hover state over the button or the list, causing the list to disappear.
Try changing the CSS for #access ul ul to:
#access ul ul {
display: none;
position: absolute;
top: 30px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
padding-top: 4px;
}
..that should fix the issue.
You could add a border top to the above example if you still want to have the visual effect of a gap. Replace your existing CSS for the element below and it should fix your problem.
#access ul ul {
display: none;
position: absolute;
top: 30px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
border-top:4px solid #7C7461;
}
So this is our website http://www.greeceinsiders.com
if you resize the window you will see that the menu at the top-right gets out of the top-bar and it is ugly. How can I fix that? Can I play with the position of the list?
Bonus: If anyone visits Greece he gets a free experience for helping us! :)
An easy fix is making the following changes in your CSS:
#top-bar > .menu {
color: #FFFFFF;
/* float: right; */ /*float: right removed */
height: 48px;
margin-right: 40px;
width: 490px;
position: absolute; /* these are new additions */
right: 0;
top: 0;
}
It's the pageTitle element that's causing it to get out of shape.
It seems like an empty element - can you just remove it?
I use this style information to make my footer stick to the bottom of my web pages and it works super in FF, Chrome and Opera. Only in IE, the footer appears in the middle of the page instead of at the bottom.
body { margin: 0; padding: 0; height: 100%; font-family: Georgia; }
#parent
{
min-height: 100%;
position: relative;
}
#header { position: relative; left:0px; top:0px; width: 100%; height:45px; background-color: black; }
#content { padding-bottom: 150px; position: relative; }
#footer { position: absolute; left: 0px; width:100%; bottom: 0; height:80px; background-color: black; }
The HTML structure is as follows:
HTML body tag
parent
header
content
footer
Update
I figured if I add a conditional this selector for IE, it works in both browsers.
#parent { height: 100%; /* min-height: 100%; */ }
Now, would someone please tell me if it is legal to add a conditional CSS comment in a .css file that is included as an external in an HTML file? I guess not. How do I go about using this conditional comment without using an additional IE only CSS file?
This should help:
html {
height: 100%;
}
Take a look in the source code and try it on any browser: Footer at the bottom of the page. It works on IE7, IE8 and IE9, only IE6 and under will not becouse of min-height property. I think putting correct DOCTYPE will fix your issue. Hope that helped.
I had the same problem a few weeks back and a found a pretty good tutorial on this. Click here! The general idea behind this solution is to create a wrapper which soaks up most of the page, leaving only enough room for your footer to be positioned at the bottom of the page. This trick definitely works in IE.