I'm aware of the z-index problem in IE7, but I have a strange situation here, and none of the fixes suggested online seem to work. I've got a list of items, each one has a pop-up bubble div inside the "li" tag, like so:
<div class="inner">
<ul>
<li onmouseover="bubbleOn(5661)" onmouseout="bubbleOff(5661)" id="c5661">
<img src="/images/new/simple-dot-brown.gif" class="coloredDot" />
Asthma,
<small id="year5661">1974</small>
<div class="mouseover-bubble orange" id="bubble_5661" style="display:none;">
<h6>Asthma</h6>
<div class="definition">
<p>A form of bronchial disorder....</p>
</div>
</div>
</li>
</ul>
</div>
Here is the relevant CSS:
div.mouseover-bubble {
position: absolute;
width: 360px;
left: 10px;
bottom: 10px;
z-index: 10000;
}
As long as I leave the CSS the way I received it, the pop-up works fine. But I've been asked to move the popup divs below the matching "li", instead of above it. If I change the line "bottom: 10px" to "top: 10px", then suddenly in IE7 the z-index fails and I can see the information that should be hidden underneath the pop-up div. Anyone have ideas why this would happen? Most of the IE7 z-index stuff I find talks about positioning, but I'm not changing the CSS positioning, just switching "bottom" to "top".
i got the same problem this moorning... you'll have to put the element in position:relative
Another way to do it is to set the parent's z-index to something higher...
dont ask me why... but it works
EDIT sorry.. i've just seen that you cant change the position to relative.. try the second option and let me know it that works
Related
Hope I don't seem like too much of a newbie developer with this problem but I can't for the life of me seem to find the right combination of techniques to get this to work. Essentially, when in mobile view I have a div that populates with image data once searched and when that happens all of my menu icons get pushed somewhere else instead of staying put. Shouldn't the image data be confined to the div? I've tried position absolute, position fixed, overflow:hidden, hard coding the height in pixels, using flex-wrap and other flex properties, among other things. Nothing has worked so far. Check it out here: https://craftyquotes-bja.herokuapp.com/ Click on the camera button, search for any image genre and see what happens. That's the issue. Any hints or pointers in the right direction would be appreciated!
You have a class "pic-render "inside" pic-render", I do not know why, but in my opinion it is not necessary. Add a pair of properties to the nested div tags.
<style>
.form_container {
height: 5vh;
overflow: hidden;
}
.image_container {
height: 63vh;
overflow: auto;
}
</style>
<div class="pic-render">
<div class="form_container">
<form>
<input type="text" autocomplete="off" name="searchValue" placeholder="Search Images">
<button>SEARCH</button>
</form>
</div>
<div class="image_container">
<img src="">
...
<img src="">
</div>
</div>
I have a dropdown with content. I'm trying to make the content align at 0px at the left of the screen. No matter what I try, it still remains aligned within its parent container.
Since the dropdowns are centred in the browser, I'm having difficulty getting it work go where I want.
http://jsfiddle.net/XkuHy/2/
<div id="sticky">
<div id="nav">
<div class="logo">logo</div>
<span class="n list">browse</span>
<span class="n list">search</span>
<div class="n drop">
<span>My Account</span>
<div>
hello, world!
</div>
</div>
</div>
NOTE: CSS is not my strong suit.
NOTE 2: StackOverflow kept banging on about needed code and not just a link to jsFiddle - not sure why so ignore the code dumped as you can see it in the fiddle.
The .content box is being positioned relative to its parent, the .n.drop div because it has a relative positioning. If you remove the relative positioning from the .n.drop element you will find the .content element to position itself about where you want it. You may need to also add a margin-top: 16px; to the .content element to make it clear the menu.
You can see the updated demo here: http://jsfiddle.net/XkuHy/14/
When you make its margin to 0px. It is going to 0px but with respect to its parent. So you can try margin of negative values to its css:
margin-left:-205%;
like this: http://jsfiddle.net/XkuHy/13/
or
left: -345px;
like this: http://jsfiddle.net/XkuHy/13/
But both of them has cross browser comparability issue.
I have solved this issue by adding this to css, where "hello world" has a class name of "dropmenu":
.drop:hover .dropmenu{
position: fixed;
top: 100px;
left: 0;
width: 100%;
height:100px;
padding:0;
margin:0;
z-index:998;
background-color:white;
}
Surprise! surprise! I think it works! Check out:
http://jsfiddle.net/XkuHy/10/
Let´s say I have following mark up and CSS:
HTML:
<div id="Container">
<div id="Content">
[* some text *]
</div>
</div>
CSS:
#Container {
height: 400px;
overflow: scroll;
}
#Content {
height: 800px;
}
Obviously this set up invokes a scrollbar to possibly scroll down 400px. I created a jsFiddle for a better understanding.
Is there a way to jump to the second paragraph by CSS only?
I added a javascript command to demonstrate what I want to achieve. Just uncomment and run it.
There are two things that I have tried so far, but in both cases I was not able to scroll up anymore:
Setting the margin-top attribute of the inner div container to -180px
Setting the inner div container to position: absolute and top: -180px
Note: I do not care for the paragraph or any content. This is just an example. I want to jump to an arbitrary position.
Edit:
Anchor tags are not an option. I do not want to flood my mark up with unnecessary tags.
How about the humble 'a' tag?
jump to one
jump to two
<a name="one">this is one</a>
<a name="two">this is two</a>
Not with CSS, but with standard HTML/anchors.
http://jsfiddle.net/r6vn7/3/
paragraph 2
Give your paragraph an ID and use the URL hash to say where to go to. I used an anchor as an example how to make it jump to the second paragraph.
I have an element on my page that has "display:none" and "visibility: hidden" applied to it. Yet IE 7 still displays the element. Not only does it display the element, when I open developer tool bar and inspect said element it tells that it is indeed not displayed and not visibile.
Furthermore, When it's in its original state I can't use the selector tool in the developer tool bar to select the element, until I manually remove the "display:none" and "visibility: hidden" rules.
It's as if IE 7 is interpreting my style sheets correctly but the rendering engine is flagrantly ignoring them
Here's the CSS
.ModalTypeTwo .button-wrapper { display: none; visibility:hidden; }
Here's the mark up
<div class="MyModal ModalTypeTwo" id="sb-wrapper" style="top: 20px; width: 926px; left: 328px;">
<div class="footer wrapper">
<div class="corner left"></div>
<div class="corner right"></div>
<div class="button-wrapper" id="btnContents">
<a title="contents" id="sb-nav-button">
<span>Contents</span>
</a>
</div>
<div class="button-wrapper" id="txtContents">
<div id="sb-title">Lorem Ipsum </div>
</div>
<div style="cursor: pointer;" onclick="Modal.next()" class="button-wrapper" id="btnNext">
<a title="Next"><span>Next</span></a>
</div>
<div style="cursor: pointer; display: none;" onclick="Modal.previous()" class="button-wrapper" id="btnPrevious">
<a title="Previous"><span>Previous</span></a>
</div>
</div>
</div>
Notice that the above rule should apply to #btnContents, #txtContents, #btnNext, and #btnPrevious, however in IE& only the later 3 are hidden.
Try applying overflow: hidden; on ModalTypeTwo. I had a similar problem in IE7 and hiding the overflow of the parent fixed it.
http://jsfiddle.net/UugDU/
I added some start and end text just to make sure the result was being rendered at all.
I have no problems in IE7. It must be a problem somewhere else in your code. I suggest you start with the full version of your code, and whittle it down to the minimum required to produce the error and post that.
If this helps future Googlers of this issue, the problem is with how Internet Explorer versions 4-7 interpret "visibility:hidden" in CSS. Those older browsers will hide their immediate content, but not their HTML children's content. In addition, IE5 had a weird "reverse" bug to that problem where adding "visibility:visible" to an immediate content element under the hidden parent would not be visible. That is based on my knowledge of the issue and could have more subtleties I missed.
In general, if you are testing in IE7 browsers, try and avoid showing and hiding things using "visibility". If you must hide something in those older browsers, just remove them completely using "display:none", which was almost always universally reliable in these older browsers. Or, if they must be accessible in the page for IE7 users, just not shown to them, you can move them quickly off the page using CSS as shown below. Note: This will not affect your page design or layouts.
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
I am using ui tabs a lot.In my last project i add an icon just before tabs and the tab links start a strange behavior, you can not click to change the tabs if you are above tab name BUT only when you are outside tab name.
Here is the code
<div style="float:left;display:inline;width:718px;padding:5px;border:1px solid #ececec">
<!--ICON just before TABs-->
<div style="z-index:1;position:relative;top:30px;left:5px">
<img src="../graphics/icons/add.gif" onclick="AddTab();" href="javascript:void(0);" id="addNewTab"/>
</div>
<div id="tabs" >
<ul >
<li >
<img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" />
<span id="tabContent-1"><span class="tabText" >TAB1</span></span>
</li>
<li >
<img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" />
<span id="tabContent-2"><span class="tabText" >TAB2</span></span>
</li>
</ul>
<div id="tab-1" >
contents
</div>
<div id="tab-2" >
contents
</div>
</div><!--tabs-->
I know that ui.css has position relative for tabs
.ui-tabs .ui-tabs-nav {
list-style:none outside none;
padding:0.2em 0.2em 0;
position:relative;
}
and i dont know if meshing up with my icon.
If i remove the position:relative from the icon (add.gif) everything works fine
Any help is appreciated
From the code you've posted, and if I've understood your problem correctly, the "top: 30px" in your icon div is interfering with your tabs. The icon image height is not declared but I'm assuming it's less than 30px. Therefore, given that your icon has a z-index of 1, it would appear on top of the tabs.
If the icon is intended to appear on the same line as the tabs, this may still occur as no width is declared for the icon's parent div. This means it may take up the entire row.
There are several ways to fix this, but I think you're in the best position to come up with right solution, depending on the exact effect you're going for. The culprit seems to be "top: 30px" which pushes the div down by 30px. If you remove that, you can likely also remove the "position: relative" from the same div.
Hope that helps.
It is most likely the IE hasLayout bug and the image is not forcing the height of the tab to change as expected. This can be fixed by adding zoom:1 to any position:relative elements.
Also you might want to add a padding with 4 specifications like so...
.ui-tabs .ui-tabs-nav {
list-style:none outside none;
padding:0.2em 0 0.2em 0;
position:relative;
zoom:1; }
Hope that helps!