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)
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).
To start off with, I'm quite new to CSS still so I hope I haven't done anything horrendously stupid.
Basically, I have a design I'm doing built using Pure and the width is playing up in Google Chrome, while it works as intended in Firefox.
Here's a link to what I've done: http://egf.me/Rushd/rushdtest.html and screenshots:
Firefox: http://i.imgur.com/mn3GIbT.png
Chrome: http://i.imgur.com/44jLC6J.png
If you have a look at the page source, I haven't really done anything in my own CSS to change anything (I commented it all out as a check just to be sure) so I'm guessing I'm somehow using Pure wrong, since their own site renders fine on Chrome.
Also, inspecting the elements with Chrome's dev tools show that the div elements which should be next to each other have widths which add up to less than that of the parent. And nothing there seems to have buffers or padding. Also, if I manually reduce the widths to be very very slightly less, Chrome seems to magically fix everything.
The problem is that a space is rendered between your child divs.
The issue is neither margin nor padding - it's actually caused by the whitespace between your div tags in the HTML code!
Place the tags directly adjacent to eachother without any whitespace and your problem will be solved ;)
Example code
<!--whitespace in HTML = renders as a space between the divs-->
<div></div>
<div></div>
<!--no whitespace in HTML = renders edge to edge-->
<div></div><div><div>
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
You can see my issue here:
http://pmind.com/staging/123.html
I've tested this in Chrome, Safari, Firefox and Opera so I know it's not just an Internet Explorer wonky bug.
In the top right of the content, there are two text links, that are being hidden under the graphic. The <div> that contains the text links comes further down in the page, and my understanding was that that alone would make the z-index of the links such that they would be on top. But because that didn't do it, I set the z-index of the <div> containing the text links manually, which still didn't fix the problem.
One partial solution I found was to set the z-index of everything on the page but the <div> to -1. This however broke the roll-over functionality of the navigation items. I hate to ask something like this, and then it be some extremely simple issue I've just overlooked, but I'm at my wit's end.
Adding "position: relative;" to #top_links brings them to the front in Firefox. I haven't tested this in other browsers.
Has anyone got any idea why the menu is rendering below the rotating images on this site in IE7: http://new.coffeelatino.co.uk/.
The z-index is much higher for the menu that it is for the rotating images.
Just another reason why IE is so dreadful.
z-index is ignored for elements that are not positioned. Add "position:relative" to the style of whatever you're trying to apply a z-index to, and that should fix it.
Hint for remaining sane as a web developer: Write against IE, then test with other browsers. Most things that work in IE will render correctly in FF and Chrome. The reverse, as you've noticed, is not true.