In the given site below, I have a sidebar menu with CSS positioning fixed. However, when I scroll, the menu seems to lag behind. This behavior seems to repeat itself with the image below it.
I've tested the site on IE and everything's working as expected. I have a feeling it's the embedded object behind the menu causing the problem - But CSS fixed positioning should work regardless no? Looking for suggestions or fixes to this issue.
I'm using Chrome 39.0.2171.65, on Windows 7 Ultimate N x64
Image of behavior
SITE LOCATION
Ok, so the problem was with your object, but exact problem - with css rule "z-index: -1"
I made following changes in developer tool
1) Put your object after all site content
2) Add to your object css left: 0 and z-index: 0
3) Add to block .left and .wrapper styles - position: relative and z-index: 1
And after this changes - it looks fine in my Chrome. Hope it helps
Related
So an old friend of mine who knows nothing about programming asked for help with his site. someone has built it for him long ago, here it is - http://challengetours.org/
The problem is with the site's width.
As you can see there is a scroll bar at the bottom of the site, which leads to a huge empty space.
There is no problem with that in particular, but when you open the site on mobile it's zoomed-out to see the whole site including the empty area.
what would be the easiest way to solve this ? I have some background but I've never used WP/JS/PHP/CSS :)
Thanks,
Itai
If WebElaine's comment above doesn't work, you can do the following.
You have two elements setting rules in the CSS:
Your div with id ___plusone_0 has an inline style set to "left: -10000px;".
Your iframe with the id st_gdpr_iframe has an inline style rule of "left: -5000px;".
Removing these two styles gets rid of the scrollbar.
If you are using Wordpress but aren't too familiar with it, you can add your own CSS IDs allowing you to target these elements and override the inline styles if there's an issue with the Wordpress theme itself that you can't otherwise access.
For example:
#st_gdpr_iframe{
left: 0px;
}
#smthemes_share .inner{
left: 0px;
}
I have an element positioned fixed at the top of the screen, with a z-index of 100. When I scroll up the page in Chrome (V. 21.0.1180.82 on OS X and V. 21.0.1180.83 m on Windows) I notice a rendering problem which looks like this:
UPDATE:
I noticed that the rendering problem appears every time when the fixed element passes a new <section>...</section> during scrolling up. Chrome seems to have some issues related to HTML5 tags like <section>...</section> or <nav>...</nav>. Changing those to <div>...</div> solves the rendering problem, anyway I would still like to continue using HTML5 tags.
Does anybody know a "hack" to solve this problem?
Until then I will try to create a reproducible code sample and file a bug to chromium.
The cause of the issue where elements with an opacity of 0 inside the fixed element. Setting those to display: none solved the problem.
Particularly for Chrome latest browser version (55.0.2883.87 m (64-bit))
I have added:
-webkit-transform: translateZ(0);
I am working on a site. The problem page in question is here:
http://bit.ly/I4YR2T
Currently I have the images in a table. I am also using Shadowbox for these images.
When I minimize the browser window in Chrome and Safari, the images scale down nicely.
However, the images are not scaling down nicely when I minimize the window in Firefox.
This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.
I know this must be due to some shoddy CSS on my part.
Can anyone guide me on how to resolve this problem?
Thank you so much!
see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.
Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:
/* begin HeaderObject */
.banner-img {
display: block;
margin: 0 auto;
max-width: 99%;
left: 50%;
}
/* end HeaderObject */
I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.
Hello i seem to have a problem with what could be technically called 'a huge gap down the bottom of my website on Google Chrome'. I think it is to do with this code-
#container {
width: 968px;
min-height: 2100px;
}
I have changed the min height down to 600px and things seem to be ok on Firefox and IE9. On Chrome though there is a massive gap. You can view my site here-
http://onlinebanter.com/
It's depressing as i use Chrome for the admin side of things on my site and i have to look at all day every day and it's starting to get me a little down. I have asked about the internet but have had no response even from the place where i bought the theme (they seem to have the same problem on their demo site)
Id there anyway to fox this?
Thanks
Reg.
Without looking at the actual problem...
You're using an HTML 4 Transitional doctype with namespaces in your <html>. Funny and faulty.
-- edit 1
The problem is the weird located footer img. Make that a block with CSS and you're golden: display: block;
-- edit 2
The min-height has nothing to do with it. Why do you even have a min-height??
This is a CSS related question, I got one good answer from my previous question, which suggested the use of some CSS code like overflow:auto together with a fixed height container.
And here is my actual implementation : on uni server
If by any chance you cannot access that server, try this
Please follow the instructions on screen and buy more than 4 kinds of tickets.
If you are using IE8, Opera, Safari, Chrome, you would notice that the lower right corner of the page now has a vertical scroll bar, which scrolls the content inside it and prevent it from overflowing. That's what I want to have in this section.
Now the problem is, this would not do in FireFox 3.6.2. Am I doing something not compliant to the CSS standard or FireFox has its own way of overflow control?
You can inspect the elements on screen, and all controlling functions are done in one javascript using jQuery. All CSS code is kept in a separated file as well.
According to the professor, FireFox would be the target browser, although the version was set to 2.0...
It seems you have to set a height / overflow to the <tbody> tag, not just the table (or maybe not the table at all, didn't test that).
So...
tbody { height: 130px; overflow: auto; }
And I specifically tested with "height", it seemed "max-height" didn't work as intended. Very odd behavior, indeed.
Have you tried overflow: scroll?