Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
This issue has had me scratching my head for a few days now. I have a website with a set CSS background with no scrolling - works well. However, on pages that are fairly long there appears an exact duplicate of the background, seemingly scrolling in FRONT of the other background.
You can see it illustrated on this page:
http://www.joyrocks.com/corporate/
I've scoured through the CSS and I'm sure I'm missing something simple, but I was hoping some fresh eyes could point me in the right direction. Cheers!
Edit: Got it solved! Sorry this may have been off-topic. Will keep that in mind in the future!
It took me a second to realize what was happening here. Now I'm not sure why it appears to be duplicated like that. Could have something to do with the background being fixed. I think your main issue here though is the body/html height.
body,html{
height: 100%;
}
That only sets the height of the viewport meaning there is still a lot of overflow that's not being covered by that.
I changed height to min-height and it seemed to have fixed the problem :)
body,html {
min-height: 100%;
}
You have a body:after rule that is applying the same style as your body.
There are two offending rules causing this:
body, body:after {
background: url('/wp-content/uploads/2014/05/background-new-2.jpg') top left fixed repeat;
}
body:after, ul.tabs li a.active:after {
content: "";
background: #FFF;
position: absolute;
z-index: 99;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
z-index: -1;
}
Remove the body:after definitions from those and you will be fine.
You must delete body, from this css line:
body, #section-tophat, #section-footer, #section-sub-footer
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 4 years ago.
Improve this question
I have a navigation menu on this site which looks like this:
I'm trying to increase the height of the navigation for example to 60px. I've tried playing with CSS to increase the height but the height won't change. I'm not sure what I'm doing wrong.
I've tried height, padding, heigth !important but there's no effect on my menu.
Can you help me to increase the height of my navigation?
So here is my answer. The problem is the background for your navigation. I would prefer a solution like this:
.row .nav {
line-height: 60px;
background: black;
}
.row .menu a {
line-height: 60px;
}
.row .menu .sub-menu {
top: 56px;
}
Insert this into your CSS. This code is tested and works. Tell me if it works for you.
It should looks like this:
Hope this helps
.row .sixteen.columns {
height: 50px
}
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 designed a website. Everything works on desktop but on mobile, it is not scrolling right or left. When I open the browser on my mobile, it is showing one-third of the website and won't let me scroll to the right. What is the problem and how do I fix this?
CSS
#container {
background-color: #f9cbdf;
width: 100%;
overflow: hidden;
background-image: url(images/webtreats_baby_pink_pattern_21.jpg);
background-repeat: repeat;
}
body {
margin: 0;
font-family: Helvetica, sans-serif;
}
Remove
overflow: hidden;
from #container.
When overflow: hidden; is used the overflow is clipped, and the rest of the content will be invisible
The default value for overflow is visible.In this case, the content is not clipped
If overflow is set to auto, the browser decides whether to clip or not.
See more about overflow here
You need to use `overflow:scroll , check the example
.overflow{
width:200px;
overflow:scroll;
}
<div class='overflow'>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>
if you want to let the users scroll all sides and if you want only x axis useoverflow-x:auto;and for yaxis overflow-y:auto;`
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
My background image, which covers the entire web page, overflows past the HTML and body elements, even though they're both set to 100%.
It's a simple page, as seen here.
I've tried several different techniques to place the background image (including setting it to cover, but I still encounter this overflow issue)
(I feel like I'm going a little crazy, but I'm probably missing something that's very apparent).
Try overflow:hidden
.translucent {
width: 100%;
height: 100%;
background-color: rgba(0, 92, 60, 0.95);
overflow: hidden;
}
I wonder why you set this in the body tag.
It's much easier to give the body tag a background-image.
So i changed your body css style to this:
body {
width: 100%;
height: 100%;
background: url('cover-plaza-707-fifth-construction.jpg') no-repeat center center fixed;
background-size: cover;
position: fixed;
}
And you now can delete <img src="cover-plaza-707-fifth-construction.jpg" id="bg">
I hope this solves the problem, i haven't tested the scrolling yet.
[After reverting it back to a cover background image rather than the standalone image I placed with reduced z-index as a bug fix]
Setting .translucent's min-height to 100% (rather than just height: 100%;) fixed the issue.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have responsive menu in middle of div.
After I resize screen menu moves to right of screen.
Preview example: >>> CODE here <<< (all html/css/js are accessible via web)
it looks like this >
Question:
How to align it to right as in picture ...
Thank you in advance.
PS: code is in example link (html file)
div.content-menu {
position: relative;
}
ul.nav {
position: absolute;
right: 0px;
}
Add position: relative; to .content-menu, and position: absolute; right: 0; to .nav (both in the mobile-size media query).
EDIT And also maybe remove the width on .nav, and .nav > li and change them to max-width: 280px; min-width: 200px; so that it won't break on screens smaller than 300px.
Hope that helps.
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'm getting a big whitespace on top of my page only in firefox. I tried to inspect all elements and can't find anything wrong with it. I also checked for uncollapsing margin but can't find any.
I'm using HTML5, modernzr and jquery.
Website URL : http://devvanickcom.vanickurl.com/
This appears to be a Firefox bug (#451791). The margin collapse is done wrong. It collapses through hr.clear, as it has no height/padding/border, resulting in 90px of margin above hr.clear, but it also applies the correct margin of 90px below the floating element.
Any fix that would ordinarily prevent margin collapse will stop this behavior. For example, setting hr.clear { height: 1px } pushes everything back up, but it also shifts things down a pixel, which is undesirable. An interesting fix is to set header { padding-top: .001em }. This won't add enough padding to actually shift things visually, but it counts enough to prevent the margin from collapsing beyond the boundaries of header.
Alternatively, you could just rewrite your code to avoid this structure.
Just change the position property in the #logo class of your css, set it to:
position: relative, the class would look like:
#logo {
background: url("/Content/images/sprite.png") repeat-x scroll left top transparent;
display: block;
height: 85px;
position: relative;
text-indent: -9999px;
top: -20px;
width: 180px;
}
after that you need to change the header nav class, (margin was 90px on top)
header nav {
margin: 40px 0 5px;
padding: 0;
text-align: center;
}
Then just need to adapt it exactly the way you need it, it will look like this on firefox:
It's very bizarre. I guess the easiest and best way would be, like animuson said, to remove <hr class="clear"> under <div id="contact-toggler-wrapper"> . It did the trick without affecting the layout.