I am not very sure how should I describe / name the problem. This problem exists at the FB 'Like" and Twitter 'Tweet' buttons, on the upper right of the sidebar. In other browsers, it works perfectly (i.e. will be displayed and usable on hover), but it doesn't work in IE8/9/10.
Here is the link : http://billyf.site11.com/problem/singleblogpost-1.html
Here's the structure for each button :
<div class="button">
<img src="" alt="image shown before hover" />
<div class="meta">
//here is the button to be revealed on hover//
</div>
</div>
How it works
When a person hovers on .button, .meta will show (by changing it's absolute positioning), and .meta will contain the FB Like and Twitter Tweet button.
In IE, if you hover and move on the buttons, the 'Like' and 'Tweet' boxes will flicker and are non-clickable, hence they are completely useless. I tried z-indexing, but still doesn't work. I want it to work like the 'Comment' button (the 1st button on the left).
Thanks for any suggestion / help!
Related
I'm putting together a site using Bootstrap and html5shiv.js.
I've got two "navbar" divs, one above the other on the screen. In Chrome, Firefox and IE9, they look and work fine. On IE7 and IE8 (or rather, IE9 in IE8 mode), the dropdown menu on the top appears behind parts of the navbar below it. In this picture, "Overview" on the top has a dropdown with three items ("Person", "RSS", "Wiki") and the navbar below it has one item "2013-01 rev" which is a dropdown and which is showing through the Overview dropdown panel, and a second active item "Step 1 - People" which is showing in front of the dropdown panel.
I checked with the IE9 developer tools, and it shows the z-index on the dropdown panel (the part that says "RSS" and "Wiki" is 1000, and there is no z-index on the one below it. I've tried putting a z-index on the one below it, and it doesn't help.
Since jsfiddle doesn't seem to work on IE7, I've make a small subset of the page on http://xen1.xcski.com/tmp/ie7_problem.html that demonstrates the problem.
Try to add a positive z-index value on the top nav (i.e. the one with Overview, Cart, Access Review, etc.).
<div id="top-bar" class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav" style="z-index:1;">...</ul>
</div>
</div>
<div class="navbar-inner">
<div class="container">
<ul class="nav">...</ul>
</div>
</div>
</div>
I modified a code I found online for spoilers to:
<a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';" class="link">
<img src="{link1}" alt="Stats">
</a>
<span id="spoiler_id" style="display: none;position:absolute;top:5px;left:5px;">
<a onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';" class="link">
Hide
</a>
<br />
<iframe src="{link2}" width="600" height="175" frameborder="0"></iframe>
</span>
What this should do: Display a picture with alt code "Stats" on page load. When the picture is clicked, the picture will disappear and a span with Hide {iFrame} should appear hovering 5 pixels from the left and 5 pixels from the top.
This works correctly when left by itself. However, I want to put it online through a source that breaks this code (the picture will show up, but it will not change when clicked.) If I iFrame the element, then it works, except the span stays inside the iFrame. What I want to know is if there is a way to break the span out of the iFrame. The other option would be to break the iframe in that code out of the iframe it is in.
Thank you for any help you can provide. Note: I do realize that there is an incredibly high chance this is impossible. If so, a confirmation of that is much appreciated.
Edit: Turns out the place I want to put it on does not support Javascript.
The iframe acts as a nested browser window. You aren't able to position elements outside an iframe just like you aren't able to position them outside your browser.
You could try to hide the span inside the iframe and build a new span in the parent window with the same contents.
So I'm developing a mobile micro site and that said, I want the links on the page, to behave
like ios links/tabs do, that when you click on them, the whole width of the button is active and changes color to display a click/finger over state etc..plus the WHOLE width of that div behaves like a button so that either on a small phone or a tablet, as long as I don't specify a width, that its active state goes from left to right ALL THE WAY as a "block"
To that effect for example, if I have a regular text link. like this:
<div class="mainBtns">Portfolio</div>
id give it this CSS so that on mouseover/click with finget etc, that it behaves like an ios button/tab.
CSS:
.mainBtns a{
display:block;
}
.mainBtns a:hover{
background-color:#d8d3cb;
}
Now that said. This is the problem im trying to solve.
I have a parent Div called thumbItemW (the content wrapper);
and two child items called galThumb and galThumbtxt
The content block looks like this:
<div class="thumbItemW ">
<div class="galThumb">
<a href="gallery-highrise.php" alt=""><img src="images/thumbs/highrise.jpeg" alt="High rise Gallery" />
</a>
</div> **//this is the gallery thumb floated left**
<div class="galThumbTxt">
HIGH RISE CONTEMPORARY
</div>**//this is the gallery thumb text floated right**
<div class="clearEm"> </div>//clear the float
</div> <!-- thumbItemW ender -->
What I want to do is that, when the user finger clicks the parent div, that the background color changes like in the example above with "mainBtns / mainBtns a:hover"
Problem is that, unlike the first example with mainBtns, since this one has child items, if I do something like:
pseudo CSS:
.thumbItemW a:hover{
display:block;
}
or something like this, this doesn't work the way id want it, since the elements are floats inside this parent div.
What I'm wanting to do is make the parent div .thumbItemW be like a display block so that when the user clicks, that they can click ANYwhere along that divs width and still activate the button as oppose to clicking RIGHT ontop of the button or text.
Can this be achieved the way I have it? Can this be achieved with CSS alone WITHOUT javascript/jquery?
Hope it's not too confusing.
why wouldn't you just specify width and height on the a element?
OK, DUE TO BEING NEW I WASNT ALLOWED TO POST IMAGES, SO I HAVE ATTACHED LINKS INSTEAD. (images should be inline with this question)
Im writing a webpage and have a div containing some text (inline) an then an image.
Now when one clicks on the image, a hidden div appears below with an input field.
The input field in this div is automatically aligned to the left edge of the div.
I want it aligned to the right of the div.
As pictures speak louder than words, see link below.
http://www.freeimagehosting.net/uploads/d827ecc330.png
Anyhow the closest I got to a solution was to apply direction: rtl to hidden div, but then my text in my input field also changes to rtl.
I just want the placing of the text field to be rtl, not the input.
I hope this isnt too confusing.
Im quite new to css but have searched arund a lot, and have yet to find a solution besides the depreciated align=right.
Any suggestions greatly appreciated.
<div id="container" style="width:500px;">
<div id="text" style="width:250px; float:left;">Text</div>
<div id="image" style="width:250px; float:left;">Image</div>
<div id="input" style="width:500px; float:left; text-align:right">Input</div>
</div>
I am trying to identify this bug. Is this a known issue already or is it totaly new? Is there a workaround (like a zoom:1 or position:relative that I can add to fix it?), idealy without modifying the html here but just adding to it.
If you display the below html in IE8 you will see the text from the select (combo box), is displayed twice. One outside of the combo box. This is messing up the flow of my document (not to mention looking weird).
<html><body>
<div style="width: 800px;">
<div style="float: right" >
</div>
<div style="display: none">
ijklmno
</div>
<div style="float:left">
<select>
<option>abcdef</option>
</select>
<div style="float: right">
</div>
</div>
</div>
</body></html>
This is definitely a bug, since you are pretty explicit in the layout style rules. But it's also a really weird arrangement to begin with. If you unhide the hidden div, add text OR hide the div below the select, the problem goes away. My best guess is that since you have overlapping block level elements with one hidden and one empty, IE is ignoring the float and trying to fit them on top of each other, which is forcing the option down, but since the select stays in place, its showing the option within the select as well.
Very strange and a very cool catch. Your options as I see them is to either add some content to the the last div (non-breaking space, probably) or hide the div (display: none), or both.
In Firefox, that last div is also not floating right and is overlapping with the select (you can tell by outlining block-level elements with the Developer Toolbar) which makes me think that Firefox is just better about handling overlapping block level elements.
If you set the last div to have a border, you'll see that it's not floating to the right of the main div.