In IE 6 Highstock chart exports menu width is not getting properly displayed, its taking the maximum width but lesser than the chart width whereas it has to take the width based on the menu items as in IE 8/9.
The same is working fine in IE 8/9.
Thanks in advance
The easiest way to fix it for me was to put this in my css:
.highcharts-contextmenu{
width: 200px;
}
works for me with IE6->10
hope this will help
Related
I am currently creating a responsive website. I noticed there is an issue with empty space on the right as you scrolling horizontally. I can remove the horizontal scroll by adding overflow-x: hidden. But it will not work on mobile devices such as iPhone and iPad.
So, I tried to add min-width because it will help to get rid of empty space. But I can't put min-width on full.css (e.g. min-width:1000px;) because it will set to full-width - see example below:
full.css
#wrapper {
width: 1000px;
margin: 0 auto;
}
responsive.css (less than 1000px)
#wrapper {
width: 100%;
margin: 0;
}
I was wondering if you know how to fix this issue? Let me know if you have a better option for it. Or should I create a new wrapper id?
Every now and then I have this problem, and a big part of solving the problem is identifying the element that's the culprit. I just came up with this little jQuery script you can run in your browser's JavaScript console to find which elements are wider than the body width, causing that annoying scrollbar to appear.
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
You Can hide the horizontal overflow using css code (and then the horizontal scroll bar will never show up again):
body{
overflow-x:hidden;
}
Link to the page? Chances are there is some kind of element inside the wrapper that is breaking past the browser window.
Often times it is with padding and widths. Keep in mind if you have an element inside the wrapper that is set to say 100% width and you add padding on the left and right of 20px. It will create a horizontal scrollbar because the element is 100% + 40 px.
So if you are building liquid elements inside a div you would do it like this:
#liquidelement {
width:96%;
padding:0 2%;
}
You need to subtract the padding from the widths, also always use percentages for the padding when doing layouts because it's fluid, not fixed.
Often times it's a matter of a single element which can cause the page to get the horizontal scrollbar. That can be a pain, but you can easily find out the offending element by this simple css trick
* {border:1px solid red}
You can also add the following properties if the element is hidden.
opacity: 1 ; visibility: visible;
Demo :https://codepen.io/i_abhi/pen/eYzpBjr
2020
If any of you using Boostrap and came across this question then here's the answer.
for Bootstrap Users
Wrap your .row with .container or .container-fluid and it will solve the issue.
Referring to your issue, the code appears to be correct. However, some elements inside might also affect the exact width and overflow your boundary. Might check all inside elements as well. You can use Firebug or Chrome Inspect Element.
No more than three steps are required here:
Scroll the horizontal bar to the right where you can see the extra empty padding.
Open an Inspect Element
This is done by holding ctrl + shift then pressing i
Scroll over all your elements, the element with the extra padding should protrude your pages content into that empty space created.
You can Use
#wrapper {
max-width:100%
width:100vw;
}
it work fine with me.
this is an old question and I know you found your answer
but I say this because I didn't see this anywhere else. maybe this help someone else.
if you use min-height in your CSS code, this causes a horizontal or maybe vertical useless scroll bar.
just delete it if it isn't important
I am applying a border radius on a select element that has a background color.
Instead of following the curvers of the border, the background color overlaps the curves and appears in a square box.
I can't figure out what css property I must use to solve this issue.
background-color: #FF0;
border-radius: 24px;
border: 4px solid #F09;
Here is the jsfiddle: http://jsfiddle.net/JsgnR/
thanks for your help
My feeling about this is, to get this to work in every common browser, you will have to rebuild the select with JS ... unfortuneatly styling selects with css like a divbox still not is possible as you would expect. In latest Firefox your code looks nice in browser, because firefox decided to let the border overlap the select, in latest opera the border will be underneath the select, because they decided to.
you see that on the options , try to style them via css, you are not able and they look ugly
You can wrap <select> element in <span></span> and add the required properties to css for
This solution: http://jsfiddle.net/JsgnR/5/
This is my first question here.
I was trying to get an element vertically aligned inside a parent with fixed width and height. Inside the parent box there is also a header, that needs to be absolutely positioned in the bottom.
When working on it, checking cross browser issues I saw a difference on chrome. In FF, IE 8 & 9 it works as it should, if you open the sample in Chrome (19 right now) it gives a 1px gap to the parent as you may see.
Interactive example of the problem - CSSDeck
How I see it - 1px gap
I have tried removing white space, and quite a few things but I couldn't get to remove that gap...
Is this a bug? If you could help me remove the gap, or achieve the same result in a clean way that works cross browser (ie8+) it would be great.
See my example fiddle: http://jsfiddle.net/tnRem/
Basically I removed display: table from #outer and set height: 250px and box-sizing: border-box; (only for IE8+) to #inner.
I tried it with Chrome 19.0.1084.46, Fx12 and IE8
I'm trying to position a div inside a div.
the outer div has a fixed width and heigt, the inner div contains some text, has a fixed height and automatically fits to the width of the outer div (default behavior, without "width: 100%").
When I now add position:relative to the outer div and position:absolute + bottom: 0 to the inner div, I just want the inner div to move to the bottom of the outer div, but keep the same width it had before. This works fine in most browsers (Internet Explorer 8+, Firefox, Opera), but in IE7 it reduces the width to fit the text inside the inner div.
Is there a clean and valid way to prevent this different behaviour in IE7?
You can see an example here: http://www.loud.fm/tmp (I'm talking about the black box at the inner bottom of the featured-slider-box.) Thank you in advance! :)
Since your already using absolute positioning to lock it to the bottom why not add
left: 0;
right: 0;
to your CSS as well.
When you perform position: absolute, you are breaking some of the relationship. In the example you mention, you'll notice that div of the black box belongs to an li element in which the li element has a static width set (of 590px). You could dynamically set the width of the inner div to that of the outer by using javascript on load to handle all situations. Otherwise, set a static width size that matches that of the parent.
I had a pretty similar issue with Div's being changed in width by IE7. A simple style tag solved it for me:
min-width: 100%;
After hours of trial and error, this was all it took. Hope it helps!
I have a box-shadow on my #primaryNav div. Unfortunately, the shadow is being covered/hidden by the background of the following #page element.
I tried to set a z-index of 100 to #primaryNav and a z-index of -100 to #page, but that does not fix my problem.
Any ideas what I'm doing wrong?
You need to define positioning for #primaryNav. Z-index only affects positioned elements.
I just added this in firebug and it fixed:
#primaryNav {
position: relative;
}
I would avoid using a negative z-index. Simply change z-index of #page to 0.
As jlego already said a relative position should fix it.
By the way I would suggest ensuring that there is no shadow left or right of the #primaryNav. Since #primaryNav has a width of 100% a shadow on the side makes a horizontal scrollbar appear.
For fixing this you could set a overflow:hidden to #iframe
I took a look at your site and I think the border-bottom property of #primaryNav is covering up your shadow.