When my page loads in IE (7,8) my background image in the left column li's shows for a split second before CSS3 Pie kicks in, adds the border to the li elements it's meant to and then removes the background image from my list items like this...
http://goo.gl/xCz39
In FF this works if you wanted to see what it is meant to look like. I'd appreciate a work around for this if someone has one. Many thanks!
Also an absolute image link in your CSS could do the trick in some cases.
Like:
#yourdiv{
behavior:url(css/PIE.htc);
-pie-background:
url(permalink-here/your-image.png) right no-repeat,
url(permalink-here/your-image.png) left no-repeat;
}
I suspect that the problem is this: the element generated by Pie, for the border, has a higher z-index than the original element which has the background image.
Try giving
#content-left ul li a{position:relative;}
Or try another of the solutions suggested here
Related
I'm trying to do something which I thought would be really simple..
I want to display a background image at the bottom of each table rows (or cells, whichever works best) but i'm getting some alignment issue.
The image always seems to align to the bottom of the cell content, but ignores any padding.
border-origin:border-box doesn't seem to have any influence on the result either.
Setting the background on the row itself (ie. the tr tag) produces the problem.
The background uses this syntax: background:url('...') bottom left repeat-x;
See the following screenshot of the results - i've added a semi transparent outline of the cell just to show the boundaries. The red dotted line is the background.
Here's a fiddle for it: http://jsfiddle.net/bendog/gvtqwhw0/
(note: the fiddle CDNs to bootstrap, which i'm using for the project)
One would think this should be easy...
The problem occurs on my latest Chrome and Firefox on Mac (but haven't tried other browsers yet)
Use background-position adjust pixels wherever necessary
tr {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIzMDBweCIgaGVpZ2h0PSIxMHB4Ij4NCgk8bGluZSB4MT0iMSIgeDI9IjMwMCIgeTE9IjEiIHkyPSIxIiBzdHJva2U9IiNlOTRjMWEiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSIxLCA1Ii8+DQo8L3N2Zz4NCg==) repeat-x;
background-position:0% 104%;
}
Working fiddle
http://jsfiddle.net/gvtqwhw0/23/
Oh, well, do I feel a bit stupid!
The extra padding was blank space part of the image itself.
It works fine with a corrected image: http://jsfiddle.net/bendog/gvtqwhw0/24/
Here's the updated image tag (apparently I can't post a link to jsfiddle without copying some code here too)
tr {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMDAgMi4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMDAgMi4yIiB4bWw6c3BhY2U9InByZXNlcnZlIj48bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNFOTRDMUEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWRhc2hhcnJheT0iMSw1IiB4MT0iMSIgeTE9IjEiIHgyPSIzMDAiIHkyPSIxIi8+PC9zdmc+) bottom left repeat-x;
}
It became apparent when I used the same effect on a heading tag.
I want to hide two images (partially) behind my center/main div ,just like it is shown on the picture i included [the images are blue and the center div is brown,the darker blue color is the part of the image that is supposed to be hiden behind the div].The two images are included in the HTML (as tags).They have to be (as they currently are) part of the HTML and not "injected" via CSS.
The positining of the images isn't a problem,but the "overlaping/hiding" is.I have tried so many times via z-index but to no avail.
Can anyone help ?
link to picture. http://i.stack.imgur.com/ZCKdt.jpg
If you're looking to partially hide them behind the main div, you can either set the parent container (your body tag, if nothing else contains the main div) and add your images in css using background-image: url(image1.png), url(image2.png); and then background-position: left center, right center;. You can also use pixels or percentage to determine the positioning of the horizontal and vertical, respectively. That way, you don't have to bother with the z-index.
However, neither this, nor z-index will solve your other problem of having the images partially visible. For this, you can set the colour and opacity of your main div's background with background: rgba(0, 0, 0, 0);, where the first three zeros can be any number from 0 to 255 which represents red, green, and blue, and the fourth zero represents any number from 0 to 1 (as decimals) which determines opacity. The lower the number, the more transparent the background is. The more transparent it is, the more you can see the images behind it.
Alternatively, you can use opacity: 0; in the same way as above
Without seeing your HTML/CSS, it's going to be harder to diagnose the problem, but it sounds like you're confusing body elements with positioned elements. Z-index won't work for body elements, so you should try to place the blue images into a div and pull that div behind your brown div.
You can find more info and a jsfiddle example at this older post: Hiding a image under the div
I am having issues with my navigation bar CSS.
I want it to look like :
http://i39.tinypic.com/28is4uw.png
But this is what I'm getting:
http://i40.tinypic.com/akecl5.png
The only way for me to make it work like that is by using:
.under-menu { position: relative; z-index:999; }
but this kills the submenu links.
Thanks a lot!
Not a perfect solution, but at least some if we want to support IE, if not just adding
pointer-events: none;
Will fix the problem. This demo doesn't include pointer-events.
Here is a demo:
CSSDesk
In summary, I added the wave background inside the dropdown (in the li where the link and the drop ul is), and the effect is almost the same with your second try, with the only differents that I mask the top part of the drop down with the background that I added in the LI.
You will see that the wave background shadow becomes ticker, since the other background is still there (you can hide it with JS then it will become better, but since this is only a html/css topic I dind't add any JS )
So when you hover on the LI element the overlay background shows.
So that overlay background should be added for each li with drop-down. (like I said not a perfect solution)
I am trying to do a very simple tab setup on my site, but I'm having some problems because of the margin/padding pixel differences between firefox & chrome. Here is a jsfiddle link to what I'm talking about: http://jsfiddle.net/xqhf6/3/
Here's what it looks like in chrome:
Here's what it looks like in firefox:
Basically, here's the setup I have:
.mydiv { ... } : each box is a mydiv that has a padding of 6px and a
1px borders on left, right & top.
.header { ... } : contains the two
divs with borders at the top and has a bottom border
.subheader { ...
} : sits underneath the header (contains other stuff on the right
that is irrelevant).
I have tried to set a color for the subheader, tried to increase its z-index to be greater than that of the header and yet nothing works. I just want the little dangling borders to go away.
Help would be greatly appreciated, thanks Stack Overflow!
UPDATE Here is a jsfiddle link to what I'm talking about: http://jsfiddle.net/xqhf6/3/
UPDATE 2 In trying some of the options, it looks like my best bet is try and figure out a way to use the subheader to somehow mask the dangling borders. Not able to do that (as I mentioned, nothing works when I play around with z-index/subheader opacity & color)
Ringo
You get some weird effects if you try to apply a border to an inline element. Change your <span> elements to display: inline-block;.
Preview: http://jsfiddle.net/Wexcode/2A2s8/
By default, only the text of links is clickable in IE 6. I’d like to make the entire area inside the link (i.e. including padding) clickable as well.
I also need this area to be transparent, as the link covers half of a photo. Adding a background color makes the padding area clickable, but defeats the object, as the link is hidden.
I could have sworn there was a way to do this.
display: inline-block; usually works for me.
display: inline-block is the correct answer, as Kobi says. There is no div or transparent div behind it, just the link element. When the inline-block attribute is applied to it, any padding (and I think line-height) becomes as if it were part of the link.
I remember having come across the same problem but my recollection is hazy about the proper workaround (and if there even was one).
Can you try giving the link a background-color: transparent or a transparent background image? That might work.
If nothing else helps, give the surrounding element a Javascript onclick attribute, and cursor: pointer to simulate link functionality at least for those with JavaScript.