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
I'm having an issue with a site we launched recently. There's a 25 pixel gap at the bottom of the site that I cannot explain, and I've exhausted all troubleshooting techniques I could think of trying to figure this out.
http://bit.ly/1I2m3ZD
Here's what I can tell you is NOT causing it:
1) There is no margin or padding on the body or HTML tags.
2) The footer does not have a bottom margin or padding.
3) The height of the footer is static.
4) There are no elements within the footer that are hanging outside of the box.
5) When I eliminate the both the footer and the content area, the gap is still there.
6) There are no 3rd party apps installed which would affect page layout (and if there were, any dynamic changes would show in Inspector).
I'm using Firefox inspector to troubleshoot this. Inspector is showing nothing that indicates the space should be there, and when I remove elements one at a time by deleting them through the inspector, the gap does not go away. What am I missing?? Either I'd like to learn how to use inspector for troubleshooting better (because I'm obviously not troubleshooting effectively), or I'd just like to find out what could cause this gap and not show up when I try to hunt it down.
I should elaborate. The problem is caused by the code <iframe name="google_conversion_frame"...
Because this iframe is in the flow and has layout, it is being added at the bottom of the page and adding the space. Your best bet would be to apply a style to it, giving it position: absolute; and a left: -5000px; or similar style to remove it from view.
There seems to be an iframe at the bottom of your site named 'google_conversion_frame' causing the added spacing. I would suggest adding the following to your CSS:
iframe[name="google_conversion_frame"] {
height: 0;
clip: rect(0, 0, 0, 0);
visibility: hidden;
position: absolute;
}
I have heard that using display: none can cause issues with iframes and tracking pixels but that information may be outdated and so display: none may be fine.
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 2 years ago.
Improve this question
when ı set the position: fixed; div is disappearing so what can ı do
Before code
Before Page
After code After page
I think I know what happens, for what I can see from the screenshots.
Why?
This happens because when you set a element 'fixed', their position is not relative to their parent any more. It is relative to the html document. You could also say it is taken out of the 'normal' content/document flow.
Since I miss some information on what you would like to achieve, a suggestion is using the value 'sticky' in the property 'position'. This will keep it inside the flow of the document and is 'fixed' relative to their parent. IF you want to achieve this and I would suggest reading into it because using it can be tricky.
Example:
.container {
width: 100%;
height: 90rem;
}
.container-child {
position: sticky;
top: 0; /* Needed, because this way you'll let the browser know when to get sticky when the viewport(top) of the user 'touches' the element. */
}
Source: MDN position: sticky
Beware that the browser support is limited or quirky in some browsers.
I would also suggest setting a codepen example for your problems with a description of the expected behavior. That makes it easier to understand and replicate your issue. ;) https://codepen.io/
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 3 years ago.
Improve this question
Context may or may not be important here: I'm using Ghost on Github Pages via Buster. Buster is a tool that generates a static site from a local Ghost blog, so that it can be hosted properly on static site hosting. The blog post I'm looking for help with is hosted here: http://dresscode.danhakimi.com/why-i-love-belted-coats-and-cinched-waists/. Inspecting elements seems to work pretty effectively, and more effectively than I could copy all the relevant HTML, CSS and Javascript over here. As a disclaimer: I wrote none of this code, and am not a developer by trade, but have played enough with web frontend technology that I should be able to understand most of what's going on.
Aside from one detail I'll touch on later, this works well in Firefox on multiple platforms, and in Internet Explorer. In safari, the images show, but can't seem to set height correctly, at least on my laptop -- at full screen, the images are stretched out, but they respond nicely as I change the window's height. So I'm pretty sure the problem involves the way different browsers process adaptive heights... But I have no idea how to handle that.
The strange thing is what happens in Chrome (on both desktop and android): the images aren't visible at all. I go in and inspect element, and... the only way for me to get images to show is to set the height on kg-gallery-row to a fixed pixel count. Obviously, that's not a practical solution -- I want the heights to set responsively, properly... I've seen a lot of guides talking about setting the flexbox height to 100%, but that isn't doing anything, no matter where I do it.
The last detail worth considering -- although it's a less significant issue -- is that none of the zoomable boxes open correctly, locally or on production, in any browser. They seem to be targeting some area much further down. If you can help with that, I appreciate it, but the priority is just getting the galleries to show.
Per request of an answer:
You can set the height of the image to auto.
.l-post-content figure .kg-gallery-image img {
display: block;
margin: 0;
width: 100%;
height: auto;
}
It looks like Chrome is setting the container height to 0. So, if you have your image height set to 100%, that means 100% of it's container height - which is 0.
Setting the height: auto will set the height in relation to the image itself. This will also solve your stretching issue.
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
I'm using the Semplice theme on a self-hosted Wordpress-site and have a problem with displaying the sub-menu.
I have only quite poor css-knowledge, but after hours of try & error I have managed to make the disabled sub-menu re-appear again - at least it shows up partly. According to the visual overlay of my browser the sub-menu items are there, but only one of them gets displayed, the rest seem to be blocked by a different class!?
I've attached a screenshot to show you what I mean?!
The submenu (vertical drowdown) sits under "units" and has six sub-nav items, but only one gets displayed, the others seem to be be hidden by the (hidden) responsive menu?!
I've tried the z-index but to no avail and now I'm really lost. I would greatly appreciate any help with this! Here's the site I'm working on:
http://s363619762.online.de/
You have the following style:
.navbar-inner {
height: 131px;
overflow: hidden;
}
Remove the overflow: hidden; and it should work (This is just a solution for the current problem, don't know it it affects other places)
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 have a border on the following website http://geertsprengers.be/ under the logo's of the nav.
Now the problem is that when I'm on the mobile website and there are 2 lines of logo's, the border should change the same as the arrow, below the clicked logo.
What is the easiest way to accomplish this?
Could you please provide some more information on what exactly you want to happen?
From what I could gather you want the border that is below the logos in your nav, to stay below the logos when the browser is brought down to a mobile size (when your logos go onto two rows)?
If this is the case you will simply need to do two things:
Change the float: left you have on the logos (li tags) to display: inline-block.
Change height: 54px you currently have on the nav to height: auto.
The problem is the you were trying to keep floated elements contained inside an element with a fixed height, which won't work in your case here. Instead you need to remove the fixed height, which will allow the nav to expand to fit the floated elements when they break up.
Hope this helps.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I've had two developers look at this and they haven't been able to figure out what is causing the issue.
On the following site, the subscribe bar (top of page) looks fine and functions properly in Chrome, Safari and Firefox, but in IE an issue occurs where it shifts the Subscribe button down a line and overlaps with the 'Resources' nav item. A specific width must be set for the float to work properly but when you set the width to auto it floats under the element to the left of it. While it still functions properly this way, it is problematic because it looks awful.
I believe the issue is CSS related but please also note I am using a theme in WordPress and integrating a MailChimp subscribe form.
Any thoughts of suggestions would be greatly appreciated.
Thank you in advance - Ashleigh
Site Reference
Please note that I'm not a CSS pro either.
I'm looking at your website using Firefox 16.0.2 and I see the same problem you are describing.
Using Firebug, I believe you should remove the width: 430px from <div id="mc_signup">. The current width is too small for the complete form and I think that is the reason for the subscribe button to move below the rest of the form. (it simply wraps because there is not enough horizontal space)
See the screenshot, the blue area is the <div id="mc_signup">, which is limited to 430px.
screenshot http://img841.imageshack.us/img841/1540/denised.png
I hope this answers your question.
The problem, you described is consist in Opera and Chrome as well.
But I removed the padding: 0px 10px; part from input#mc_signup_submit.button and it was fine.
I am experiencing issues under Chrome. Increasing #mc_signup's width to 440px; should fix your problem.
Alternatively you could change #subscribe .wrapper .center to width: 100%; text-align: center; and replace the floats on .leftcopy and #mc_signup with display: inline-block;
I recommend you edit your question if you want a more specific answer. Please add screenshots.
I strongly recommend you look at the following link on how to properly float elements.
www.quirksmode.org/css/clearing.html