I am facing an issue with Z-index property of CSS in IE 6.0
HTML
<div id="banner"></div>
CSS
#banner{
background:url(pix/banner.PNG) top no-repeat;
z-index = -1;
}
URL: http://www.whizlabs.com/examprep/
In IE 6.0, it shows a line on the forehead of girl, showing in the banner on the top of the page. In other browsers, line is not coming. How can i resolve this issue ?
Please help me.
Thanks
Devesh M
There is really no reason to break the girl up into separate images.
Just use a single image and then position it relative to the top right of your wrapper
#banner{
background:url(pix/girl.PNG) top no-repeat; /* where girl is the whole girl */
position:relative;
top:0;
right:150px;
}
Then make sure that the is just under your header div
Z-index has no effect on statically positioned elements, therefore you would need to set the css position property to something else, like relative, but I don't think that you should use z-index in this case.
For a quick fix though you can try something like this:
* html #banner { margin-top: -1px; }
This above trick only applies to MSIE6.
Try puting the markup of the line before the markup of the girl, and place both using css. It usually worked for me in similar cases.
Also with Z-Index make sure to use numbers starting at 1.
If you are having trouble with an element, try giving it a Position property as well as give its parent a Position and a Z-Index.
z-index only works on positioned elements.
Plus, you can only swap the depths of elements that are all contained by the same element - nested elements (one inside the other) cannot jump out of their nesting!
Related
I have the following website: http://dev.driz.co.uk/phase/about.php
If you view the website in IE7 you will see that the drop-down menu in the top left does not appear above the main content area. This is because of the stupid IE7 z-index bug, however the normal fix of making the parent element have a high index to make it fix the child would not work in this instance as I need the parent header to sit under the main content...
Any ideas on how to fix this based on the layout structure I have? I've tried most of the IE fixes on the net, including a jquery solution that resets the z-indexes in a loop, but none of them have solved the problem.
You need to give your header a z-index less than your nav element.
IE7 is a pain with z-index, you need to habe a structure like this.
Header - z-index:2
Content - z-index:3
Nav - z-index:4
Along those lines, sorry I can't be more help.
I've found that when having problems with z-index in IE, that setting the elements you want to be affected by the z-index to have a relative position.
i.e.
#block {
z-index: 1;
position: relative;
}
i'll try to make my question really simple 2 you
Basically, i have a DIV, in which i have a picture
What CSS styles should i apply to the picture to position it correctly inside the div
with the condition that everytime i resize the browser window it stays there (inside the div) at the same distance from the borders
Sorry for wasting your time but i'm still a newbie which needs help, thank you alot!
EXAMPLE HERE
code
html
<div id="super_div">
<img id="eyes" src="images/eyes.png" />
</div>
css
that's the question :)
You need to look at absolute positioning. First, you set the containing div's position attribute to relative. For example:
#super_div
{
position: relative;
}
Then, you set the image's position property to absolute and use the top and left or right properties to place it inside the parent div. So, for example:
#eyes
{
position: absolute;
top: 20px;
left: 20px;
}
That's how you make the image keep its current position no matter what. Here's a link to an article explaining the basics. Hope this helps.
This will get it horizontally centered:
margin:auto;
If you need it vertically centered as well then things get a bit more tricky. You can either resort to tables, use a background image (if this is appropriate to your situation) or fiddle with the css. I used the code on http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/ as a basis for solving a similar situation I had a while ago..
I have this code, which is behaving differently in firefox vs chrome.
<h2>Presenting
<span style="font-weight:bold">Analytics by </span>
<div class="fi_logo"><img src="IMAGEURL" /></div>
</h2>
the class fi_logo referenced above is :
.fi_logo {
min-width: 35px;
height: 35px;
margin-left: 40px;
position: absolute;
top:-5px;
left: 262px;
float:right;
}
In firefox, there is an offset caused by margin-left in fi_logo between the image and the text(in h2). If i dont add the margin-left, then the image overlaps the text in chrome.
So, in short, if i add the margin-left property, it works in chrome, whereas it causes a large offset in firefox. Any suggestions on how to solve this?
Here it is: http://jsfiddle.net/bikerabhinav/mpL79/2/
Use combination of position relative and absolute.
Also, do not use div inside h2 - bad markup
Maybe if you set .fi_logo display:block
I think, your problem is with specific browser version.
I checked it in FF 3.6.2, which return same result like Chrome
Well it sounds like you still haven't sorted this out so I will make a little more commentary.
I cannot say exactly what is causing the browser inconsistencies without doing a bunch of trial and error, but I think that the way to fix it is to rethink the way you are positioning the image.
It seems awful convoluted to be positioning the img absolutely, floating it, and adding a left margin. Given all of that it is unclear what precisely you are even trying to accomplish with this code.
If you edit your question to describe how you want the image positioned, I (or someone else) would be more than happy to recommend a good approach
Your html is invalid. You cannot have a div inside a heading. I also question the float and absolute positioning on the same element. I also wonder if you are using a doctype.
Your image tag inside the div is not closed properly, and in the css the class definition is wrong; the class is defined by a dot (.);
Ok, I'm stumped!
If anyone has a suggestion or two on a CSS / JavaScript fix for an IE7 z-index issue on this page without changing the DOM structure much (it's set up for easy tab usage) I'd be incredibly happy to try it out.
On this page, IE7 renders the bar that spans 100% of the width of the page above everything else, while I actually need to cram it very specifically between the text and the hero image (as seen when viewed on any modern browser).
Here's the link.
Thanks.
IE7 has known bugs with z-index, see: IE7 Z-Index issue - Context Menu
In this specific instance, you can fix it by changing a few parts of your CSS. Complete each step and check the progress as you go:
On #container remove position:relative .
The z-index issue is now fixed, but everything is in the wrong position!
On #thumbnails and .pane_img remove these properties: position, top, left, z-index.
On .pane_content, set left:50%; margin-left:-480px; bottom:90px.
On #learn_more_btn and .renova_logo, repeat the left: 50%; margin-left: ??px method to place the elements back where they should be.
Trying to get sticky footer to work, but my layout breaks it. Have messed about in firebug for ages, no joy!
It feels like I am missing one silly position rule or something, but can't find where for love nor money
Edit: For clarity, I want the footer to be at the base of all page content, and not fixed to the base of the visible space (i.e through position: fixed; bottome: 0;)
Linky
edit: in that case...
wrap elements:
div#top_sidebar and div#bottom_sidebar with div.sidebar_right and add it float:right css rule
then remove from div#central-block position: absolute - voila! :)
Remove position:absolute; from #central-block and adjust it's height in some other way.
you miss some clears. #content-wrapper does not get the right size...
add a clear both element at the end of your #content-wrapper div and inside the #central-block. Also #central-block is position absolute, it need to be relative or static in order to adapt to the content size.