I run a multilingual Drupal 7 website. White space recently appeared on the right side. I can't find the cause. It shows up on the German home page but not when you switch to English, unless one logs in. It inconsistently appears throughout the website. It shows up in every major browser except Firefox.
I've combed through the css and html, but I'm missing something here. Can someone please take a look?
"overflow-x: hidden" is not really a solution for me — I would like to pinpoint the cause.
Here's a CodePen Link.
It is the following class causing the issue:
element-invisible
It is used on the h2 header here:
Sekundärmenü
To see for yourself, just do a rename on the element and you will see it fixes the issue.
Related
This is my first question.
I'm having some issue with a bug on my local webpage. I've been creating my own version of an Airbnb website, namely 'tombnb' for a few weeks now but have become stuck with a bug.
On the right side of my page, I have a white margin (about 20px wide) that I cannot rid of.
I hadn't had this problem before I recently added some code to my page to ensure that it's flow didn't change when I altered the size of the browser window. (I can't even remember what code that was) and despite removing that code, this white margin still remains.
Would somebody be able to give me some help in identifying what the cause of the problem is?
Thank you.
http://pastebin.com/J0aWAXcC - HTML
http://pastebin.com/tPdLXf20 - CSS
Your code is incorrect, you are missing one </div>.
That will fix your problem.
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
I'm currently creating a website, which has an div called Aside. This is basically an aside part of the website.
I'm including it to my index.php.
There is nothing serious about it, however I have a huge problem. I have had everything working yesterday. Today when I visited the website in my Firefox browser, I have just happened to see that the Aside div has completely disappeared. When I get Firebug to inspect the Aside div, it show me that div greyish. So I guess it means that it is not displayed.
I have searched for every "display:none" in my document, but I didn't find any which relates to the Aside div.
I have tried it in Internet Explorer and I got the same problem there as well. However I have tired it in Chrome and it has worked prtyy well, it showed everything.
Than I have tried it in my Virtual machine's browsers and all the 3 browsers were showing the aside div.
I have also tried it on my VPS and it was okay there too!
So what the hell could happen with my browsers or my code, that it does NOT display ONLY the aside div? What can be the problem?
I have never seen anything like that, because it was okay yesterday and today its bad...
Any help would be appriciated.
And I have also tried to delete my history and everything, but its the same.
Disable AdBlock / AdBlock Plus in your copy of Firefox, or give the div another ID / class as a quick fix. The reason I thought of this first was because I had a much more blatant ID of "advert" on a div which I only noticed got blocked in a copy of Firefox which had AdBlock Plus installed when I was testing the site out.
A more permanent fix, if you intend to keep using AdBlock, would be to remove the name of the div that got blocked from the list of keywords / filtering rules that you're using.
In Chrome (osx 10.7.4) I am getting a blank space at the bottom of my page http://presstube.com/vandalized-notes/
I would normally assume that it is just some whacked out css, but I've noticed 3 strange things in my hunting.
this only happens online.. locally the space is not there! wtf?
when i use the inspector it looks like the space is taking place outside the html
when I scroll all the way to the bottom, then reload, the browser's scroll is reset just above that space.
here is a screenshot of it online:
here is a screenshot of it locally:
If anyone can shed some light I'd appreciate it!
thanks,-j
Ughhh! after much wasted time I found out that it was some malware Chrome extensions that had snuck in. something call "quick-save".
If you're having this, go look in your chrome extensions and look for anything seedy and trash it.
The telltale sign was that in my console I had lots of suspicious looking js activity going on. I googled one of the servers it was trying to access and found a some chrome documentation warning of the se nasty extensions.
Hope that helps someone else who is ripping apart their perfectly good html/css in search of weird mystery spaces in their layout!
Your class .footy has padding-bottom set to 80px. Change this to change the space at the bottom.
I'm having some CSS issues that seem to only occur in chrome. The site in question is liveinthelead.com, and it's still being worked on so if you notice any other strange problems feel free to let me know, I won't be offended. My main problem is this though:
In all of the browsers I've tested except for chrome the site looks fine. However, in chrome, on the main page, the middle post in the three-post divs are shifted down about 20px. But when I open up the developer interface, they shift back to where they're supposed to be! Maybe it's just a local problem, but here are some pictures of what I'm talking about. If you don't experience the same issue then maybe it's just something weird going on with my computer. Cheers.
When I initially load the page
After I open the developer console
One thing that I noticed is that in your div#three-post you set float:left to div.member1 but not to the remaining div.member2 or div.member3.
That's where I would start investigating the problem. Maybe you should set the remaining two divs to also float left. You may need to clear them afterwards too.
For the sake of convention — and so that you don't encounter this confusions again — use IDs for selecting specific elements, e.g., member1, member2, member3, and use classes for selecting multiple elements that should share the same attributes.
I'm unable to replicate on Chrome 15.
=\ could be a good thing! Try another computer!