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 :)
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;
}
I have a tooltip popup with a z-index at the highest level. When the user clicks the tooltip in IE7, it displays under content on the page, instead of above it. This issue is only occuring in IE7.
.tipBody {
background-color: #FFFFFF;
border: 1px solid #000;
margin-top: -18px;
padding: 10px;
z-index: 9999;
position: relative;
}
I suggest you to try adding !important after the property value, like this:
.tipBody {
background-color: #FFFFFF;
border: 1px solid #000;
margin-top: -18px;
padding: 10px;
z-index: 9999 !important;
position: relative;
}
See if that works.
In IE, positioned elements follow a different stacking order. You can usually fix it by giving the parent of your element a higher z-index.
I suggest you read the following link, it gives you a good explanation about the issue, and how you can solve it.
http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
Hope this helped.
Is it possible to create a border like the flowing image with css? Any hints will be appreciated
#sidebar h4, #sidebar-alt h4 {
background:url('images/widget-title-bg.png');
color: #333333;
font-size: 22px;
font-family: Arial, sans-serif;
font-weight: normal;
margin: 0 0 10px 0;
padding: 7px 0px 11px 0px;
}
EDIT: Made some changes according to your comments. Try:
<h1 id="progress">
<i></i>Recent Posts
</h1>
#progress {
display: block;
max-width: 200px;
min-width: 150px;
position: relative;
margin: 50px auto 0;
padding: 0 3px;
border-bottom: 10px solid #ECECEC;
font: bold 26px 'Dancing Script', cursive;
}
#progress i {
display: block;
position: absolute;
width: .8em;
height: 10px;
left: 0;
bottom: -10px;
background-color: #4287F4;
}
http://jsfiddle.net/userdude/z45QJ/4/
I'm not a big fan of the position manipulation, but all browsers should support and display this nearly identically, the only possible problem being the font's displa may be slightly differently in different browsers. However, IE7-9 should interpret everything else just fine.
Too bad the whole wuuurld isn't on WebKit:
<div id="progress"></div>
#progress {
width: 300px;
height: 10px;
border: none;
background-color: #ECECEC;
border-left: solid #4287F4;
box-shadow:inset 2px 0 white;
-webkit-animation: slide 10s linear infinite;
}
#-webkit-keyframes slide {
from {
border-left-width: 0;
width: 300px;
} to {
border-left-width: 300px;
width: 0;
}
}
http://jsfiddle.net/userdude/z45QJ/1
It could be adjusted to go both ways. However, it only works on WebKit browsers (Chrome, Safari [?]). If that's ok, let me know and I'll add the return trip.
There are four ways to do it. I demonstrate four ways in this JSFiddle, and here are some explanations.
If you're not sure, just use Method B.
Method A
Method A has the advantage that it's the most compatible but the disadvantage that it requires extra HTML. Basically, you're giving an outer div the blue border and an inner div the white border. Your HTML will look something like this:
<div class="methodA">
<div class="container">
Method A
</div>
</div>
Your CSS will look like this:
.methodA {
border-left: 10px solid blue;
}
.methodA .container {
height: 100%;
border-left: 10px solid white;
}
Method B
Method B has the advantage that there's no extra HTML, but the disadvantage is that it won't work in IE before version 9.
.methodB {
border-left: 10px solid blue;
-webkit-box-shadow: inset 10px 0 white;
-moz-box-shadow: inset 10px 0 white;
box-shadow: inset 10px 0 white;
}
You can mitigate IE's compatibility issues using CSS3 PIE, which makes box shadows behave in Internet Explorer (along with other CSS3 features).
Methods C and D
This JSFiddle shows two other methods, which I won't describe in as much detail, but...
Method C makes the blue border a shadow. As a result, it can "cover" other elements and it also changes the size of the element. I don't love this solution, but it might work for you. It also suffers the compatibility issues of Method B.
Method D puts two divs inside of the element: one for the blue border and one for the right border.
it is not really complicate and no extra HTML is needed.
h4:after {
display:block;
content: '';
height:4px;
width: 1px;
border:0px solid #ececec;
border-left-width: 10px;
border-left-color:#4287F4;
border-right-width: 90px;
}
http://jsfiddle.net/N27CH/
Check this link Visit
(http://jsfiddle.net/qD4zd/1/).
See if it helps. This tells you about the application of gradient. See how it is done.
Also why not use directly the images that you want as the border.
Check out for "Gradient" in Css. This might answer your question.
I studied some usage of "canvas" tag in HTML5. That is preety much informative about gradient specification and is also more readable than the traditionl HTML4. So for this question i also want to request the questioner to look at the "canvas" tag in HTML5. check the link below.
Link: http://html5center.sourceforge.net/Using-Unprefixed-CSS3-Gradients-in-Modern-Browsers
Link: http://www.sendesignz.com/index.php/web-development/111-how-to-create-gradient-and-shadow-effect-in-html5-canvas
Second link is more awesome. Cheers.:)
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 replicate the CSS 'Vignette' effect, detailed on Trent Walton's site.
.vignette1 {
box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
-webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
-moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
float: left;
}
.vignette1 img {
margin: 0;
position: relative;
z-index: -1;
width: 320px;
height: 247px;
}
It works well in isolation, but has problems on my production site, where the background settings for a parent div override the z-index on the image - live jsFiddle demo here.
The second approach - mentioned in the original article's comments and included in the demo - works well, but my image has to be wrapped in the tag - it can't be below it.
page has a solid white background, you're giving the image a z-index of -1, so it's going underneath that div. There are several workarounds, depending on how your final design is going to look, but if you just make #page transparent it works:
http://jsfiddle.net/tA8EA/
Or you can also set page to position realtive and give it a lower z-index than the image:
http://jsfiddle.net/PEgBv/
In the end I found the' Overlay & Inset Method', the second of Jordon Dobsons's techniques to be the most effective and least reliant on negative z-indexes:
/* Border & Vignette Setup */
figure{
position: relative;
display: block;
line-height: 0;
width: 500px;
height: 333px;
margin-bottom: 2em;
border: 1em solid #fff;
-webkit-box-shadow: 0 .1em .3em rgba(0,0,0,.25);
-moz-box-shadow: 0 .1em .3em rgba(0,0,0,.25);
}
figure::before{
content: "";
position: absolute;
top: -1em;
bottom: -1em;
left: -1em;
right: -1em;
}
figure::before,
figure img{
outline: 1px solid #ccc;
}
figure.vignette img{
z-index: 1;
position: relative;
display: block;
width: 100%;
height: 100%;
}
/* Overlay & Inset Method */
figure.overlay.inset::after{
/* Mozilla Settings */
-moz-box-shadow: inset 0 0 150px rgba(0,0,0,.75);
/* Webkit Setting */
-webkit-box-shadow: inset 0 0 150px rgba(0,0,0,.75);
}
(jsFiddle demo using original layout)
I've post an answer with dynamic image list loading here. Instead of under-z-indexed image there's just DIVs with background-image and image dimensions set.