So while working on a project I noticed that when I scrolled to the bottom the scrollbar would bounce back up a page.
Originally I had to make the front page have less vertical space for the footer and add the space for every other page.
So I moved:
body {margin-bottom: 150px;}
To:
body:not(.home) {margin-bottom: 150px;}
I'm answering my own question here though it's very clear Chrome has widespread issues with the scrollbar behavior in general. For people who aren't web designers it is possible to override the behavior on a live website and in some cases (with extreme subjectivity) programs (e.g. maybe the bookmarks page) though the issue in browser pages is overriding the browser's internal CSS which isn't always possible.
The fix, at least in the scenario I faced, was to split the margin in two and give the other half of the spacing to the padding-bottom.
So in example, this:
body {margin-bottom: 100px;}
Would become this:
body
{
margin-bottom: 50px;
padding-bottom: 50px;
}
This is however generally not an acceptable solution as there are very explicit reasons why margin and padding are two different contexts however the project I'm working on is very graphically heavy and requires breaking proper CSS conventions.
For non-web developers/designers who may come across this issue and page, as I mentioned in the question above, it is possible to override a website's CSS code if the CSS selector can be specific enough to only effect one website. The code would then have to be applied to the browser's master style sheet. I've done this in the past to negate Google forcing ads even around my Adblock Plus filter subscription and won. Each browser has it's own way of applying default styling, since this is a Chrome specific issue and I'm not as familiar with Chrome I did some digging to provide some bread crumbs and hopefully make someone's life just a bit easier:
https://superuser.com/questions/52967/change-default-css-of-google-chrome
Related
On one of my sites, while the page loads images appear much bigger than they are supposed to (as specified in the CSS)
I was thinking that it might be something related to the size of the images, but no.
I tried changing the 'display' property but that did not help either. I'm thinking that perhaps it's some JS related resizing issue, but I don't really know how to test for it. The blocks are powered by OWL-Carousel, but I tried searching for such an issue and came up empty handed.
** Thanks for the answer - which was given by Benjamin. The issue was caused by FOUC, Above the fold rendering of the elements. Once I added the "critical CSS" (that loads before OWL carousel actually does), the issue dissepated.
What you're dealing with is something akin to what's known as FOUC (Flash of Unstyled Content) - though the cause for you appears to be related to your "owl carousel" which takes a moment to initialize, and your site relies on that for the actual final appearance.
You don't have any CSS that gets the layout close enough before the Owl Carousel loads in. If you applied something like the following CSS to it, it would get it pretty close (at least on desktop, I didn't check the actual appearance before/after on mobile, but that could be amended with an #media query)
.scolumns {
display: flex;
overflow-x: hidden;
}
.scolumns > .column {
width: 248px;
flex-shrink: 0;
padding: 10px;
}
Basically, if you rely on JavaScript based DOM manipulation for your final layout, you'll either want to apply some CSS that gets it close first (and doesn't affect the final layout, hence the Direct Child Combinator above: > - your carousel adds containers, so it won't affect it after it's done loading") - or use some kind of loading animation on the parent element that you hide when it's fully loaded.
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;
}
For a simple business-card-style web-page, it seems possible to use the html element in CSS to specify background-color for your document, and add some fancy border / margin: auto / padding: 1em through body. Looks nice in Google Cache, BTW, which would have their header within your body, all nice and fancy, just as it was meant to be.
However, the above seems to conflict with the Internet Archive Wayback Machine, with their interface being overlaid on top of your body (doesn't look very bad, but not the best). Also, the body {margin: auto} part (used to centre the body element) gets lost through the Yandex cache.
We can add a div, and switch the CSS rule from body to div, and from html to body (and it'll look perfect in Yandex cache), but then it starts conflicting with Google Cache, looking really weird; Internet Archive is somewhat better, but their own div's do get dangled with your stylesheets, too, looking quite unintended.
You could argue that I should use an id attributes, but then it's not like it's guaranteed that it's not going to conflict with something else again, too, plus the style will not be generic anymore.
What would be the best approach if I want to stick with standard html5 elements? Perhaps still use body (or html?) to set the background colour through CSS, and an article or section for the box element with the border and central position?
The Internet Wayback Machine does not guarantee1 complete archives2:
Please note that while we try to archive an entire site, this is not always possible....Additionally some sites do not archive well and we cannot fix that.
...
Not every date for every site archived is 100% complete.
So there is no way to guarantee that the archived site's CSS will always display as it did when live or even always be available. The file(s) might not get indexed on a particular date. Nor is there any way to ensure future changes to the Wayback Machine's own CSS (or how they handle archived CSS) won't change and cause other issues.
I have a webpage where the bottom part is occupied by an iframe that I made transparent to view the overlapped elements.
Although the transparency is working well, the overlapped links are not clickable unless I switch pointer-events to none in the iFrame (which obviously solves the problem by another). I tried making a div into the iFrame, covering the "menuless" part, with pointer-events set to all but it doesn't seem to work. I also have to keep in mind the chat component is sticky.
This question is old, but for anyone who stumbles across it...
iFrames represent another entire DOM wrapped in the parent DOM. Things like CSS pointer-events don't typically work on iFrames or function the same way across browsers.
You can try to impact all content INSIDE the iframe using iframe > * {pointer-events: none;} but if the iframe content crosses domains, it likely won't work.
pointer-events: all; is intended to work with SVGs only not other DOM elements.
The proper solution for the OP is to either scale the iFrame to only the size of the content OR don't use an iFrame at all.
Other options to embed content:
HTML <embed> - Docs
HTML <object> - Docs
Web Components HTML Imports - Recently deprecated but there's a polyfill
None of these are great solutions but depending on the problem they may work.
Finally, you can use a Javascript call to fill the content of an element with external content. This is essentially what "Single Page" Apps built using React/Angular/Vue are doing behind the scenes. Note: If you go this route be sure to pay attention to CORS headers if the content is coming from a different domain.
You can use z-index through css:
The z-index creates a list of the concerned elements in css and the element with the highest number, so for example:
#elmnt {
z-index: 10
}
#anotherElmnt {
z-index: 20
}
The #elmnt will have a less importance and will be putted behind the #anotherElmnt that has a higher z-index in case of overlapping.
I have created a Wordpress child theme based on Thematic and I'm currently trying to debug the site in IE 6/7. My suspicion is that the problem is hasLayout, as that seems to be very common and the symptoms are congruent, however I have checked many of the broken elements and added hasLayout properties to those that did not already have them with no advancement.
I did have z-index set in several of the CSS classes, which I have now removed, and I'm wondering if any of you have some other suggestion about other debugging approaches.
The site is: http://032b4a6.netsolhost.com/WordPress/
I have posted here instead of the Wordpress forum as I believe my problem is more related to a standard CSS issue than anything specific to WP.
EDIT:
To detail the kind of errors I experience in IE6/7:
The header, which is an anchor with a css background property, pushes down on the search box, causing large gaps.
The nav displays as if it has an extra 75px of margin under it, causing another large gap.
The right sidebar is missing. It can be found just barely peeking from the left side of the container below the left sidebar.
The left sidebar appears to have an extra 15px of left margin, pushing it onto the main content div.
To check if a layout problem in IE6 / IE7 is hasLayout-related problems, I sometimes find it useful to use a rule like this for debugging - it's propably not something you want to use in your final stylesheet (as it will probably introduce new problems), but often it can reveal what elements needs to be given layout:
* {
zoom: 1 !important;
}
Welcome to the world of conditional comments and IE stylesheets: http://codex.wordpress.org/Conditional_Comment_CSS You need to tweak the CSS for IE and test with native IE, not browser shots.
Try taking the slider out for a minute to see if there is a CSS conflict.
And you have a few minor html errors, one having to do with an inline style sheet:
[Invalid] Markup Validation of 032b4a6.netsolhost.com WordPress - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.