I'm developing a simple opacity slider for my site and I've encountered a weird rendering bug (?) that happens only in Firefox (Chrome and Opera handle it perfectly).
The problem is while slides change each other, there's horizontal line appearing over them:
Obviously it has something to do with arrows which switch images. If I set display: none to them, there's no line appearing.
Arrows are simple > < in spans, and they have text-shadow. If I remove text-shadow from them, the line gets thinner:
Spans with arrows are positioned absolutely inside divs which taking half of slide container each. These divs are inside other div, which is sibling to slides and has z-index:1 to be over them. If I set right/left position for spans so they will just a little superpose image, or if I make divs thinner (for example, 40% instead of 50%) for the same purpose, the line disappears:
It may seem like it's related to spans' width, but setting max-width and display: block doesn't help too.
How can I get rid of this weird line? Maybe there's CSS hacks for it? You can check slider yourself here. Thanks!
So I've removed spans and instead put arrows just inside divs. I've vertically centered them using :before CSS hack from this answer. No weird lines and works like charm, though I've had to add some nbsp's before and after arrows so they would not be just on the edges of slide container. Well, a bit dirty but it's fine for now. Works even in IE10 and I don't need more.
Related
The gray image with the hands scrolls up using translate. It has a fixed position. The dog image cutting through has the following styles:
transform: scale(1.025) rotateY(..) rotateX(..)
Only happens in Safari. Seems like the rotated dog image doesn't like being under fixed elements. This also happens when the image is scrolled beneath the nav bar (also fixed position).
Anyone know a fix for this? I've tried putting different transform properties on different elements, no fix yet.
Adding translate3d(...) to the fixed element above the dog image fixed the problem.
I also added perspective: 9999 to the parent element containing the grid of images.
I suffered from the same issue. After few try, I fixed it by add tranlateZ(some value which is important) which separate these two layer into two level.
I am trying to create an element with either :before or :after and position it at the bottom of its parent, halfway out of the element, to hide the box shadow there. This seems to work, except for IE.
Demonstration: http://jsfiddle.net/XV6pT/
The white border from :before should overlay the bottom border and its box-shadow. However, in Internet Explorer, the parts of the element below the bottom boundary of the button are not displayed.
There is no filter or similar which would set something to hidden (according to How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?). The CSS is copied as-is.
The general aim (maybe someone has a better idea) is, that below the button, there is a dropdown navigation, that should look like the dropdown and the button are "one part", so there should not be any border or box shadow between the button and the dropdown.
It seems that the problem occurs in IE9 and IE10. Switching from absolute to relative positioning also didn't help.
Any hints?
Take a look at this: Creating a CSS3 box-shadow on all sides but one
It involves a bit more html, but IE and pseudo-elements can drive you nuts. That answer also includes a shadow for the menu "baseline" but without deeply looking into it, I think it can be safely removed.
Good luck!
I'm trying to create a 2d grid in HTML and CSS where resizing the window reflows elements to the appropriate row. The effect can be achieved by just floating fixed-width divs to the left, but I want to add a dynamic margin to minimize white space on the right of the screen.
My problem is when adding dynamic margins (b/t the divs) via javascript, the divs will appear to flicker (i.e. switch back an forth rapidly between rows) when resizing the browser window (only happens when width is decreased).
The bug manifests itself in webkit (chrome and safari), but not in Firefox. If it's just a webkit bug, is there a way to get around it?
An example can be seen on jsfiddle or a regular webpage:
http://jsfiddle.net/RAZHA/3/
http://alec.thewinograds.com/float_flicker_example.html
Thanks!
$(box).css("margin-left", (marginSide * .5) - MARGIN_REDUCTION);
it seems to me to be a JS issue; reduce only margin margin not both.
http://jsfiddle.net/RAZHA/3/
I have a minor problem with my css in that I have a drop down menu which works fine, however the problem comes when scrolling on items in the drop down the text is not centered in the highlight, it is horizontally but not vertically. I have tried to achieve it by applying a small margin (which isn't a problem), however the margin is applied to the background also thus the background is moved down and the issue remains. See here: http://www.letsmine.info/Sundalah. The CSS is located here: http://www.letsmine.info/Sundalah/css/drop.css
The margin affects the whole box layout, so it will shift the background. Try padding instead.
If you want to vertically align the text, and you'll only ever have a single line for each menu entry, set the line-height of the (menu entry) box to the same value as the height of the box.
I've been searching about this issue for a couple of days. But as the problems are spesific, so the solutions usually are. My problem is kinda common but the solutions I found so far didn't work for me.
I use a #header div which is around 30 px height. Under that div, I have 3 divs like left, center and right. I have an accordion menu with js in the left div, content place in center, and last tweets script in the right div. Since I added box-shadow to #header div, other div's under it are placed after where shadow ends. I used z-index to make header div's shadow place on other div's, and it works perfectly in Firefox, Safari, Chrome, even IE9! But when I try in older versions of IE, it just happens the way I tell. Here is a screenshot: http://www.twitpic.com/4kh9w3
Like I just said, I have "last 2 tweets" script in the right div. It fills < ul> < li> items with tweets and shows them. So that I can design this list in my css file. And same, it only doesn't work for IE7&8. I don't even mention 6, it's not so important. The problem is that IE automatically scrolls list items to left. So half of them disappear! Here is the screenshot: http://www.twitpic.com/4khajz
So, what can I do to save my view in Firefox, Chrome etc. and also can fix it in Internet Explorer 7&8?
I'm not sure if i understand your problem... but if you cant get shadows to work try looking here http://css3please.com