Hey there. I have an image that I am absolutely positioning. In Firefox it is where it is supposed to be, in Safari it is all whack. What is going on and what is a surefire way to know where it sits.
Without more details, I'd make sure you understand you have a firm understanding of CSS positioning by reading a page like this one.
Make sure it's parent element is set to a position such as relative. I'd start there.
Related
If you check the site that i am currently working on www.darecreations.suprex.me I was able to get one of the angle laptops on the left side to hide behind the center mac-pro but I am having problems hiding the other mac image behind the center mac like to did not the left side and z-index was not working is there any way to solve this issue thanks in advance
If you explicitly set position: relative on the middle and right laptops the z-index will work. The reason is:
Although z-index is not a difficult property to understand, due to
false assumptions it can cause confusion for beginning developers.
This confusion occurs because z-index will only work on an element
whose position property has been explicitly set to absolute, fixed, or
relative.
As explained at the site below:
http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
Also, you mispelled "Perfect" on your site. :D
I'm creating my personal website build on wordpress and now I'm remaking template. After whole day of doing css, html and php...and looking for a lot of things of internet, I encountred for a lot of people known problem.
Somewhere in my site, some element is giving me margin which i don't want. You can see it on the picture below:
I know the rules of this website, to give code and you will try to help me, but now, I don't know where is the problem. So if someone with bigger experience and little bit of time can look at my page, I would be really thankfull.
My site si svrcek.webfix.sk
You front slider has a <p> in it that has margin.
delete this node and the space goes.
As it is empty do you need it? and if so can you add styling to it?
I don't know why you have this margin, but this CSS will fix that :
.front-slider {
float: left;
}
Your .front-slider element is causing the gap. Add a position:absolute to fix it. (If it's not the markup of the slider, you could also remove the redundant <p> which initially is causing the problem.)
To have really clean code, you should remove all absolute positioning from the child elements and just position the .front-slider wrapper accordingly. Also it seems like your green navigation buttons don't work. Probably there is an option to position and style the soliloquy-next and soliloquy-prev buttons which seem a but redundant at the moment.
I've tried this from so many angles but can't figure it out.
See my map here: http://defendiendovidas.org/test.html
I need the country names in to appear on top of everything else. z-index isn't helping, even though my span is position:absolute.
Any pointers to achieve this would be greatly appreciated!
P.S. if anyone has a suggestion for how to build this map better, I'd be keen to hear. Thing is, I want the fade-on-hover effect. But my images are overlapping and therefore as you can see with Brazil, the hover is kind of conflicting with nearby countries (images) that are positioned "on top" of Brazil. map/area is no good because it doesn't allow for area:hover...
Thanks!
The solution is to apply the opacity to the img and not to the entire li,
since opacity and z-index are somehow connected.
Also, since you've asked if anyone has a suggestion how to make this map better, well...
Your code was really messy and you've also used lis outside of a list for some reason, so I kind of changed a lot of the HTML too.
Here's the Fiddle: Link
Hope it helps :)
I am not able to see a full map here. You have mentioned it too. Well there is also no other span found!
The map is somehow cool. But if you want the images to ride over the image. You might use the position relative!
Have you tried that? You have an absolute, but absolute works on the div or container its relative too. If there is no container having position relative the main body tag is considered to be the one. So try giving this image a relative position. Then add the z-index and absolute position!
Try Position:relative or Position:absolute
Give z-index a shot too, z-index:50
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.
I have a colorful menu ("Destaques", "Roupas", "Sapatos" and "Fale Conosco") who is working, but IE7 is behind the gallery is on the page, as I tried to solve using z-index, but nothing seems to work, does anyone have any tips?
page link
Hovering the mouse over the menu using IE7 realize what I'm talking about.
There's a lot going on here, but I'll try to take a crack at it.
First, try to work on getting your HTML to validate. There's a lot of invalid HTML that could be leading to issues.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.montepage.com.br%2Finfantile%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Second, I believe IE7 does something funny with z-index. It sort of resets it's z-index based on it's parent. I know I've ran into this issue in the past. Basically, if two parent elements like this:
<div id="parent1">...</div>
<div id="parent2">...</div>
If "parent1" has a lower z-index than "parent2", all children of "parent1" will be lower than "parent2", regardless of their z-index value. What you can try to do is make sure "parent1" has a higher z-index.
From looking at your code, it seems like the parent elements are:
<div class="colorido"> <!-- the menu container -->
...
<div id="corpo"> <!-- the image promotional container that rotates -->
...
See if setting "colorido" to a higher z-index than "corpo" works. You might have to set them to "position:relative" so that it works.
It's hard for me to read that HTML and CSS, there's a lot going on here. So, I might have the wrong containers, but hopefully the idea can help you.
This page might help lead to some answers as well as some other tricks to try:
http://aplus.rs/css/ie7-bug-will-not-render-z-index-change-on-lihover/
Hope that helps!