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
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 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 2 years ago.
Improve this question
I'm trying to add CSS to my PWA app so it can look better on "notch" devices. I roughly drew it and pointed it out with the red arrows. Here is my website if you need to inspect element the CSS classes: https://kyle.awayan.com/. Are there any recommendations on how to achieve this, to get border-radius or something to work with the whole page globally? I tried putting it in body but it doesn't work. Another edit: tried to add border-radius to a wrapped div (specifically gallery if you inspect element my website), and it makes all the items (pictures, menu, etc.) rounded, but not only the edges of the page.
For me the above borders were implemented by the following code in CSS:
overflow-y: scroll;
style="border: solid; padding: 15px; border-radius: 15px "
I got it, I just used the __next div as a wrapped div, and placed this CSS in here from this https://codepen.io/chriscoyier/pen/EmKCa (which was from https://css-tricks.com/body-border-rounded-inside/). After modifying it, I was left with this:
#__next {
border-radius: 10px;
overflow-y: scroll;
}
Looks like I had to add overflow-y: scroll for the border-radius to work.
Edit: It also works when I put it in the body tag. FYI putting overflow-y: scroll messes up with scrolling listeners, so my infinite scrolling doesn't work anymore. Might not want this solution since I don't want to put all the scrolling listeners on one single div... there's a lot of things on my website that react to scrolling on various pages. But here is the answer for people that want to achieve the same thing.
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've been looking through here and other forums, trying to fix this IE bug with no luck. Basically, the gray buttons below "FIND THE RIGHT TOOL" (using "cards" in Zurb Foundation, with the Flex grid) are displaying oddly in IE11--as if they have no width set:
http://www.mindtools.io
Here's how it's rendering in IE11: http://imgur.com/a/VwWIl
Any help would be greatly appreciated--thank you!
I can get the "cards" to be the right width by setting #find-a-prog to width 100% and .disorder to width: 100%. But there are other issues in my view of IE too, like the button bumping up into the cards and the #find-a-prog aligning to the right of the startchange div.
EDIT: corrected a mistake. Also I would suggest making the hero container display block and centering the items in it a different way, maybe with margin: 0 auto;
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 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.