I don't know how it has occurred and for the life of me, I cannot fix it.
I have a div which is hidden using display: none;
When a user clicks, I set display: block which shows a new layer.
The problem is that all the text is showing through from the layer behind it... How do I force no transparency from a div behind?
I have set no transparency or opacity in my css.
The layer I am showing only has the following settings:
.display {
background: rgb(255, 255, 255) url(/template/mobile/images/dot.gif) repeat left top;
display:none;
width: 250px;
height:100px;
border: 1px solid rgb(20, 20, 20);
margin-left: -5px;
margin-top: -100px;
float: left;
z-index: 999;
}
As you can see:
I've tried using a 1px background image - still transparent
I've set the background color to white - still transparent
I've tried setting the z-index so it is on top of everything - still transparent
I don't know why it is and how i stop it???
NOTE: I have deactivated the live site and this code can be viewed in testing at: http://dev.cutmyhair.com.au/search_results.php?keyword=waverley
NOTE: This issue is only occurring on the .mobi version of the site (so you need to view it on a mobile phone OR using a mobi emulator)
I was able to reproduce this using FF3 and IE8.
You need to set position to either absolute or relative.
.display {
position: absolute;
...
}
or
.display {
position: relative;
...
}
Are you sure it's a transparency issue? I see another problem:
height:100px
margin-top: -100px
This two together would make your div stay totally out of the page, if the float property is influenced by other elements around. Maybe post here the html portion and other related css rules, so I can understand the situation better. Anyway, first of all, be sure that your div is in the place you think it is, by using a good html/css debugging tool like Firebug or Chrome dev console.
Try using display:inline-block (instead of block). It seems to work better (more intuitively) with floated elements.
Related
This should be simple, but I can't figure it out:
Here is the site:
I want the logo at the top to be brought down by 20px. I'm using chrome and trying to mod the CSS in the developer tool to figure out what is keeping it stuck to the top, but haven't figured it out yet. I thought the obvious answer would be to increase the padding-top, but nothing moves when I add that in.
Played around with your code. Padding-top works, but on the div that contains your image - class="head-wrap". Just add padding-top:20px; to that element. It worked in developer console for me. Better than adding a margin to the <header> element as you won't reveal the body color.
full css you should be able to use
.head-wrap{
padding-top: 20px;
}
in the site-header add margin-top:20px; The css would be:
.site-header {
background: url(http://www.therunexperience.com/blog/wp-content/uploads/2014/02/TRESimpleWhite_small4.png) no-repeat !important;
margin-top: 20px;
}
EDIT:
Or for padding add:
.head-wrap
{
padding-top: 20px;
}
The following CSS, applied to an <a> and a <div> residing in individual <tr>▶<td> elements in a <table> (with border-collapse and td { padding: 0px; } set), works as expected:
a {
background-image: url("http://ibin.co/19rwR69EOigr");
height: 100px;
width: 120px;
display: block;
}
div {
width: 200px;
box-shadow: #000 0px 0px 13px;
}
If I apply any opacity to the <a>, the browser's internal layering seems to break horribly.
Note that the test picture's last pixel sits within the <div>'s box-shadow, even in the first example. (And it says opacity = ".99", if you can't see it in the image >.>)
Is this possibly a rendering bug that's managed to creep into both Firefox and Chrome? :P
See what opens and shuts in this JSFiddle.
Thanks in advance!
Quite Simple.
Thank you for clean formatting.
Change opaque ID to this:
#opaque {
opacity: .99;
z-index:-10;
position:relative;
}
http://jsfiddle.net/SinisterSystems/GbAYU/3/
What is happening is whenever opacity is set, the back-end method of CSS3 to interpret it throws some pretty wild z-index's.
Just set it to stack behind the other elements and all will work fine for you.
position:relative; - Cause otherwise it wouldn't accept your z-index property.
z-index:-10; - So that it places it behind the z-index of 0 of your other objects.
EDIT:
The default value of HTML elements does not support static as an object that z-index will apply to, hence the position declaration.
And it totally does with absolute, fixed, relative, or inherit, but not static.
I am making my website on SquareSpace and I am beyond frustrated.
I like to have a background (which squarespace offers user to do without code) and like to have some sort of semi-transparent cover on the portion of the background where the text is. I think it's called overlay(?).
Squarespace allowed user to add CSS code. I have no idea what to do. I tried to google, youtube and etc. but I can't seem to find how to do this. Can someone help me? I would really appreciate it. I spent so much time trying to figure this out. What I am trying to do is something like this (http://blog.squarespace.com). There's background, and there's semi-transparent on the top that covers portion of the background.
Add a div, set it to position: fixed, have all of it's location values (top, bottom, left and right) at 0, and give it an rgba() background.
Note that this will make anything under it unclickable (unless you also give it pointer-events: none).
Here is a jsFiddle example of the concept.
Madara Uchiha's answer will cover the entire visible window, not just part of it. It won't work on certain mobile devices, either (iirc, Android WebKit doesn't support position: fixed).
A better suggestion would be to do something like the following...
HTML:
<div class="wrapper">
text
<div class="overlay"></div>
</div>
CSS:
.wrapper
{
position: relative;
display: inline-block; /* You could alternatively float the div, this is just to get it to fit the text width */
z-index: 0; /* Not strictly necessary, but establishes its own stacking context to make it easier to handle compound/multiple overlays */
}
.overlay
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 255, 0.5);
z-index: -1;
}
JSFiddle showing previous version, with which the text is affected by the overlay, and current version, with which the text is not (and usage of pointer-events: none is unnecessary): http://jsfiddle.net/LGq8f/1/
Of course, if you don't want as fine control over the overlay area that the inner div gives you, you could instead just use display: inline-block or float: left/float: right, plus the alpha-valued background color, on the text-wrapping div and skip the overlay div.
Image Rollover, no JavaScript, no Link, pure CSS, code validate and Browser compatible.
Hello all, I have been working 24hours strait to come up with this fairly easy solution. I want to know if everything is all right and if there are ways to improve. It's quite elegant, here we go:
I have only one image "Logo" but it will show as 2 different logo each with a rollover effect.
I use a sprite (only 1 image containing my 4 logos) and I just change it's position.
Here I insert my image in a div with
<div id="logo-rollover-1" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Then I insert in another div the same image but with a different id
<div id="logo-rollover-2" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Now my CSS:
.logo-rollover {
background: #ffd42a url('path-to-your-image');
width: 230px;
float: left;
height: 130px;
overflow: hidden;
position: relative;
}
.logo-rollover img { width: 460px; height: 260px; }
.logo-rollover :hover { opacity: 0; filter:alpha(opacity=0); }
#logo-rollover-1 { background-position: 0px -130px; }
#logo-rollover-2 { background-position: -230px -130px; }
#logo-rollover-2 img { right: 230px; position: relative; display: block; }
Explanations: when someone hover an image it becomes transparent and show the background witch is the same image but with a different position. opacity: 0 for Firefox, Google and filter:alpha(opacity=0) for Explorer. position: relative on the .logo-rollover class is for compatibility of hidden overflow with IE6 & IE7. display:block; is added to the id img for the Opera browser.
No Hack: When there is no link, there is no need for href="#" or "javascript:void(0)"
Advantages: instead of requesting 4 (or more) images, there is only 1 image (the total size of 1 image sprite is smaller then the total size of 4). the rollover is instant as the image is already downloaded. No hack, no false link, code validate. Add a title to the image. The only browser not rolling over is IE6 but the site is not broken, the logo show correctly. There is a hack for activating hover for IE6 but I didn't bother as IE6 is dead.
Tip: use the same path for your image everywhere.
I mean the "path-to-your-image" needs to be the same for all call. Because of browser caching.
Is this the best elegant way? Can this code be improve? I hope it will help someone because it was a real pain to develop thank to others user here I found some tricks here and there and came up with this.
Comment appreciated.
Why not completely removing inner <img> and create logo using CSS background?
<a id="logo">Logo</a>
#logo { width:100px; height:60px; background:url(path/to/logo.png) 0 0;
overflow:hidden; text-indent:-1000px; display:block; }
#logo:hover { background-position:0 -60px; }
Explanation:
<a> is the only element that supports :hover pseudo selector on IE6. If you want native solution for hover logo you must use this tag. Some people sometimes wrap other elements ex: <a><div></div></a> to give div hover property by accessing it from CSS using a:hover div { }
overflow:hidden; and text-indent:-1000px; hide text from inside the div. It is a good practise to leave text inside for accessibility reasons.
background sets the background color of your div, initialy alligned to 0, 0
background-position does the actual trick and shifts the image - it is moving it within the 'viewport' div making different part of the image visible.
nice description! I see one small improvement: put the background und no-repeat definition in your .logo-rollover class to have less css code (you have to write it only once instead of twice)
I have an absolutely-positioned DIV that I need to trap onclick events for. It turns out that, in IE7, the DIV seems to have no 'footprint' for things like clicking and even cursor. For example:
div {
width: 200px; height: 200px;
position: absolute;
border: 10px solid black;
cursor: pointer;
}
In IE7, that DIV has no 'footprint': it doesn't react to onclick(), and its cursor doesn't change to the pointer. Curiously, it DOES handle both those over its border - hence the large border in this example. Setting a background-color:
div { background-color: #fff; }
fixes the problem. But, in this case, that's not possible - I need the DIV to have a transparent background.
I've come across this bug in the past, but I cannot for the life of me remember the IE hack to fix it.
Try using a transparent background image.
I would suggest using a 2x2 or bigger .gif that is all transparent pixels. Set it to repeat on x and y and IE shouldn't have an issue with the clicks.
background: transparent url(path/to/spacer.gif) repeat left top;
/* Not all of that is necessary, but I have a tendency to define it anyway. */
Had the same problem and didnt found a better solution than the transparent gif. Note that this problem also occured in IE8 for me. You don't have to use a 2x2 px gif, 1x1 px is enough.