First post. Preface - Recently started web developing so don't have much experience with IE7.
Created a webpage using Adobe Muse for the first time because it's supposed to be fast for the design side. Design was fast but having some weird issues displaying the page in IE7. A div always jumps to the very top of the page whether the positioning is absolute or relative. Not sure what is going on. The page is found at
http://dealer.dealers2farmers.com/dealers/cherokeegarage/
There is a horizontal div that contains the "Search Inventory" and Google map that always jumps to the top of the page in IE7.
This is the CSS of the div
#horzBannerPosition
{
z-index: 2;
width: 0.01px;
top: -3px;
margin-bottom: -3px;
position: relative;
}
I thought the width was strange, Adobe Muse wrote most of this but it seems to work just fine with newer browsers. Not sure why this jumps to the top of the page in IE7. Any ideas?
Ok with just a quick glance over, looks like you have a conflict with your z-indexing, your positioning, as well as using top. Remember for IE7, z-indexing actually starts at 0 and gets all messy from there (this may help: http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7). Also careful with using classes and id's in the same tag. I would have to dedicate more time to this to check it out in full, but check out that article for the time being.
Related
I'm simply trying to emulate one of these methods for stickying a video that will play as a viewer reads a blog post on my Squarespace site.
https://www.cssigniter.com/make-sticky-floating-videos-page-scroll/
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning
How to make div fixed after you scroll to that div?
http://js fiddle.net/4mqLhnpf/
Preferably the video would lock to the top portion of the screen, allowing the article to be scrolled below it.
I've tried all methods listed above and none have worked. I've copied the code directly, and even changed IDs and classes in case something was overlapping and causing an error. Nothing works. Is this sort of functionality not allowed by Squarespace inherently or am I doing something wrong here?
You can try the CSS position property.
Simply add this to the div styling:
position: sticky;
position: -webkit-sticky;
top: 0;
I'm learning how to use the Skrollr.js library. Awesome cool tool on using the scroll bar in the DOM to manipulate the appearance of a web site. It does have a bit of a steep learning curve to understand exactly how it works. I'm playing with a simple sample. I have an image that I want to stay on screen in the background for 500% of vertical height. I have other text items that I want to scroll in the foreground. I wanted to do a test and have one of the text items fade to zero.
helpful references: Classic Parallax Scrolling Example, and I Hate Tomatoes Example
I've got an image in a div loaded in a position: fixed; location, and a few divs in the scrolling area below <div id="skrollr-body"> I have a text header that I wanted to fade to zero as I use the scroll bar. Note: I started skrollr.init() without any arguments. Also, I am not using jQuery at all.
My problem is it works erratically on Chrome, and works just fine on Firefox browser. I'm at a loss to figure out why?
I've created a jsFiddle to exhibit the issue. http://jsfiddle.net/q3z3v6op/4/ Fiddle works the same as my test program; Flaky on Chrome, okay on Firefox. When looking in the Chrome dev tools, you can easily see that the red box text opacity value is changing correctly to zero as the box goes towards the top of the display, but the actual display doesn't fade most of the time. I can get it to work if I go to the Chrome Dev tools, open up the drawer (where the console / search / emulation / rendering tab is), then select 'rendering' and click on [ ] Enable Continuous Page Repainting.
Anybody else been here? Any ideas what's going on with this issue? Many thanks.
I updated your fiddle. This is a little bit of a different approach, but it should be more cross browser compatible. I guess Chrome does not like display: block and opacity: 0. This looks like a bug. I tested in on Safari (which is also WebKit) and it does not have a problem. By using inline-block I was able to fix the bug on Chrome.
http://jsfiddle.net/christianjuth/q3z3v6op/5/
Fixed code:
.hsContent {
display: inline-block;
position: absolute;
left: 50%;
width: 400px;
margin-left: calc(-200px - 8%);
color: #ebebeb;
padding: 0% 8%;
text-align: center;
}
I am working on getting the hang of HTML5/CSS and it is going OK thus far. I recently added a footer to my play website, and have it attached to the bottom of the page and centered. However, while the footer is centered correctly under my main content while previewing through a web browser, in the design view of Adobe Dreamweaver CS6 it shows the footer as way off to the side of the main content div. I find it odd it would appear this way in design view, but work as intended while testing. Is this just the cause of how I coded it? It is slightly annoying that I have to scroll way off to the right to see the footer in design view...
Any suggestions as to why this is, or any suggestions to the general coding, would be greatly appreciated. Below is how I coded in my footer. Thank you.
.footer {
position: absolute;
bottom: 0px;
width: 960px;
padding: 10px 0;
background-color: #0033FF;
}
yes, its correct that Dreamweaver's output is quite different than that of web browser's output and there is nothing wrong with your code.
Dreamweaver's internal web browser is not much updated and doesn't supports some HTML and CSS tags.
so just ignore Dreamweaver's web browser..
I have a self-written lightbox that dymically loads up content from a database, and the result is something like this:
<div class="lightbox">
<div class="lbtop">
</div>
<div class="lbcontent">
lightbox content
</div>
<div class="lbbot">
</div>
</div>
All elements in the lightbox are block-level elements, and are floated (this includes sub elements like p, h1 etc).
The lightbox uses fixed positioning to make sure it is always on the same place like this:
.lightbox {
width: 320px;
height: auto;
z-index: 999;
position: fixed;
top: 0;
left: 0;
display: block;
overflow-y: scroll;
}
So far so good. Adding content to the lightbox is also no problem at all, and the elements all scroll nicely.
But when I then try to add iframes (specifically: soundcloud embeds) inside the lightbox, then the iframe elements scroll differently than the other elements inside of the lightbox like this:
In this example, I've just scrolled down and the iframe element now moved over the text, in stead of staying in place.
I've tried tons of solutions using different combinations of CSS position, overflow and even tried to build my own jQuery powered fix for this (wrapping the iframes in a correctly positioned div), but to no avail. All in all I get the feeling it might be a bug in webkit (i have the problem on Android, the website I'm developing is a mobile site). I did solve the bug in iOs using -webkit-overflow-scrolling : touch;(anyone, is there an android alternative for this?).
Searching the web for a fix also didnt give me any usable results. The closest I got was setting the position of the lightbox to absolute, but this affects the functionality of the lightbox and it does not satisfy me.
I would love any suggestions on this :) thanks in advance :)
After a while I managed to solve this. It was an issue that was only showing up in the android emulator(strangely) from the SDK. Too bad I spent so many hours to fix it but I figured it might be nice to stop other people from wasting time..
If you run into this issue, double check on a physical android device as for me the problem didn't exist there (across different OS / browser versions)
Hello i seem to have a problem with what could be technically called 'a huge gap down the bottom of my website on Google Chrome'. I think it is to do with this code-
#container {
width: 968px;
min-height: 2100px;
}
I have changed the min height down to 600px and things seem to be ok on Firefox and IE9. On Chrome though there is a massive gap. You can view my site here-
http://onlinebanter.com/
It's depressing as i use Chrome for the admin side of things on my site and i have to look at all day every day and it's starting to get me a little down. I have asked about the internet but have had no response even from the place where i bought the theme (they seem to have the same problem on their demo site)
Id there anyway to fox this?
Thanks
Reg.
Without looking at the actual problem...
You're using an HTML 4 Transitional doctype with namespaces in your <html>. Funny and faulty.
-- edit 1
The problem is the weird located footer img. Make that a block with CSS and you're golden: display: block;
-- edit 2
The min-height has nothing to do with it. Why do you even have a min-height??