I've encountered a very odd bug on safari, and was wondering if anyone could shed any light on it. I'll preface this by saying it works absolutely perfect on Chrome and Firefox, but breaks on Safari and Safari and Chrome on Apple devices.
Here is a codepen illustrating my issue:
http://codepen.io/anon/pen/wWkBOB
the code is too much to include here and much clearer on the codepen.
I have 3 tables, wanting to line up on desktop size so they are all on the same line, with only the first having the 1st column showing so it appears as one large table (but needs to be 3 separate tables for mobile). On my centre table, I have a negative right margin of 12.5% to allow for all three tables to be 37.5% wide, and the third table sits over the end of the centre one.
On safari, this does not work on the 3rd table sits below. If you inspect the centre table, you can see that the computed value of the 12.5% negative margin at full size is 160px. If I then go back to the styles and change it to -160px instead of a percentage value, it works absolutely fine. The percentage value it wants to be able to look correctly is -20%.
Setting it at -20% obviously isn't correct for the other browsers and doesn't make any sense, as the value wanted is 160px which is 12.5%.
Any ideas? Help? Suggestions? would be much appreciated.
I had this problem as well. I fixed it by adding
position: absolute
in the css to the tags that were acting strange try it maybe it will work for you
else your could try to use pixels
Related
I have this bug that let some text appear a few pixels outside a div on the right side. The strange thing is that it only happens in Safari. I've never seen it before and it's just regular HTML/CSS what I have used. I've looked around on the internet but I can't find the exact same problem - only some problems with content floating out at the bottom, because of a fixed height.
In the next 2 screenshots you'll see the same page in Safari and Chrome. The div has a overlow:hidden to hide a possible third line of text. I added fixed widths when trying to solve the problem. I also tried to add/remove some margins, but I can't get rid of the extra pixels.
Here is a full link to this page. It happens in this section of the website only. In other sections - like this one - where I use the same format with little differences, but the same CSS idea (fixed width with overflow:hidden), there is no bug in Safari.
I hope you have some ideas!
Removing position:absolute from
div#branch-search-results-block div.search-result-right div.search-result-drvl-info-bottom .spacer::after
css style solves the issue. But I am not sure what else is affected by it. Please try this.
I've been looking at this small issue for a while and I can't seem to fix it. It's an firefox only bug it's fine in IE Chrome etc.
This website I made for a client shows the issue. On the start of the page you see 2 wheel PNG images Three of these images are there, you can switch the z-index by clicking the round circles on the bottom of the image.
As you see the Black colour is slightly more down, I can't seem to wrap my head around the issue since the line height is 0 and the way the black image is positioned is the same as the grey one. They are slightly downsized due to a max-size: 100%, but resizing them to the proper (1000px) doens't seem to help either, (did this locally).
If you open the pictures in photoshop or w/e they're exactly aligned.
Anyone have any idea why it goes wrong on Firefox only?
--> example
Removed the example since it's a website.
Very weird issue indeed. The only thing way I could get it to go away was to absolutely position the wheels. this would require you to set a height on #infographic and take off the margin-top:-100%;. Depending on how you use the #infographic container this solution might not be ideal for you, but at least something to consider to help solve your issue.
It's because of the whitespace between the elements. Unfortunately, some browsers observe it and thus some space is shown although it shouldn't. You can use this workaround:
Generally work with rem instead of em, you need it for this workaround to work easier. First you have to set the font-size of .infographic to zero. Every element inside your .infographic will now become a font-size of zero because you're using em. That's the reason why you should now change to rem, at least for the elements inside .infographic.
Now you're done.
If anyone has a better idea for a title, I'm all ears.
Here's a JSFiddle that demonstrates the problem: http://jsfiddle.net/VXsAg/
In a nutshell, I have an element with fixed height and stretch-to-contents width. If the contents are higher than the fixed height, there should be a vertical scrollbar. There should also be ONLY vertical scrollbar, because horizontally it can stretch as much as is needed anyway. Unfortunately I cannot get it to work in a cross-browser compatible way. Here's what I get (the top box is for reference, the bottom box demonstrates the problem):
In IE8, IE9 and Opera 11.60 it appears like this (very good):
In IE7, Chrome 17 and Firefoxes 3 & 10 it appears like this (disaster):
I can see why it happens (width is calculated before scrollbars are taken into account), but how can I work around it?
Apparently nobody knows. Well, I solved it via javascript. Basically I did the autosizing part myself. I calculated the size of the contents; calculated the size of the scrollbar; and set the width explicitly.
I have a site where 3 pages have a row of images that can be viewed larger upon rollover. On 2 pages the alignment works fine, these have 6 images in the row. The third page which is not working properly has 5 images per row.
The pages with 6 images are aligning perfectly - the left-most image is on its own, floating left, the other 5 are in their own divs within a div (movers-row) and are spaced 20% apart. The code for this working page is here: http://jsfiddle.net/AvNJY/
So using the same logic I tried to get the row with only 5 images to align, again doing the same as above and setting the distance to 25%. This made the last image in the row jump below the others. I played around with the percentage and for some reason at 24.4% it looks as if it's aligning correctly in all browsers apart from Firefox, when viewed at 100%. However as soon as you enlarge the site in any browser, the last image jumps again below the others (in Firefox this happens automatically). I am wondering what I am doing wrong on this page as I've tried everything I can think of - and can't understand why the 25% isn't doing it. The code for this page is here: http://jsfiddle.net/9K74d/
I would really appreciate some help if anyone knows the answer. Thanks in advance!
Your example in jsfiddle, is not clear but try the following:
add overflow:auto for #studiomovers-row and remove the margin of this id.
It's probably a rounding error - browsers can be surprisingly poor at math and make unexpected rounding errors. Knock your % down to 24 or even 23 and see if that works. You can always try putting the images into a single div container, sized to the correct, expected size, and set overflow: hidden in case there is a pixel or two that runs over. That gives you a little margin of error and it's much better than having the layout break.
I have an extremely strange problem in IE that I can't seem to track down. I have two boxes, both floated left, with a margin-left on the right box to give some spacing between the two. In Firefox (of course), it all displays correctly, but in IE when the page is first loaded, the boxes have no separation (no margin).
Here's the crazy part. If ANY CSS changes on the page at all, the box magically jumps to the correct position. And when I say any, I mean any. I modified the final font name of 3 in the font-family list of the body tag, and the box shifted to the correct position (this wasn't a change that would even modify the look of anything on the page).
I could post my HTML and CSS on the page, but it's fairly routine. I just wondered if anyone had come across or heard of this problem in the past? Incidentally, IE8 seems to render it fine.
Thanks.
Follow-Up:
So I was able to at least patch the problem by floating the box on the right to the right, and removing its margin-left property. Because my container div is just wide enough to accommodate the two boxes, this works for my situation, but it wouldn't be nearly as nice if the two boxes weren't contained so tightly in their container div.
Older versions of IE can be pretty buggy about how they handle floats. Try defining a width on your floated elements. This will help make the layout more explicit (so harder for IE to misunderstand) and trigger hasLayout if you haven't already (a weird internal IE property that causes a lot of layout bugs).