Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Have a curious issue with my footer links in chrome.
http://www.kfc-uerdingen.de/
Firefox has no problem displaying the links in the footer. However in chrome only the ones in the first column are clickable.
Before that I had another issue with chrome where all but the last columns disappeared as soon as there were more than two, but I solved that by adding the footerContainerInner-div, which took over the column related css.
It's not a z-index issue from what I can tell.
Has anybody encountered this before of can see what's going on?
One solution is to avoid nesting transforms.
Instead, you can use transform: rotate(-2deg) skew(-2deg) on #footerContainer.
Transforming an element modify its stacking context; it seems chrome doesn't handle it very well when you use columns.
It may be a bug.
Try running in compatibility mode. Also, I understand that z-index is not the only step. In order for the reference to be cross-browser compatible, the push and footer classes also need to be position relative for the z-index to be recognized (add -webkit-transform:translate(0,0)).
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
On the mobile version of the website, you can scroll to the right to the navigation, which should actually only be accessible via click. How can this be changed?
(URL removed)
I have already tried many different solutions that I have found, but nothing works so far.
I am looking for help in this individual case.
Thank you very much :)
By moving your .main-nav element with transform to the right you extend width of the visible content, and since your scroll properties are default it will enable you to scroll the entire visible content, including that menu.
What you want to do is clip everything that is outside of your html or body element.
CSS
html {
overflow-x: hidden;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have a problem that only occurs in firefox and I cannot find a fix for it so it would be great if someonw could help me on this.
I have this page: https://shorturl.at/rwR79
In there is a container which is 100% height. Which shows fine in chrome and Safari but in Firefox the container "orange box" has never the 100% height but stays small.
I cannot figure out what the problem is as its working on all other browsers.
Would be great if someone had an idea on this.
Thanks.
As I mentioned in my comment you can just use vh instead of %
But I have also another nice solution for you if you want to avoid vh units, in the main class just change the display from table to flex, that seems to be solving the issue nicely in firefox too :) , also you need to add justify-content: center; in the class to center everything horizontaly
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am working on a Responsive Layout for my Website. I have an extra space on the Right side for English and Left side for Arabic Version, I can not exactly determine were does it come from. this responsive it looks good in FireFox but in Google Chrome creates it.
link of my website :
http://kirkuknow.com/english/
change the website to mobile version at inspect element
Bestenter image description here
English version - It seems to me that the problem is in the div with id #subNews in the mobile view of the website. It contains several divs with the class .subNewsContainer, which are empty, but still hold their widths.
Once I removed #subNews via the Chrome developer tools, the right side blank white space was gone.
Maybe the problem here is that you're not handling that subNews part correctly in the mobile version? You're not rendering any content, but still rendering the divs.
Edit (adding the root cause for arabic version): - it seems the problem in the Arabic version is different. There, the div with id #langbar (language bar?) has a fixed absolute position from the right (600px), and therefore goes a lot to the left, therefore creating that blank white space. Removing it from Chrome developer tools fixed the problem, so you should fix the stylesheet for that div and the ones below it.
General tip: the easiest way to find these issues is just start searching in developer tools. Start deleting each div in the DOM tree, until the problem is resolved. Once you deleted an element and the problem was resolved, you can dig deeper into understanding why that specific div causes the problem. Good luck!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to help a friend with a blog on wordpress.com http://mpiedgeworldclass.wordpress.com/.
They have the css editing option paid for/turned on so we can edit css but can't touch the theme itself.
There is a vertical image repeating between the sidebar and content area. It runs too high in Safari but works fine in Chrome.
If I could access the theme / html I think this would be easy to fix, but trying to do it only from the css.... I'm not sure if this one is even possible.
Any CSS wizards got any ideas?
(I sincerely wish I had more css skills, but it doesn't seem to come easily nor after 6 years very quickly either.) :(
The whole thing is a bit of a mess, but the best solution I can find (which has no effect on Chrome), is to set height: 187px; on #header.
It's an interesting issue, where Safari treats margins differently depending on whether you defined the height or not, even though the calculated height for auto comes out to the same value. I had a similar issue the other day.
Safari and Chrome are both based on WebKit and, as such, have no inherent differences when it comes to css rendering. However if your chrome browser is using a different version of webkit than your safari's you could potentially see some issues. This problem looks to be either a position or display issue...which havent really changed as far as I know.
What I would do is check to see if the css is doing anything new or weird in order to place that element which is the likely cause of the problem. Code would really help, but I can suggest checking the respective versions of safari and chrome and perhaps update them both to their latest builds. At the very least you'll know it is a backwards compatibility issue if updating them fixes the problem.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
In my website I have created a content and navigation element.
Once the 'Next' button is clicked my Javascript will interpret the next page and change a 'data-progress' attribute on it's parent node. My CSS contains several selectors
.content[data-progress="0"] > .progressNavigationHolder > .progressNavigation > div:nth-child(1)
and
.content[data-progress="0"] > .progressPages > ul
so that the tab changes to a pressed state, and the page's margin-left will be incremented by 480px.
This all works great (if a bit confusing to write and explain), whereby the code will change the data-progress to the incremented value as well as the CSS selectors link to the correct node. However, this is only true as far as the inspector is concerned, but in reality, the screen/viewport is not updated to show this change.
This works great in Chrome but for some reason Safari does not want to show it.
If it is any help I am running Safari 5.1.7 on Windows.
Ok, so to overcome this issue, I changed a class of a tag in my Javascript. It seems to be force redrawing the screen.