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/
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).
EDIT:
On the above site whenever I zoom out in firefox the main content div is displaced to the right. This issue only exists in firefox, not in internet explorer, opera or chrome. Could someone help me fix this?
EDIT 2:
I do NOT want the div to displace in firefox. Sorry about the first question, I was in a hurry but should be clear now :)
If you give float:left; to the .wrapper element and the ul.menu everything will be ok :)
The issue you are having is not with #content but rather with the class wrapper. If you remove the rule overflow:hidden from the class, the issue will go away. It looks like the wrapper class is also associated with your button bar.
I would suggest removing wrapper from the div which holds all of the page contents and instead use a rule which only has width="100%".
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.
EDIT: Solution found. The pink block had overflow:visible !important, which in Internet Explorer invalidated z-index. After removing it, the logo came to the top.
See: http://bit.ly/i7ER3e
See logo "**" (beside top menu) with Firefox/Chrome, it correctly appears above left-content block (the block with pink background).
In IE7/IE8 the logo, it becomes hidden behind the pink block.
I've been messing with this for 2 hours now. Tried a lot of stuff. Can't get it to appear right in IE7/IE8.
Any suggestions?
(Note: I'm working in a really restrictive framework where I cannot simply float the logo before the menu. I have to use position:absolute to place it.)
The problem is not z-index in your case
your body has some line height which is not sufficent...
line-height:180%
change this to 200 or so it works, but still that is not good approach
but just found the issue....
Try using:
z-index: -1;
for the elements that should be below the logo.
try setting position:relative; as well as the z-index.
The default position style is position:static;, and IE has bugs around the z-index handling when combined with static positioning; setting position:relative can solve some of them, without affecting too much else.
See this page for more info. (the link is for CSS3Pie, which is an IE hack to help it support some CSS3 features like border-radius, but the info on the z-index bug is general and likely covers your issue as well)
I've done this in the past using a method similar to this:
http://javascriptkit.com/javatutors/static3.shtml
but I don't like the "flicker" effect as the page is scrolled and the div needs to move with the scrolling. Lately I've seen a lot of site that have an element (a div or the like I presume) that don't move when the page is scrolled but it's seemless...they're just there and it's a beautiful thing.
Unfortunately I can't seem to recall where I've seen it lately to view the source and try to figure it out so I figured I'd turn here and see what all of you experts can provide as far as assistance / suggestions.
TIA
Try setting "position: fixed" to the element.
I think this does not work with some IE versions, you'll have to us JS for that.
That site you linked to still mentions thing such as IE 4 on it, better no rely on it. It's outdated.
You can position an element to a fixed position with CSS, by doing position: fixed;.
Take a look at google reader.
It has a fixed header and a fixed side bar.