I'm having a problem with a floating div with href around it. The link works in FF but not in IE9. I'm hoping it's something simple but I'm left scratching my head. Easy points for someone!!
In any event, here's the page: http://www.insurancedepotdentalonline.com/
You will see at the bottom of the page it says 'For Health Insurance, Life Insurance or Medicare' and then a big red circle with Click. I have a div positioned over that red circle and a link around the div. It works in Firefox and Chrome but not in IE. Not sure why not.
For what it's worth, when I add a background to the div to see how big it is, the link works fine in IE. But when I remove it, the link disappears. It's like there's something wrong with the width.
Interesting... inspecting the structure through IE's developer tools (just press F12), the div inside the link seems to be in the right place, but the link is only working if you click a bit to its right...
-- edit --
Your "For-health-click-here" div is superimposing the link. You could either move its declaration to a place before the link (you'll have to readjust the link position too) or mess with it's z-index.
Not sure if this is the problem.. but putting block elements (div) inside inline elements (a) is invalid html and could be choking in IE?
See here for more details.
Related
I know this has been asked many times, and I have been searching for the answer in a lot of places but I can't seem to fix my code. Thank you for reading this because I'm going crazy here! First I had a different z-index problem with safari, than another with explorer, but now the z-index problem I'm having with mozila I can't fix in any way. I code in chrome, where it seems to work perfectly (for me it seems at least!)
I believe now it works more or less fine in most browsers but not on mozila. The idea of the page is to make (only with CSS because that's the only language supported by the website) a flipping book of several pages. I see some examples around of CSS only flipping cards (only one page), but not a book of more than one page. So I essentially overlap several "cards", in order to give this effect. You can see the demo from codepen here: pkrein/pen/qBOewem
Btw I do know this code is not as clean as it could be, but that's the way I figured to make a fuction like that works only with CSS, and I hope it will make sense for you.
Ok, so the matter is, the content inside the book pages is not "scrollable" on firefox. I guess this is indeed a z-index problem, because when I move any page outside the book, that is, from behind the rest of the content, it scrolls fine.
Let me know if I can give any more info that could help you understand my issue!
I figured a possible solution for this. It's not quite the solution for the problem itself but it's something that can make what I want to do work.
The problem was: (what I had to remove in order to make it work):
(1) The div #content-holder holding all the text inside the flap
(2) The div .preparation-text inside the .preparation (that's the text I want to scroll). That was a scrolling div (.preparation) inside a non-scrolling div (.preparation-text). I always add a scrolling div inside a non-scrolling div in order to hide the scrollbar, by adding a high padding-right to the inside div. I know I can use code to hide the scrollbar but it do not work in all browsers.
How I fixed:
(1) I just removed the #content-holedr divs, since it was not strictly necessary.
(2) I removed the .preparation-text and transformed .preparation into a scrolling div. Then I just covered the scrollbar with an image of the same size and colors as the background (a print of the layout).
I have a bit of a IE8 problem (sound familiar?)
I have a button. when you hover over the button the hover state produces a larger box that has html inside. in this particular case, it's a small music player.
so it goes like this, when you hover over the button it produces a small music player with clickable links and some text. you can move your mouse anywhere inside this box, but as soon as you leave the box/music player, the hover state goes away again.
sorry but I don't know how else to explain it.
this all works a treat except for IE8.
in IE8, the hover state disappears as soon as the mouse leaves the original small button. so navigating around the music player becomes impossible.
now I have noticed that when there is no html in the hover box, it works fine, but when there is html (in this case an iframe) it loses the hover as soon as I touch any html inside the hovering box. so it looks like the problem is not the hover box, but the code inside the box that makes it lose focus
what I would like to know is, is this a known issue in IE8, or could it just be bad coding from my side. in which case i can post the css.
I've had problems with :HOVER states in IE8 too and I noticed that the same CSS (even pointing to the same external CSS file) worked on some pages but not others. The solution for me was to consistently add a DOCTYPE to the top of all pages (above the starting HTML tag).
It seems obvious now, but sometimes (especially when editing old sites) the DOCTYPE is not always specified.
I hope this helps!
Your problem doesn't seem to lie in hover itself. Firstly you assume some window height and your project just look weird if the height is different. Assuming you did some very exact calculations on such assumptions your problem is probably the box model problem. box-sizing:border-box might help, but you would have to recalculate everything.
Also you can use timeout before the elements gets hidden/drop down so that micro mouse movements don't shake elements and maybe allow to "catch" them.
Having both things in mind all hovering problems should be fixable.
EDIT: For iframe hover have a look at: Iframe hover not working in IE (all versions).
I'm going nuts on this, I can't figure out what causes the margins of the right sidebar gallery images to be rendered differently on opera browser. More specifically the bottom margin of the images seems to be doubled in every other common browser, its set to 2px and only opera displays it as 2 px.
This is the url - http://www.roxopolis.de/media See screenshots here.
Please help me out with this, I don't care too much about the fact that its displayed differently but it exposes a bit of the following gallery images which are supposed to remain hidden so thats what bothers me. If there is another way to hide the following images (which are placed by widget) that'd be fine too. Maybe setting the margin conditionally for opera?
I've had a quick look at the page in Dragonfly as well as Chrome's inspector for comparison and no particular style, including inherited ones, strikes me as "causing" this issue. Maybe someone else can find something, but at a glance, I'd say Opera seems to be "doing the right thing".
You might have more control over the spacing if you put each anchor tag along with its respective image inside its own container and tried to style those (e.g. a div containing the anchor containing the image for each item, and float them left within the parent container div).
Is there a particular reason you have more images than you want to display? I don't see any controls to scroll the images on that page, so I'm not sure why you need to have more than the six images you're showing already. Surely if you have code somewhere that randomises the order, you can change it so that it only displays the first six images.
Also, have you tried breaking the problem down to a smaller use case that can be tested/tweaked in a jsfiddle? That may help to get to the bottom of your issue if you can't solve it using the above suggestion.
Recently I encountered a rendering issue in Webkit which I suspect to be a bug with the Webkit engine. But I am not confident enough to say so. So I would like ask here and see what you think.
It'd be a bit difficult for me to describe the case in plain text, so I prepared a snippet here:
http://jsfiddle.net/2eQXa/1/
First you can see a yellow background with red border. This is not a background of the <body> tag but a <div> with id "backdrop" which has 100% width and height. By default it links to the "backdrop-no-problem" class. Also there is a horizontal list with some images. The list is surrounded by a green border. Inside the list there are some Wikipedia logos wrapped with a dotted red border.
I tested the page with the following 3 devices:
1. Chrome 21 on Windows 7
2. Mobile safari on the first generation iPad (running iOS4, I'll call it iPad1)
3. Mobile safari on the "new" iPad (running iOS5, I'll call it iPad3)
Try clicking "right" or "left" to scroll the list. Pretty good.
To reproduce the my problem, first click on "Issue #1". This will change the backdrop div from "position:absolute" to "position:fixed". Then click "Issue #2". This will add "-webkit-backface-visibility: hidden;" to the element (The reason for adding this style is to ensure smooth animation on the iPad).
Now click "left/right" to scroll the list. You should see a strange behavior in all three browsers:
The green div is scrolling properly and smoothly, but not its child elements. The child elements simply "out-sync" with the position of the scrolling parent. The movement not only looks laggy, it sometimes even stuck. And the child elements will stop at a wrong position when the scrolling animation finishes. You have to move your mouse over the picture (or tap on it in a tablet) to trigger an update to have the element re-drawn at the right place. Even Chrome shows this weirdness makes me feel that it is a Webkit issue.
Things gone worse in iPad3. In iPad3 you don't need to add "-webkit-backface-visibility: hidden;" (Issue #2) to see this weird behavior. Just add "position:fixed" (Issue #1) will do. The strange thing is that this doesn't happen when you view the snippet in jsFiddle. In case you are interested I have put the source in a single file at pastebin:
http://pastebin.com/i4ARX4mD
When writing this question I saw quite a number of questions regarding backface visibility. I've checked some but none of them matches my problem.
Ideas or suggestions are welcome. Thanks!
(Post updated to fix many typos)
I am working on this philippedecor.com site and I am having a difficulty in figuring out this css issue.
When I on mouse over on "Main categories" that appears on the right side, it shows a drop down with links in it.
Two things happens,
1) in IE(7) - the drop down hides behind another div
2) in both ie and ff, it pushes other div below that to go down and on mouse out, it looks fine.
I am not sure which css property can fix this.
please help me out
Next time, please make your URL clickable: http://philippedecor.com/
In Firefox, I also see a tiny bit of the background showing through the menu, as you can see. Mousing over this thing triggers a mouseout event, closing the menu. In IE 7, I don't see the push-down effect, only the hiding of the menu under the Flash panel and everything below it.
To prevent the menu pushing down other elements on your page, you should use position: absolute on #downmenu and probably incorporate it into the div containing "Main Categories" to position it in the right place. Use an appropiate z-index will likely prevent the drop down menu from popping under another div in IE (untested, as I don't have a debugging tool for IE at the university where I'm typing this message now).
Furthermore, I think you shouldn't use two menus containing exactly the same content, that can be confusing to visitors of your site (actually, I didn't read your post well enough and moused over the left instance). Also, you shouldn't put text in images without providing alternate texts, screen readers and the like can't "see" it this way (preferably use a suitable image replacement technique). And all those s in the lis are totally unnecessary and not according to rules for semantic HTML; just use padding on them or something. By the way, you should make the rounded cursors of 'Main categories' transparent (now two little white corners are shown). Just my $ 0.02...