I have been told that on these pages, the last 2 links are not clickable in IE7. I can't seem to see the problem, and not sure how to fix it. Is it a hasLayout problem?
http://www.thamesvalleypartnership.org/somethingbrilliant/ideas/visual
http://www.thamesvalleypartnership.org/somethingbrilliant/evidence
Any help, or point in the right direction to how to fix would be really appreciated.
Add margin-bottom:100px to div with id random and remove div with class push (it is in random div. I have not tested it with other browsers and other versions of IE.
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'm struggling to get the CSS right for IE7 and I hope someone here can give me a hand before I throw my pc out the window :p
I made a fiddle that shows what I mean:
http://jsfiddle.net/ZqkEE/
The div with the word "joepie" hides behind the image in IE7.
How do I fix this?
Thanks a lot in advance!
It seems that the text is not shown at all in IE7. If you remove the img-tag, you'll see that the text is not under the image, it's actually not there at all.. Not quite sure why it's not there but here's some suggestions: There's no specified left-attribute, that might be it? Or maybe IE7 doesn't like the bottom-attribute?
I'm no IE7 expert, but I hope I pointed you in the right direction! :-)
Couple things here. You have a height of 1 on intro and a line-height of 0 on the .wrp div. Also, the entire .intro div was being pushed off to the right. I added a left property and it moved back into place - jsfiddle.net/Rpjhc/2/
When looking at this site in IE7, the header banners and nav menu seem to randomly appear and disappear. Have look at several posts regarding this, but have not been able to solve it. I am hopeful someone could help pinpoint the issue, as the page appears correct at times, and not at most others.
Thanks.
You are using two separate style sheets.
http://steamsaunadepot.com/media/css/cb5ec47641853ec8a1ca38b845e6e92e.css is for FF and
http://steamsaunadepot.com/media/css/36fe96c008dc78bed45bceb2c9cde999.css is for IE7
Specifically, the styles for top and left on .header-notice and .header-banner are wrong in IE7. If they were just set the same as they are in FF, the header and footer generates correctly.
I have a problem with our website at www.eat.vn. The site is fine in Firefox, Chrome, IE8 & IE9 and Safari, but in IE6 and IE7 we have a problem with a main design element.
Please see the attached image and you will understand that the stacking effect on the tabs is not what I wanted. I have tried to work around this bug, but can't manage to find a solution which does not mess up anything in the other browsers. Any help would be much appreciated!
I don't have IE6 or IE7 to hand to test this, so I'm shooting in the dark somewhat.
My guess is that the issue is related to the container element for the tabs (<div id="steps">). This has a style of float:left;, which I don't believe is necessary; it doesn't need to be floated since it doesn't have any other elements next to it.
However this float may be causing the IE6/7 bug; it looks as if this element has decided that it should only be as wide as one of the tabs inside it, which is then causing the tabs to wrap beneath each other.
I would therefore suggest taking the float:left away from this container element, and see if that helps.
(The tab elements inside it should still be floated, of course)
I have this small testcase: http://jsfiddle.net/sV8js/
You can see that in Chrome (tested on win7 11.0.696.68) the first 2 links right border is "cut off" and is not shown. FF and IE 7/8/9 seem to show it OK.
Browsershots: http://browsershots.org/http://top3skills.com/1.html
Also "buggy" on Safari (so it's webkit related?)
Anyone knows what's the problem with this approach or how to solve this?
(or if I should report a bug to chrome) Any workaround that doesn't affect other browsers?
Also, my testcase is different from Right border not displaying on google chrome but maybe it's the same bug?
Updated: I don't want to use inline-block as IE7 doesn't support it and I'm finding this bug because I'm removing the inline-block I previously had there :) Also this is dynamic so it's not easy to add after each link because some links can break to a new line, others don't... so I'm trying first to get the "right way" and then resort to more "tricky" ways.
You have set the containing DIV at a fixed width of 250px. This is cutting off the edges. Also, you should add display:inline-block; to your CSS link class. This will make your link a block element while keeping it inline. It will also apply the padding you have asigned properly.
See updated link here http://jsfiddle.net/sV8js/12/
Dan
Try giving those links a display: inline-block or display: block property, as links are inline elements.
you need to add display: block to .referencesSkills