I realize this question has been asked before but the solution that is usually supplied involves adding this to the target tag:
overflow-x: hidden
which I've done. This fix prevents horizontal scrolling in Firefox but fails when it comes to Chrome and IE8 (not so much an issue at this moment in regard to IE8). Judging by previous questions this may have become an issue since Chrome version 34. So how do I go about fixing this?
Thr problem CSS that is causing the scrolling looks like this:
// Tablet portrait and landscape
#media (min-width: #screen-sm-min) {
& {
margin: 0 -100% !important;
padding: 30px 100% !important;
}
}
the above causes the content to appear evenly in the center as per the requirement. Any advice on this or a possible resource to explain why this happens in Chrome?
Thanks
P.S. I also noticed that this site doesn't have that problem - why would that be? Fundamental difference in structure? Or the CSS I'm looking for?
Thanks for everyone's efforts even though I provided little information. We solved the error though we still don't know why it was happening. We have different .LESS files for different pages but they are all imported into one called ice-styles.less
Here was were I was adding the overflow-x: hidden and for some reason this was being ignored even with an !important suffix appended. My understanding of this was that it should apply to all pages because it was being attached to the html and body tags.
So we moved the same line above into the .LESS page that the problem was occurring and it fixed the problem - but it didn't introduce the problem into other pages - this suggests that the structure of the page was the real culprit.
Thanks again everyone
did you tried styling it by jquery?
$(document).ready(function(){
$('body').css('overflow-x','hidden !important');
})
or even if it didnt worked trying it after few seconds
$(document).ready(function(){
setTimeOut(function(){
$('body').css('overflow-x','hidden !important');
},1000)
})
there is something that is overwriting you overflow:hidden tag...
maybe there is some css that gives your element some width and then you force the overflow which does not happen at times in chrome or IE...
html {
overflow-x: hidden; //or none
}
Related
I am working with Bootstrap 3.3.2 . My Goal with the site im building was to have the nav menu always collapsable, like when it is in mobile view. to accomplish this I went to bootstrap.com/customize and changed the #grid-float-breakpoint: to 99999999px; so large that it would never uncollapse the nav. This works fine for all other browsers except for Safari. In safari my nav header image shows up, but the icon for the drop-down menu is gone.
In safari when inspecting the drop-down icon's css I find:
#media (min-width: 99999999px;){
.navbar-toggle {
display: none;
}
}
It seems as if Safari thinks my viewport is actually greater then 99999999px. Now the simple change would be to adjust my code to display: inline; But when i do this it takes the .navbar-toggle out of the grid system and not pliable for responsive.
Any help towards a solution or if anyone knows of this as a bug issue, would help out alot. I have already researched issues with the #grid-float-breakpoint and did not find much other then this WAS an issue with chrome a while back but has since been patched.
thanks
Presumably you're referring to http://crbug.com/375574 , which apparently still applies to Safari 8. The solution is to use a somewhat less absurdly-high value for #grid-float-breakpoint. Removing a single digit seems to be sufficient:
#media (min-width: 999999999px) {
Also, I went ahead and filed a WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=141533
After messing around with the css for a few hours I found that adjusting the #media (min-width: 9999999999px) .nav-bartoggle to -webkit-display: inline; and adjusting the parent element width and a few other adjustments can result in acceptable code. Im sure cvrebert's method will work much better. But I just wanted to comment that there is pure css work arounds in the case some one needs to know in the future.
When I use in-page links or "anchors" to reach a part of the page, the scrollbar doesn't allow me access to the content above -- even though it is there in the HMTL.
My site is developed in WordPress but I think the problem is more my CSS.
See the naughty
http://adanewmedia.org/submissions/#review
versus the nice http://adanewmedia.org/submissions/
Any ideas are appreciated!
Line 92 of style.css, remove this:
#main {
overflow: hidden;
}
Seems like a weird bug, or maybe you have a height set in some parent element to the #main div. Removing that style should fix it though.
Further inspection I found this (style.css line 96):
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
This is where your issues begin. Removing this nonsense fixes your original issue, but changes up the style of your site quite a bit. If you want to remove the black sidebar/footer, do that instead of pushing the containers all over the place.
When I tried playing with your code, it seemed to be this line in your style sheet that caused it - http://adanewmedia.org/wp-content/themes/twentyfourteen-child-ada/style.css?ver=3.9.1
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
Not sure what you are trying to do with that.
Also: firebug is rendering the page very oddly - I'd try validating your code as if Firebug is struggling to render the page correctly, then browsers are also likely to throw unexpected layout issues.
I just finished my portfolio site, which is my first attempt with html5 and it looks great in Chrome. But when I tested it in IE and FF, exept IE9, there are some major differences that all occur in the header. I think this is because the header has a fixed position. I did this because of the menu. I created a one pager and if I didn't set the position on fixed, the menu disappeared when you clicked on a menu item.
A second error is that with IE all the images get a blue border, which doesn't appear on Chrome.
And a third error is the font in the header is also different with IE. I used an #font-face font for it.
My HTML and CSs code validates on W3C.
You can find the website at www.nathaliedehertogh.be
Can someone please help me out with this one.
All you need to do is add clear:both to #menu, and border:0 to img.
The blue outline is default in some browsers to show that the images are links.
You need a clear in your header to allow the content to flow as wanted after.
The blue border for IE simply needs a CSS setting:
img {
border: 0;
}
As for the font, some fonts don't read correctly in IE. The error I get is:
#font-face failed OpenType embedding permission check. Permission must be Installable.
You don't have a height defined in your div 'kopregel'.. this is causing an issue since you have elements with heights defined inside it.
NOTE: I see it all broken in FF, stuff is being smooshed to the right.
The problem with your header is you need the clear function in your css.
Here is the new and edited code.
#content, hr {
clear: left;
margin-left: auto;
margin-right: auto;
width: 80%;
}
No issue with fixed positions this is just a common issue, hope this helps let me know!
Another major Difference Chrome vs IE check this out
http://technofizzle.blogspot.in/2013/04/chrome-and-ie-display-image-completely.html
Here are my styles:
Parent container:
div.musicContainer {
width:820px;
height:54px;
margin-bottom:20px;
}
Child containers:
div.hardcorePlayer {
width:400px;
float:left;
border:none;
background-color:#996600;
}
div.feedbackPlayer {
width:340px;
float:right;
border:none;
background-color:#996600;
}
The issue is: i installed IE9 yesterday and while IE8 was displaying fine well now the feedbackPlayer div is not lined up to the right boundary any longer. it displays fine in other browsers as before.
is this a IE9 bug?
IE9 image:
other browser image:
thank you very much for your thoughts on this.
website url: www.guygar.com/guygar.html
NOTE: here is the new CSS with the reset data. Have i done something wrong?
Maybe you should try to reset the css so that all browsers start out with the same defaults (like padding, margin ect.)
You can find a css-reset and more information here: http://meyerweb.com/eric/tools/css/reset/
Edit:
Related question: https://stackoverflow.com/questions/116754/best-css-reset
This line is in flash.
Change body background to white, and .musicContainer to red. You will see that html is not failing. In my opinion it is a flash like bug.
Try zooming in FF ( I tested in 5.0) on few zooms there is also same gap.
I couldn't find a css reset being used on the site you provided. It may just be a difference in how IE9 displays different elements (margins, padding etc). I tried out the provided website in IE9 and didn't see the problem so it's a bit difficult to diagnose, though.
I'm using this approach for my websites I created prior to IE9.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
Let it be the very first meta tag in your head tag, and IE9 will act as it was IE8, hopefully in the same identical way.
It solved all my problems in all my websites until now.
Enjoy
It's related to flash redrawing. It behaves the same in ie8. Try resizing the browser window width and you will see that it doesn't update correctly.
Why dont you try a html5 player like http://www.jplayer.org/ instead?
Maybe try using js to check the browser and alter the size or position with js in an if statement.
w3 schools has a nice tutorial on browser checking.
http://www.w3schools.com/js/js_browser.asp
Where am i doing wrong?
This is the normal print preview:
But I want to see this picture (without dragging margin arrows)
This is the css codes and preview:
Yes. It is possible to alter your margins in a page printout. The rule would look like:
#page {
margin: 0;
}
This will not work in Firefox as of now. If you check their developer reference on the #page CSS support, you can see what browsers do support #page.
The best you can do is set #page margins. Keep in mind, however, that you can and most likely will be overruled if you set margins to 0.
Thanks ! works well on chrome
#page {
margin: 0;
}
I don't think it is actually possible to do this, because you'd be overruling the defaults on the user's computer. As far as I know, a web application doesn't have the access rights to alter something like printer settings without some kind of ActiveX script in IE.
I had a similar problem a while back, and ended up having to generate a PDF on the fly using TCPDF. In the end that worked out better, because you have greater control over the layout.
I'm prevented from upgrading a computer from Windows XP to something more recent, so basically I'm stuck with IE8.
I found that on IE8, page margins will always be a minimum of 6.01mm left and right, and 5mm top and bottom. No matter what I do, even using #top-left right and centre rules inside the #page rule, it will still default to the values above.
It may be easier to create the stylesheet to take into consideration this limitation on the print size.
It may also help to put the IE hack \9 in front of the CSS class property value, duplicating the property may also help in some cases, (but won't affect the margins of the page), such as:
.aDiv {
margin: 10mm;
margin: 15mm\9; //this \9 hack will set that value only on IE8.
}
I know there are other hacks similar to this, such as \0 but I admit don't fully understand them. \9 works for me in IE8 in some situations.