I'm so sorry, for I write a request for you, but I can't fix my page. I read several Howto, Stack Overflow, blog entry about ScrollSpy, but I can't fix my problem. Can anyone help me?
I know, the best way is I copy-paste the page into a code sharing site, but this problem is depending on the full environment. Sorry! I hope!
The page: http://eskuvonk.dras.hu/
I have a page with fixed overlay (header), and I want to use the main scrollbar for scroll. The problem is next:
Under Chrome, the whole page is working good, but under Firefox, the menu is crazy! Highlights good menu at first scrolls, but after jump immediately the last. Why? I checked the divs in debuggers, the padding, and others are too far for indicate the end of the page.
Please, help me! My wedding is depending on it... :)
Thank you!
You have position: absolute set on your container div -> <div id="streak" class="container">. Remove it and it should work just fine.
#streak {
position: absolute; /*Remove Me*/
}
This might break the layout of your page a little bit as is, but that is what is causing the issue in FF, so you'll have to clean that up as well.
The final solution was:
Removed all position: absolute; from any parent node of ScrollSpy inspected anchors.
Replaced padding-top: 300px; to margin-top: 300px; on body.
Added margin-top: -300px; padding-top: 300px; to #streak for fix the scrolling.
FYI: The page contains fix positioned, 300px height menubar.
Related
Just figured out that one specific div is hidden in Safari. - For both Mac and iPhone. I have tried searching for the problem, but I can´t figure out where it all goes wrong. It looks like the div container is misplaced.
Please see attached images to see how the container is moved.
Chrome
Correctly placed.
Safari
Misplaced
By adding the following to container it gets positioned almost correctly:
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
}
But then the hamburger menu does not work. So I don´t believe it should be set to position: absolute, but must be some other code that is either not valid in Safari, or something important has been forgotten.
Not sure how much of the CSS which it needed. It`s pretty long and complicated so please ask and I will provide the code you ask for.
Link: http://www.hitra24.no/
The problem was located in my CSS where .nav was set to overflow: -webkit-paged-y;
By removing this it solved the problem on Safari on both iPhone and Mac.
I'm editing an existing Wordpress theme (created child theme) and I'm having formatting issues. Both on mobile and desktop versions of the website.
My first issue is that the first post loads under the header-logo container sometimes depending on browser size, I notice this happens a lot in mobile devices. The "PROMO" post goes missing.
I've increased both the margin-top & padding-top properties but it doesn't seem to resolve the issue. Do I perhaps have to update the positioning of the container div? If so, what would be the appropriate way? Been reading a few articles and trying a lot of css edits but I feel like I'm just going in circles.
Affected site: http://posteshare.com
Mobile view: http://www.responsinator.com/?url=http%3A%2F%2Fposteshare.com%2F
The other problem I'm encountering is that media embedded on posts are floating on top of my "fixed" header instead of the other way around. I've modified the "position" property to absolute but it seems to break the formatting of the whole page? Been at this for a couple of hours and it's driving me nuts. Any new insight is appreciated. I've ran out of ideas to try.
]3
To make the header appear on top of the other comment, there is a z-index property, as said in the comments by #Milan. Basically, what you have to do is...
#header-container {
z-index: 999;
}
/*all the other elements on page except body*/ {
z-index: /*less than 999*/;
}
With this, the header should appear on top of every element on the page.
If your navigation is 110px height, maybe try adding height + about 20px margin offset to the container like so:
.container {
margin-top: 130px;
}
Add clear: both to .container on grid.css line 3
I have a question regarding my website.
I have a parallax effect going on with my website but I want the text "Clinical trials" and all the text below it to stay fixed when I scroll over it, right now it just scrolls with the page how can I fix that?
I believe this is the correct way to respond instead of adding another answer. I have had similar issues with javascript working perfectly in one browser but not another. I remember Firefox causing the 'flashing' effect. So my question to you is, have you tested it on multiple browsers?
Sorry for the original response not being anything close to what you were trying to do. I read the original post and quickly scanned the tags assigned to it. By the time you had edited the original I had already answered. I am leaving the original markup incase it helps somebody else with a html/css implementation. The html/css keeps a div visible throughout the entire page. It doesn't provide the effect of keeping it visible once the user scrolls to it's location on the page.
ORIGINAL
The text you want fixed while scrolling should be in it's own div and assigned a class in the style sheet. Use top and right to position it.
HTML:
<div class="trials-fixed">Clinical trials</div>
CSS:
.trials-fixed{
position: fixed;
top: 0;
right: 0;
width: 300px;
}
The position property is explained more here.
You may have to set the z-index of the text; explained here.
I have a problem on my blog.
In firefox theres an ugly space on top of the site, which is not visible in chrome and i don't get rid of it. Firebug didn't help anyway.
It's weird: When i change the margin-bottom of my <div class="ontop">, then the space appears. if i set it to 0, its gone!
Could you please help me? Thanx!
There is some issue of 'margin-bottom: 300pxin .ontop class in firefox. It is something weird.
Set height: 100%; will do the trick. and remove top margin.
I think this is bug in firefox.
give class .wrapper{display:inline-block}.
it will solve the issue.class .ontop to {float:left}
Even though I don't have the time right now to figure out why this problem occurs, here's a quick fix:
Change the
margin-bottom: 300px;
to
padding-bottom: 300px;
Edit:
Somehow this problem seems to result from a non-explicitly set height for .ontop. If you set
height: 82px; /* Height of your logo */
the problem also disappears and you can continue using margin-bottom.
I have a blog that I'm having a slight styling (CSS) issue in Chrome only. For reference the blog is located here.
The issue is that (in Chrome only) when I scroll the content should go under the nav bar (but over the top of the big image), but it goes over. Again, this issue only exists in Chrome.
I'm not sure where to even start, but I'm hoping y'all will have a few tips for me. Thanks!
The issue was actually fairly simple and had to do with the positioning of the header elements.
I changed #header_area .page to position: absolute, and #header_area .Nav to position: fixed. I also gave #header_area .header a top margin of 70px and made that position: fixed as well.