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.
Related
Know problem:
Scrollbar is shrinking width of page and elements center using margin:auto are moving.
Tests:
I checked it on few computers and get surprising results. On some of them layout isn't moving.
Regardless of browser(if problem is appearing it affect all browsers if not all browsers are fine).
It doesn't matter if it is ios or windows (the same like with browsers).
Question:
Why only few computers are affected?
PS.
I checked scroll setting they are the same.
jsfiddle:
http://jsfiddle.net/ujDZv/
screenshot:
http://jsfiddle.net/YcmT9/4/
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'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 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).
I have been looking for a solution to an IE8 issue regarding padding on a div with overflow: auto. When the content is scrollable IE8 doesn't seem to honour the bottom padding. An example of the issue can be seen here http://jsfiddle.net/Gbp5U/ (issue only appears in IE8)
In IE8 when the content is scrolled to the bottom there is a bottom-padding of what appears to be 0px. All other browsers, that I have tested, show the bottom padding. The developer tool in IE8 reports the bottom-padding as 20px but to me that is clearly not the case.
Has anyone else come across this issue and found a solution. The only workaround I have for the moment is to force IE8 to compatibility mode which I would rather not do.
A suggested solution elsewhere was to place the div content within its own div with the appropriate padding as seen here: http://jsfiddle.net/Gbp5U/19/
I'm not a fan of it but I guess it works......