I have a jQuery splitbutton on my page that I am having a formatting issue with. Per my company's design standards, I am basically transforming a link into a button. Everything works fine, functionality is perfect, but depending on which browser you are using (I'm testing with IE and Chrome), the right side of the split button is just a little bit longer than the main button.
I think my issue is in this CSS class:
.default_button.medium_toggle {padding: 14px 5px 10px;}
If I change the 10px to 9px, it works in IE. The way it is, it works in Chrome. (Side note, in Chrome, if you zoom in on the page, it's off, but I'm not too concerned with that)
Any suggestions? All of my code is at jsfiddle.net/lwisdom43/6ErCs/3/. I placed it here because I didn't want to copy all of my CSS for these two buttons in this post. Again, this is all based on company design standards. Thank you for any help you may be able to provide.
If you put some text inside the second a-tag, you will notice that the source of your problem actually is another problem.
You set height and width in .default_button.dropdown_toggle and padding in .default_button.medium_toggle but not in .default_button or .medium_button.
Remove height and width from .default_button.dropdown_toggle and padding from .default_button.medium_toggle and it will have the same height (it will probably work if you set the height in .default_button)
Related
To test or see the bug:
(Note: Bug has been replicated on the link in Second Update, since the question was first posted)
go to sukritchhabra.com/importr
Type Bootstrap in the search bar.
Select bootstrap from the suggested list (Note: If you do not select from the list but press enter in the search box, the page will break and you'll have to refresh)
Once Bootstrap loads, press the green button 6-7 times (until a scroll bar appears)
Now delete a few of them, and the box-shadow will disappear.
I've tried a couple of things so far. Tried logging the box-shadow property of .importrLinks after every delete to catch where it is changing but no change is actually happening.
Also tried explicitly assigning box-shadow after each delete, and that doesn't help either.
During my search for a solution, alot of somewhat similar bugs were because of the z-index but I tried assigning custom z-index's and that didn't help (although I still believe this is something I haven't tested completely since I was assigning random, i.e., altering higher and lower, z-index's just to detect changes).
UPDATE
As suggested in the comments, I should've provided sample code instead of the complete website and I agree. But, as I have mentioned in the comments, I wasn't able to replicate the bug, on a fiddle.
Nevertheless, here is a link to the jsfiddle: https://jsfiddle.net/sukritchhabra/d3xfyc6t/5/
The bug still doesn't take place in the fiddle but, is still there on the website. The code I've used to create the fiddle is picked from the website. Instead of getting arguments for the addLink function, I've just passed constant strings for testing.
Second Update (Bug Replicated)
Figured out the bug is happening because the container has a float: left;. Have changed it on the fiddle and the bug is now replicated on this fiddle.
Link to fiddle: https://jsfiddle.net/sukritchhabra/d3xfyc6t/6/
Third Update (OS issue?)
I had been working on a Mac so far. I just tested it on a Windows machine, and the bug seems to be only on Mac. Am not a 100% sure if that is the root cause, but I'll definitely be testing it on other machines just to be sure.
Meanwhile, if anybody can see the bug on a Mac and not Windows, please do let me know here.
Confirmed the bug in Chrome on OS X on your fiddle. I checked and the same seems to happen to other CSS properties, not just box-shadow. For example, if set, border is affected in the same way and disappears when you remove items. I think it's got something to do with the combination of CSS properties on the container when overflow is set to auto. So for example I noticed that if you remove float: left, box-shadow stops disappearing. So to me it seems to be a browser rendering issue, I'm not sure why it's happening only on OS X.
Anyway, if you need to keep CSS exactly as it is, here is a solution that is far from elegant, but it works:
https://jsfiddle.net/d3xfyc6t/8/
It involves doing a browser repaint on the container every time you remove an element:
$('.importrLinks').hide().show(0);
This technique is taken from here:
https://stackoverflow.com/a/8840703
Oddly, if you remove the float on the container DIV, it fixes the problem: https://jsfiddle.net/d3xfyc6t/10/
You should also add the box-shadow vendor prefixes for other browsers:
box-shadow: 0 0 10px 1px #e2e2e2;
-moz-box-shadow: 0 0 10px 1px #e2e2e2;
-webkit-box-shadow: 0 0 10px 1px #e2e2e2;
Edit: Mimic a left float by replacing float: left with position: absolute; left:0; this gets rid of the problem. You may also need to set any outer containers that contain the code you posted to position: relative; https://jsfiddle.net/d3xfyc6t/11/
Have come across this problem when testing some older stuff in IE 11. Example here:
http://codepen.io/Samih/pen/zaqjA
Basically, when you have a display: table-cell element which has contents positioned absolutely, it works fine until you modify the content of that absolute container. You can see this by clicking one of the table cells in the example.
In Chrome, Firefox and even IE 10 this does not cause a problem, but in IE 11 you can see that the table cell height disappears to 0 and does not come back until you do something like resize the window.
I have tried a hack solution that involved using javascript to alter the cell size and then change it back, but it proved unreliable in the place I applied it. I'd much prefer a CSS based solution if anyone can come up with one.
I found an answer myself. Applying display: inline-block to the position: relative element fixes the problem in IE 11. I've no idea why, mind - but it works!
I have a standard text area with a lot of content which shows overflow, when I lose focus on this text area by either clicking out or tabbing out of the text box the cursor within the text box jumps to the top.
Plus when I stop typing the same occurs
Is there any way to prevent this with jquery or another means? I am unsure if it is a bug in IE8 but this is a client request.
Thanks in advance
This is a recognised bug in IE8, but there is no patch/hotfix available that I'm aware of (plus, even if there was, there is no guarantee the computer viewing your page has the patch/hotfix in place).
This happens on textboxes which are using a percentage width, rather than fixed width, and there are several recorded "fixes", although not all worked for me...
Firstly there is the option of fixing the width of the textarea via CSS, but also using min-width and max-width to set the percentage (however, this isn't going to work in old browsers). This could not work for me because the sheer number of textareas I use that all need different widths.
textarea {
width: 700px;
min-width: 100%;
max-width: 100%;
}
Here is an article from somebody who originally found the bug, with an explanation of the above.
Secondly, you could try setting the number of columns to be much, much larger than the visual size of the textbox. Here is an answer giving details of how to do this, and why they think this is the problem. However, I couldn't actually get this to work, despite it being the accepted answer with several up-votes.
In the end I choose to force IE8 into using compatibility mode using the following meta tag at the very start of each page (I use ASP.NET master-pages, so this wasn't a big job).
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
This will also made the "compatibility" button disappear, so it's impossible for your users to accidentally put it back into IE8 mode.
I have two problems... I've tried altering my CSS file, the JavaScript files and all kinds of other things. A google search yielded no remedy to these problems, so I come to the awesome site of answers!
This page -> http://students.cmps.subr.edu/aaron.chauvin/misc/test2.html
has some issues in Chrome and Safari. Only when my CSS is in effect, the pictures that are supposed to be side-by-side aren't, but when the CSS is off, they are. This problem isn't evident in FF/IE9. I'm thinking it has something to do with the but I'm not totally sure. Edit Edit: Thanks for the fix Genzer!
Also on that page, even if all my CSS/JavaScript isn't linked, I have a small gap between the bottom of the images that are links and the dotted link border... I want to get rid of the gap. What's causing this gap? This happens in all browsers.
Thanks in advance.
Edit: Here's the CSS: http://students.cmps.subr.edu/aaron.chauvin/misc/style.css
Edit Edit: Fixed the side-by-side image link problem, now trying to figure out what's causing the variation in the display of the custom a:focus border (non-existent in IE9, partially encases image link in Webkit browsers) and the gap between it and the bottom of the image link (all browsers BUT IE9).
The problem is you're wrapping all your column's info in a span: <span class="reg">...</span>
IE9 and FF figure out that you want it to display as a block element, but Webkit (Chrome and Safari) don't. Set display:block on the "reg" class and you should be set. (I think this fixes the "dotted border" issue as well, but i'm not quite sure what you meant there)
To get the orange border to show up in IE9, make sure to set outline-style to something like "solid" or "double" in the a.piclink:hover css class, in style.css. Once i did that, the border shows up.
I'm still not entirely sure why your links and nested images are behaving like they are, but I found a little tweak (tweak = almost a hack) to get it to work: Set display:inline-block; on a.piclink and set a fixed height on it. Note that inline-block tacks on 4px, so the height should be 4px taller than the height of the image; in your case: 47px. It's a bit of a hack, but it's valid and it works. Unfortunately IE7 doesn't like this, but zoom:1; *display:inline; get it working.
Adding following CSS code in your style will make Chrome display your TestPage the same as IE8.
span.reg a {
display: inline;
}
EDIT: Firefox 2 windows XP
Steps to reproduce problem:
Firefox 2 and visit: http://resopollution.com/rentfox/html/property_setup.html
Begin Typing and pressing [enter key] to create new lines
After about 10 [enter key] presses you'll notice the screen shaking
How this happened
This began happening after I installed a plugin for jQuery. It's located here:
http://resopollution.com/rentfox/html//js/textarea.js
It makes it so the textarea is expandable as I type, depending on how many lines there are in the text area, up to a max-height value which can be specified in CSS.
I tried disabling the 'setHeight' function within this plugin (the only thing that changes height dynamically) but I still saw the screen shaking.
When I think the problem might be
Firefox thinks that the screen just got larger, and compensates by putting in a scrollbar on the right side of the body document.
However, it realizes that in fact the page didn't get larger, and removes the scrollbar, causing the shaking.
I have no idea where in the code that makes Firefox think this way...
Appreciate any help.
You can either force a scrollbar: http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
or hide the overflow of the div and try to get rid of the scrollbar, try overflow: hidden instead of auto in the div propertySetup
Can't reproduce, works fine here in Mac OSX + Firefox 3.5.
I can reproduce it (Debian Lenny, IceWeasel 3.0.6), but only with a very, very specific window size for FireFox (just slightly taller than 1024px, depending on your system font size, window manager and number of toolbars shown).
Just make your page slightly shorter or taller and the problem goes away. The problem only occurs when the addition of a new line after the 10th or so causes firefox to grown the page just enough to cause the scrollbar to appear. Just as you guessed.
That's a tiny 10px margin that is dependent on a lot of browser and system specific settings. In your page that margin is somewhere around the 1024px limit, depending on system font, toolbars, window decorations and the phase of the moon. Move that margin out of the 1024px region. Either make the page 40-50px shorter so that the scrollbar does not appear (even with large system fonts and an extra toolbar) or make it taller so the scrollbar is always there. Zoltan Lengyel's answer in this thread to always force the scrollbar can also be used.
I can reproduce it in Firefox 3.0.11 in Win XP.
Adding overflow:hidden to the body tag seemed to fix the problem, but doing that may wind up causing you more grief then disabling the plugin altogether. Giving the body tag overflow-x:scroll will stick a scrollbar there permanently but seems to solve it, too.
I reproduced it on Windows, FF3.
Interestingly it seems to happen within the jQuery .height() function!
Unfortunately you're using the minified version, so that's as far as I can get.