I have a theme image which I am getting from an infopath and proccessing through xslt. I am using this image as a theme for header of my site. Here is my current structure
<div id="mainContent"> testlink</div>
<div id="theme"><img src="abc.jpg" /></div>
I am placing my theme behind my header bar by position:absolute and z-index:-1
Now my issue is, I have to make this theme image clickable. However if I have a link on mainContent div, that should also work. Also I can't use image as background as I have to make image path configurable (through infopath) and can't hardcode it in css.
In IE browser, above structure worked fine as IE allow us to access lower z index div, and I can click it. however other browser are not. I require a universal solution which should work in IE 7+ and latest version of Firefox, Chrome and safari
Note: I am new in posting question on the forum, so please let me know in case anything is not clear in my question
If you can change your html, a solution is to put the theme div first, and put both divs in position:absolute. You don't need z-index then.
A simple example can be found here: jsFiddle example.
The css code being :
#theme {
position: absolute;
top:0;
left:0;
}
#mainContent {
position: absolute;
top:0;
left: 0;
}
Other method inspired by This answer : Set the theme image as part of the mainContent div, with position absolute and z-index set, and everything else with position relative and a larger z-index. See this example.
Related
I have a double scroll bar on my website in Chrome and Firefox (both browsers are up to date). I have been researching the web and stackoverflow and have tried following suggested options on the html element:
html { overflow: hidden; } - afterwards -
html { overflow: auto; } - and - html { overflow: scroll; }
None of them got rid of the double bar, even worse some blocked me from scrolling at all.
I'm not sure which other element to target or what might be causing this. Does anyone have a suggestion?
The website is https://www.lekkerlimburgs.be
I had the same problem with one of my wordpress websites. I added the following CSS which fixed the problem for me :
body{
width:100%;
overflow-x:hidden;
overflow-y:hidden;
}
It seems like you are trying to add the css from within the html tag. For this you will need to add style tags within the body of the html. If this is the case use the following code:
<style>
body{
width:100%;
overflow-x:hidden;
overflow-y:hidden;
}
</style>
Hope this helped :)
You have overflow:auto on your HTML element, which will add a scrollbar if the element exceeds the screen size on some browsers.
MDN:
auto
Depends on the user agent. If the content fits inside, looks identical to overflow: visible, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.
Alternatively, if you cant locate the source of the bug as explained by Gant, you can Use Browser developer tools to isolate the offending tag. What i do is
Inspect the malformed page elements using your browser developer tools
Hover on suspicious elements and Delete them while keeping an eye on the inner scrollbar. if it disappears then the element you've just deleted is the offender undo deletion (Ctrl+Z) and inspect it. Otherwise if the scrollbar persist even after deleting the element, then the element you just removed isn't the offender. therefore, undo deletion and move to another element
if the offending element is huge/broad perform step 2 on its sub elements and iterate till offending sub element is found. then check the css associated with the sub element causing the issue for overflow:auto
This approach may be better if you have tons of stylesheets and dont know how to go about it
*Adapted from Chris Coyier Fixing Unintended Body Overflow
I am developing a small site:
http://www.designbyantony.com/David%20Quigley%20www/index.html
(It's within a folder of my own site on my server)
I would like the footer div to follow on from the content at the end of each page ie: NOT to stick to the bottom of the viewport. I have managed this on all pages except it isnt working on the homepage - as per link above. I have spent a good day trying to fiddle with over:hidden etc but I'm not having any luck. I've a feeling it's something to do with the fact that the homepage uses a fullscreen image.
Bring the contents outside #header you are missing </div> after header. Remove position: fixed; from #homepage_content add z-index:-1 to #bg
i have replicated your html in jsfiddle. and set the background in css background: url.
footer seems to be in the bottom.
http://jsfiddle.net/btevfik/hDkQC/
Ok, i think i know what you are looking for.
Move the #homepage_content outside of the #header by removing the </div> after <!-- InstanceEndEditable -->. Instead add a </div> just before the first clear div.
Change the css code of #homepage_content to position: relative; or just remove the position: fixed.
I think you are looking for a transparent background color of the #homepage_content, right? To do this you must remove the bakcground-color of #homepage_wrapper and instead put white background-color on the #header div.
Hope it fixes it.
This is a longer story I'm trying to cut short. Generally I'm playing around with a website menu that is supposed to partly slide under a partly transparent background gif image, and fully reveal itself only upon mouseover. To do that, I'm using the z-index parameter on both the background image and the menu. But since you can't use z-index on a body background image, I'm using a "regular" image, which I'm setting to 100% width and height - AND for the z-index paramenter to work, I need to specify "position" as well. It seems though that with that combo, I'm basically creating an invisible shield that'll make all links untouchable. I've cooked it down to the following lines:
<style>
#style {
position: absolute;
width:100%;
height:100%;
}
</style>
<div id="style"></div>
test
If you try this, you will see that the "test" link is unclickable (cross-browser).
Does anyone have an idea how I can solve this? Thanks!
<style>
#style {
background-color:#ccc;
position: absolute;
width:100%;
height:100%;
}
a {position:relative} /*won't change position of the link, but shows link above.*/
</style>
<div id="style"></div>
test
<style>
#style {
position: absolute;
width:100%;
height:100%;
z-index: -1;
}
.test {
z-index: 99;
}
</style>
<div id="style"></div>
test
Will work too, along with campino2k's answer.
Thanks for the replies, which pointed me in the right direction. It seems like the div does indeed create an invisible shield, and that shield is (more or less) inpenetrable when it comes to underlying links.
Click through a DIV to underlying elements
#Logan: I'm afraid that approach doesn't work for me. You're suggesting to simply raise the link above the div shield - that, however, defeats the original purpose I've described above (the one with the background image and the menu sliding underneath it).
#campino: I thought this was it, but adding a z-index definition to "style" broke it again. The fact that you colored the entire div field helped me understand what you obvously already knew: As long as the div is over the link, it's not clickable, period.
So all in all, I'm concluding that my approach doesn't work. For the actual project I'll probably cut up my asymmetric background image into several pieces, so the div doesn't cover the entire screen, and is only where I absolutely need it.
I think setting a z-index, though it might work doesn't really address the problem but a kind of a hack that achieves what you want.
The root cause of unclickable links is mostly an element that is improperly positioned through floating, display, or position property. This element is displayed in the foreground of your link creating a shield that prevents you from clicking the link.
The solution to this I found is to use javascript/jquery to console.log or alert the id or class of the element in the foreground when you click.
$('*').click(function (){
alert('class = ' + $(this).attr('class') + ' id = '+ $(this).attr('id'));
});
above will alert the element in the foreground. Now that you know the cause look at its style.
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.
I have a page where there is a column and a content div, somewhat like this:
<div id="container">
<div id="content">blahblahblah</div>
<div id="column"> </div>
</div>
With some styling I have an image that is split between the column and the content but needs to maintain the same vertical positioning so that it lines up.
Styling is similar to this:
#column
{
width:150px;
height:450px;
left:-150px;
bottom:-140px;
background:url(../images/image.png) no-repeat;
position:absolute;
z-index:1;
}
#container
{
background:transparent url(../images/container.png) no-repeat scroll left bottom;
position:relative;
width:100px;
}
This works great when content in #content is dynamically loaded before rendering. This also works great in firefox always. However, in IE6 and IE7 if I use javascript to change the content (and thus height) of #content, the images no longer line up (#column doesn't move). If I use IE Developer Bar to just update the div (say add position:absolute manually) the image jumps down and lines up again.
Is there something I am missing here?
#Ricky - Hmm, that means in this case there is no solution I think. At its best there will be a jaggedy matchup afterwards but as my content expands and contracts etc. hiding/showing doesn't work out to be practical. Still thanks for answering with the best solution.
Its a bug in the rendering engine. I run into it all the time. One potential way to solve it is to hide and show the div whenever you change the content (that in turn changes the height):
var divCol = document.getElementById('column');
divCol.style.display = 'none';
divCol.style.display = 'block';
Hopefully this happens fast enough that it isn't noticeable :)
Another workaround which worked for me and had no flickering effect was to add and remove a dummy CSS class name, like this using jQuery:
$(element).toggleClass('damn-you-ie')
If you are worried about getting a flicker from showing and hiding divCol you can ajust another css property and it will have the same effect
e.g.
var divCol = document.getElementById('column');
divCol.style.zoom = '1';
divCol.style.zoom = '';