I'm having trouble getting my head around an absolutely positioned :before element. I'm after a big quote mark to sit behind a testimonial. I used a :before element as it is a font and is therefore scalable for retina displays, saves an extra http request for the image (I don't have any other images I could make a sprite with) and it also affords me more flexibility of position (a background image would need padding on the left of the element, which would mean playing about with my grid and losing uniformity across other pages I'm using the CSS on).
Hope that makes sense! The problem I'm encountering is that the :before element is covering the text above it. Not much of an issue if it's just text (although still an issue), but there's a link there that isn't completely clickable…
Here's a jsFiddle of my issue:
http://jsfiddle.net/tempertemper/KzQZQ/
I'd assume as the :before is on the li element it would sit behind the blockquote and cites but it doesn't look like that's the case.
I've tried z-index and can't seem to get it all working properly. I've also tried changing the blockquote and cite's position value but no joy.
Thanks for taking a look :)
I did notice the problem in Chrome as well. By just adding a background to the :before you can actually see what is happening (a trick i often use), or you could try the 3D view in Firefox. Your suspicion was right, the brace is actualy lying on top of the link. This makes sence as the DOM is rendered before the css is apllied. Adding a z-index did solve the problem though. I updated your fiddle: http://jsfiddle.net/KzQZQ/1
This should solve it. Strange that this did not work for you, but perhaps you where doing something wrong... Let us know if you have any more issues with this.
Related
I've been looking at this small issue for a while and I can't seem to fix it. It's an firefox only bug it's fine in IE Chrome etc.
This website I made for a client shows the issue. On the start of the page you see 2 wheel PNG images Three of these images are there, you can switch the z-index by clicking the round circles on the bottom of the image.
As you see the Black colour is slightly more down, I can't seem to wrap my head around the issue since the line height is 0 and the way the black image is positioned is the same as the grey one. They are slightly downsized due to a max-size: 100%, but resizing them to the proper (1000px) doens't seem to help either, (did this locally).
If you open the pictures in photoshop or w/e they're exactly aligned.
Anyone have any idea why it goes wrong on Firefox only?
--> example
Removed the example since it's a website.
Very weird issue indeed. The only thing way I could get it to go away was to absolutely position the wheels. this would require you to set a height on #infographic and take off the margin-top:-100%;. Depending on how you use the #infographic container this solution might not be ideal for you, but at least something to consider to help solve your issue.
It's because of the whitespace between the elements. Unfortunately, some browsers observe it and thus some space is shown although it shouldn't. You can use this workaround:
Generally work with rem instead of em, you need it for this workaround to work easier. First you have to set the font-size of .infographic to zero. Every element inside your .infographic will now become a font-size of zero because you're using em. That's the reason why you should now change to rem, at least for the elements inside .infographic.
Now you're done.
I'm working on a website where I want to display a giant image slideshow in the background along with a quote and a link, which for technical purposes (EDIT: described in comment below) must reside in the same parent element. On top of all that I'm displaying my content, and at one point I want the background image to display through the content, which I have accomplished by setting a margin between two of my content elements (#header and #main). It's a little hard the describe, but I hope this jsfiddle gives an idea of what I'm doing.
The problem is that link and quote displayed in the background is not clickable, since the click is instead directed at the element above displayed (#header). I know about pointer-events: none; but that's no good since I need IE support and being able to interpret clicks in the #header element.
I guess this is in some way attributable to stacking context mentioned in this answer, but I just can't get it right. I'm unable to get the desired layout without using a negative z-index on #background, while the links inside #background would probably need to be put in a parent of higher z-index. The reasonable thing would probably be to put it somewhere else in the markup, but as stated above the link is related to the rest of the content inside #background. Is it possible to make the links stacking context render "above" the stacking context of its parent element?
The code is a bit too long to do any good here, and not really that complex, so please refer to aforementioned jsfiddle.
Make the giant image a background of the <body> and don't create an element with a negative z-index for it. Then your link will be clickable - DEMO
Please see link below:
http://cssmenumaker.com/builder/111528
I am trying to figure it out. What I don't understand is how it works - I cannot fathom how the sub-menus remain hidden and don't interfere with the rest of the page.
Allow me to explain further - when I tried to make my own I had it in my mind that I would have to hide and show the submenus (I was using DIV tags thinking I was clever) but that when made visible they would then take their place in the DOM and move everything else out of the way (something I obviously wanted to avoid but don't understand entirely how to accomplish). When I tried to make mine using JS it didn't work as I wanted. I changed the 'display' and 'visibility' properties of the nested DIV tags (sub-menus) to 'none' and 'hidden' respectively until an onmouseover event and it just doesn't work correctly and I have no idea how to make something work like the example.
I am looking at the hover commands and cannot see how this makes the sub-menus invisible until hovered over. I can also only see the display:block command as the only reference to how they are displayed but do not understand how they don't move everything else out of the way when displayed.
Does this make any sense? Can anyone explain how the example works, what the DOM model looks like and how all the parts of the DOM are interacting with each other? W3C is not much help here.
My impression was that the DOM model is static and will display things in box fashion unless you add some complex z-index or some other method so what am I missing here? I would also prefer a pure CSS solution which is why I posted the example above, I want to understand all this much more than I currently do.
Much obliged to any help!
The answer is: position absolute.
Position absolute removes the elements from the static flow, thus not pushing away the other elements. To control the absolutely positioned elements, you can wrap them in a relative positioned element: the offset parent. This way, you can create blocks/menus/etc. with absolutely positioned elements within, in a normal flow.
For a brief explanation: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
The display none/block part is just hiding/showing the submenu's. If a parent got :hover, you can show the submenu with display: block.
I've designed a website with an elaborate transparent header that has to pass over part of the main section of the page. I'm trying to keep the number of images used in the website down to a minimum, partly for size and partly for cleaner markup.
I want to start putting clickable items in a blank area under the transparency. I managed to get the image to overlap the div in question by playing with the z-index. Now of course, it's unclickable.
Does anyone have a clever solution to this problem? I can think of several different ways "around" the problem that are less ideal, but I'm hoping to avoid those and find a solution that doesn't use JS or an imagemap. I've tried to use a nested div with a higher z-order (outer div is -1, inner div is 1), but it doesn't work.
It turns out that it wasn't necessary at all to change the z-index. All I had to do was use the negative margin and I could click the content in the transparent area under the image. My mistake was making the initial assumption that I would need to change the z-index for some reason. If I had attempted it without touching the z-index, It wouldn't have been an issue at all.
you can $.Event to make an event and then trigger it when ever needed :)
prefectly cross browser and easy
Considering the attached image, I want each "cell" (so to speak) to have a DOM element over it so that it can be clicked, set a background and so on.
I tried making a table and with slight adjustments, made it work for Firefox. I opened other browsers and the fine tunning in Firefox did not apply to them.
How would you do this? There are 465 cells that need to be clickable and all superimposed over the cells in the image with as little error in positioning as possible.
EDIT:
Here's the JSFiddle: http://jsfiddle.net/Francisc/PUPHz/embedded/result/
This is how the table looks in various browsers:
http://89.45.196.35/~francisc/chrome.jpg
http://89.45.196.35/~francisc/firefox.jpg
http://89.45.196.35/~francisc/ie.jpg
Thank you.
Here is what I would do, it's messy but it could work. Make a single div fit over the top left and find out the best width and height (Guessing you know that from the table that you tried)
You will have to make the image go under the divs so I think you have to give it an overlay attribute or something like that (Can't remember what it's called) so with that in mind you have the class for each div to be width: XXpx height: XXpx float:left and that should be it. From there you can make the :hover class to make the background change and a selected class also if you need to.
Hope it helps