I came across a strange behaviour with Chrome earlier that I can't seem to fix.
I have an image applied to <body> that is positioned: left top. While loading in Chrome the background positions as expected repeating on x from left top. Once the window is loaded, a class is added to the body tag: backgroundPositionTuned and an inline style that overwrites my own CSS background-position: 0% 34px;
This style as expected from the declaration shifts the image that should sit flush with the top of the page down by 36px on the y axis.
Has anyone else seen this behaviour and know how to counteract it?
The styling works fine in
IE 7,8,9
Firefox 9 >
I had exactly the same problem on several pages (I mean not just on a page I developed, but also on several other). Accidentally I discover that if I disable the Chrome plugin uTorrentControl v2 (or something similar) and the problem disappear.
Cheers!
Related
I'm trying to add a CSS slant to <section> elements on my page, which also serve as backgrounds for a "parallax" scrolling effect.
I'm encountering an interesting problem. The slant works on the first <section>, but on the second (or any after that), the background image is moved down, or the flow of the div gets messed up. I'm not sure why this is happening.
I've made a jsfiddle of the problem. Any ideas?
If you open the fiddle in Safari, that's the behavior I'm expecting.
Update: It actually has nothing to do with the parallax scrolling. It's just the combination of background-attachment: fixed and slant.
This is the strangest bug I've ever encountered with chrome, unfortunately I cannot show you example images because of legal restrictions but I'll try to explain it as good as possible.
So I'm building this website which has an infinite scroll through viewport-sized sections. In the first section I have a form and an html5 video with position fixed in the background and then simple background images for the followup sections, odd numbered sections with background-attachment: fixed; which gives somewhat of a parallax effect.
Now the very odd thing is: as soon as I have focused one of the form inputs in the first section, all the sections with background-attachment: fixed; lose their background image... it's still in the CSS rule but doesn't get rendered (just white).
I tried several solutions for similar issues like this SO thread or this post. Now the funniest thing with the second one is if I add -webkit-transform or -scale to the sections with fixed bg images, the problem occurs right away without any focusing... I really cannot figure this out.
I hope someone can help me with this issue because it's pretty important to have that parallax like behavior.
Here's a jsfiddle showing the problem anyway, not exactly like on my page but you can see the bug, there the video is shown instead of the image, but on my page I set the video to position absolute after scroll has reached the 2nd section, so it's just white...
I too have encountered this problem.
The thing is that background-position will make content fixed at that position based on the browser window.
For parallax effect, try with some plugins
Im working with a cross-browser compatibility, fixed everything fixable for IE7 and IE8. But it seems there is a slight (huge) problem with the background which is called by CMS.
As far as it seems, there is no problem in IE7 v8.0 BUT in IE7 v7.0 looks moved to the side in most pages, but not in others.
I figured it was because of a fix i did for some lost positions, but when i searched for a lost object in the right there was none.
And i have no idea how to make this bg to look right.
Please help me! im going crazy with this!
Page:
http://www.tvazteca.com/homes/laislaelreality
I think the problem its the background position. I cant make it work for the IE7.
<body class="fondo-pagina" data-twttr-rendered="true">
<style type="text/css">
.fondo-pagina {background:url(http://static.tvazteca.com/imagenes/2012/29/1634805.jpg) no-repeat; background-position: 50% 40px;background-color:#0b4a51;
*background-position: 50% 0 !important;
}
.bgBottom{background:url() bottom center no-repeat;}
</style>
The style up there is added automatically by the CMS. Although i have the same class in the style sheet:
.fondo-pagina{
background: url(../img/fondoislaEtapa1.jpg) top center no-repeat;background-color: #0b4a51;
*overflow-x:hidden;background-position: 50% 0px!important;
*background-position: 50% 0px!important; }
I havent been able to make it work. I know im using hacks, and its not the best option, but i was asked to only use one style sheet for the site, so another one for IE7-IE8 was out of the question.
How can i make IE7 to read the background position? Is it going crazy because of the double clases?
Using Chrome and FF, element inspectors i found out none of the background position clases were taken for IE.
TY for reading :)
I found the problem.
Nothing was wrong with the Html php and my Css
The problem comes from FACEBOOK:
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
The scrip has to be placed in the div that contains the likes/comments etc. Other way it will go crazy in IE.
It opens up a big div that forces the page to be contained and makes horizontal scrollbar to be extended. As result, the background will take such width as the base one and position itself on the 50% 0px of that thing.
It only affects IE versions. The other browsers work fine.
I'm having an issue with my navigation, the first list item appears to have a huge gap on the right.
I have a list of links inside an UL each have their own class so I could set a background icon to them. The first link has a background to give it the rounded effect.
I used relative to push to left so it would have that rounded effect for the hover and active states on the homepage and hover for when i'm on other pages.
Now it all works fine in new browsers apart from IE7 and probably older versions.
I've put it on JSFiddle to make it easier to view.
http://jsfiddle.net/datastream/Gta3h/2/
and http://eminemforum.net/navtest/nav2.html
Thanks
Live Demo (edit)
I got rid of <div id="navHold">.
I removed right: 40px from #topNav2 .home-icon.
I changed the width of #Navigation-Holder from 750px to 830px to make it appear the same width it was before I changed anything.
I've tested that this looks consistent in: IE7, IE8, Firefox, Chrome.
i have a blog and i have placed a form in right but it shows different result in different browser.
The Link named "Subcribe in a reader" should be in center but it shows in left in Safari and Opera but IN FF and Ie7 Shows Perfectly in center.
And The border is 5-6 pixel going up in Opera and Safari but in FF & IE 7 it shows Perfectly fine. And In Ie6 it shows border line 10-12 pixel downside ... strange
i m using this code to adjust for postioning..
please help....
my blog : ww.techieinspire.blogspot.com
check image here
http://techie2inspire.googlepages.com/csspositioningproblem.JPG
Your markup is seriously jacked up. Use Firebug on Firefox to look at it. Here's a couple things I noticed:
You have your elements for your subscribe link inside the form above it. This is not apart of your newsletter form, so shouldn't be contained inside that form.
Your using a lot of <span>s with block elements inside them. <span>s are generally for inline content and sticking block elements (like <p>) inside could give weird results.
Check your stylesheets where your setting the left padding for ".newsletter p" this is affecting your subscription link.
Try to avoid specifying styles inline (using the style attribute).
Stop using postion:relative everywhere. Instead using padding and margins for layout your sidebar.
Generally to center something, you can do this:
.centered_thing {
margin: 0 auto;
text-align: center;
}
Edit: The marquee thing is terrible. Read about what happened to the HTML marquee tag. There's many good reasons to avoid it or Javascript knockoffs.