I have a simple CSS-based drop down menu that is working fine. But now I want to add a sub-menu that will display as well. Everything is working fine, except the height on the main menu list is expanding when the sub menu is displayed.
http://jsfiddle.net/GzfFs/
.cascade_content {
/* cascading sub menu */
display: none;
z-index: 103;
position: relative;
background: #FFFFFF;
border: 1px solid #8C8C8C;
padding: 10px 0px 10px 0px;
width: 190px;
left: -192px;
top: -26px;
-moz-box-shadow: 0 2px 6px 0px #8C8C8C;
-webkit-box-shadow: 0 2px 6px 0px #8C8C8C;
box-shadow: 0 2px 6px 0px #8C8C8C;
}
Note: it seems like position:relative in the sub menu is causing this... however, changing that to position:absolute creates the problem of it not appearing in the right place. I'm sure those of you with more CSS experience will identify this as a simple issue - appreciate any help you can offer!
http://jsfiddle.net/GzfFs/1/
.dropdown_content li {position: relative}
.cascade_content {position: absolute}
You may also need to move your ULs inside the LIs to get positioning where you want it.
Related
Please look at the link here:
http://finsfunding.com/funditnow/
go to the bottom where the blue button says "get pre-approved" next to the iphone x. I need to know why this button isn't working when i'm using it successfully in other parts of the page and site (same class, same behavior).
Also, before anyone suggests, I've played around with about 1000 z-index values already, so that isn't it. Im baffled as to why the button doesn't work.
Change #iPhoneText_Container to z-index: 1, and add the following to #iPhone_blue:
position: relative;
z-index: 5;
If you eliminate the z-index: -100 from the #iPhoneText_Container it will solve the problem.
However it will ruin your phone img.
#iPhoneText_Container {
float: left;
position: absolute;
margin: 150px 0 0 75px;
}
Update:
If you remove background-color: #FFFFFF; from #IphoneTextBlock it will solve the problem
#iPhoneTextBlock {
width: 70%;
padding: 20px;
margin: 0 0 0 90px;
font-family: 'Montserrat',! sans-serif important;
position: ;
border: solid 0px #000;
-webkit-box-shadow: 0px 9px 22px -13px rgba(0,0,0,1);
-moz-box-shadow: 0px 9px 22px -13px rgba(0,0,0,1);
box-shadow: 0px 9px 22px -13px rgba(0,0,0,1);
}
If you see the "Start Here" button div is on top of page (z-index is high for parent div) you have written and hence hover effect on #ApplyNow_button:hover is working.
But for pre-approved button/div, even though you have hover styles for steps-button div(.steps-button:hover), this is being intercepted by some other div on the page.
<div class="steps-button" style="float: left">Get Pre-Approved</div>
I noticed that iPhoneText_Container is placed below all the divs. Set z-index of iPhoneText_Container to 99999 which will fix the issue.
#iPhoneText_Container {
float: left;
position: absolute;
margin: 150px 0 0 75px;
z-index: 99999;
}
Or you can simply add below css to your styles.
#iPhoneText_Container {
z-index: 99999 !important;
}
<div class="row">
some content
<div class="info-box">
some other content
</div>
</div>
.row {
float: left;
margin-bottom: 1.5%;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
background-color: rgb(250, 250, 250);
width: 685px;
-webkit-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-moz-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-ms-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-o-border-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
}
.row:hover {
background-color: rgb(240, 245, 245);
-moz-box-shadow: inset 0 0 5px #4d4d4d;
-webkit-box-shadow: inset 0 0 5px #4d4d4d;
box-shadow: inset 0 0 5px #4d4d4d;
}
.info-box {
position: relative;
border-left: 1px solid #e3e3e3;
padding: 15px;
width: 170px;
font-size: 0.93em;
color: #363636;
float: left;
}
Alright, I have this info box inside row. Since at .row:hover, I'm creating an inner shadow. The border-left of the info-box seems to show on top of the shadow when you hover on row.
My question is if you can make the shadow on top of the border. Thanks in advance.
Note: z-index doesn't work for me.
Of course it's on top: the child has to appear above the parent, otherwise it'd be hidden by it. To achieve the desired effect, you would have to apply the shadow to an element that came above, ie after, the .info-box. You can achieve this with no additional markup by using the :after pseudo-element.
If you take a look at this fiddle, I've achieved the basic proposition — although you may want to shift the border to the pseudo element or adjust dimensions to get it positioned just right.
Basic guide to what I did:
Gave .row the CSS position: relative so we can place children in relation to it.
Moved everything apart from the background property in the .row:hover rule to a new .row:hover:after rule.
Added content: ' ' to force the pseudo element to display.
Added positioning, height and width, top and left to make the pseudo element cover available width.
EDIT: Felipe points out in the comments that any attempt to click in through to object within .row will be intercepted by the :after element, but suggests you can use pointer events set to pointer-events: none to mitigate the problem (in everything other than IE and Opera). I've updated my example to show this in action.
I'm trying to make a "reply" button on my website which will have a drop down box next to it for specifying additional options. Sort of like this: [Reply][v] I was able to create the "Reply" button ok but I'm having problems with the additional options button: I can't seem to get the image I want to use for it consistently centered across multiple browsers. For instance, firefox moves the image down while chrome has the image up higher. (I added red lines to the picture below to show the spacing inconsistency)
Link to show issue:
Does anyone know how I can get this image properly vertically centered (horizontally it works fine!) within the span or have another suggestion as to how I can make my button? It's also important that the "arrow" button have the same height as the "Reply" button (well their outer borders at least) as some solutions I have tried have caused that to "break". I would also like to keep the arrow button image as part of an element's "background" property so that it can be selected from a png which contains multiple images. (for efficiency reasons so only one image is loaded for all icons on the site) I know I sound picky about this one pixel skew, but the problem seems to get worse depending on the line-height I'm using and really causes it to look bad. Any help would be greatly appreciated. Thank you!!
<div>
<span class="text">Reply</span><span class="options"></span>
</div>
.link1{
display: inline-block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid black;
color: black;
text-decoration: none;
font-size: 12px;
line-height: 20px;
}
.link2{
display: inline-block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid black;
border-left: none;
color: black;
text-decoration: none;
font-size: 12px;
line-height: 20px;
}
.text{
margin: 0px 5px 0px 5px;
padding: 0px 0px 0px 0px;
font-size: 12px;
}
.options{
margin: 0px 0px 0px 0px;
padding: 0px 5px 0px 12px;
background-image: url("arrow.png");
background-position: 2px 3px;
background-repeat: no-repeat;
overflow: hidden;
}
You can either use different styles/stylesheets for different browsers with the various available methods, or you can set one height, and use position: absolute. I find most of the time, position: absolute; does a good job fixing things across many browsers. for example
position: absolute;
top: 10px;
left: 100px;
this moves the image 10 pixels down, and 100px right (relative to the closest parent element that is not position: fixed;
I'm trying to position all images on my webpage behind a log-in screen but I can't seem to make that work. I've tried using z-index but that doesn't help either. I was wondering if anyone can help me sort this out. Here's a screenshot of my issue: http://img64.imageshack.us/img64/1267/uplad.png. I'm trying to make all images stay behind the black image with the log-in screen in front of everything.
CSS
CSS for images
img
{
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
border: 1px solid #ccc;
float: left;
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
z-index:0;
}
CSS for black background
element.style {
height: 1843px;
left: 0;
position: fixed;
top: 0;
width: 1263px;
z-index: 10000;
}
.modalBackground {
background-color: #000000;
opacity: 0.5;
}
CSS for Log-in Screen
element.style {
display: block;
margin-left: -225px;
margin-top: -212px;
}
.pagepopups .popup {
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 0 0 3px #333333;
background-color: #006699;
display: none;
left: 50%;
padding: 11px 10px;
position: absolute;
top: 50%;
z-index: 10001;
}
Z-index does appear to be what you want. There is a known z-index bug with Internet Explorer where it doesn't exactly follow the z-index as other browsers. Fortunately, there's an easy fix. You need to specify z-index on parent elements up until the container for all of the elements you're trying to specify a z-index for. I think the problem is that IE creates a "z-index context" for each element unless the parent element has a z-index. Here's a good link describing the issue and how to fix it.
You failed to make the image fully anonymous (Featured on .. button), I Googled for the live site, and it has the issue you're describing, so I'm assuming it's the same version you're working with.
Testing only in IE7:
Add to .header a single rule: z-index: 10000.
That's it fixed in IE7.
It will probably also be fixed in IE6, but if not, let me know and I'll take a look.
You're lucky you didn't anonymise it properly :)
For once, ff and ie comply. But in this instance chrome doesnt like it.
We have a field, with autosuggest attached, that appears after x amount of letters. Cannot really put a demo on fiddle, as its db driven.
However here is the css
.suggestionsBox {
z-index: 2;
position: absolute;
margin: 70px 0px 0px 146px;
width: 207px;
background-color: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cccccc;
color: #000;
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
list-style: none;
margin: 3px 3px 3px 3px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #ffffcc;
}
And screenpic of ff , ie chrome appearance. Any suggestions, I am usually bloody good with css. But this has me stumped.
As requested here is html for this element:
<div class="field"><label for="propertysuburb">Suburb </label> <input name="propertysuburb" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" size="50" type="text" class="medium" /></div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
What does the margin for the .suggestionsBox do? As an absolutely positioned element, I believe it will just ignore that.
The issue seems to be that you're not setting any top / bottom / left / right values to your absolutely positioned .suggestionsBox div; this leaves it up to the browser to determine where to put it.
Make sure your .field class has "position: relative;" on it, then add a "top: 20px;" and "right: 0px;" to your .suggestionsBox styles. Just adjust the top / right values if it doesn't line up correctly.
First off, a nitpick.
When using CSS3 with vendor prefixes, ALWAYS use the non-prefixed version last, otherwise you may (potentially) break something:
-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
As for your problem: I can't see the CSS for the .field div, but I assume it has a positioning context set as well (probably relative), otherwise the z-index on suggestionBox wouldn't work, and judging by the screenshots, it does. Now, what you haven't set is the actual position. The absolute positioning context should place the box in the top left corner of its parent (obviously, that's why the parent needs a positioning context too). If you need it to start at the parent's bottom, you also need to add top: 100%; to your .suggestionBox properties.
I can't really see anything else that might be wrong here.
To debug something like this, I would slightly modify your back-end code so that the suggestion list remains fixed and open, regardless of typed input. Load the page, then open the developer pane in Chrome, go to the Elements tab, and use the "magnifying glass" icon to inspect the misplaced elements. Play with the styles panel to discover which attributes are causing the incorrect offset (don't forget to try things like absolute vs. fixed position of the element or its parents). Once you have an idea of where things are going wrong, see if the "fix" is benign in other browsers.
This looks like it's most-likely a JavaScript issue. The suggestion list is most likely placed programmatically (given the position: absolute it seems certain), so I'd look to that code.
If it's not a JavaScript issue, the other possibility is that the "position parent" of the absolute element differs. Your CSS shows that the suggestion box is positioned absolutely, but we cannot see from your posted code what establishes the baseline for the position (how its nearest-positioned ancestor is defined).
One thing that can sometimes help with absolute positioning is to use the top style rather than the margin-top to move your absolutely-positioned element down.
Thanks to #mingos and #russelluresti
We have this fixed now:
css:
.suggestionsBox {
z-index: 2;
top: 59px;
right: 524px;
position: absolute;
margin: 69px 0px 0px 146px;
width: 207px;
background-color: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cccccc;
color: #000;
-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
}
and field :
.form .field { width: 50%; float: left; position:relative;}
Cheers Guys, perfect. I havent got Safari, but it works in the 3 I was interested in, and seems to be valid code now, which supports proper rules. Many thanks