I've got a full width section of a site that is the same colour of the logo. So I have used background-attatchment: fixed to keep a second 'faux' (as in its just for the design) logo over the top of the regular logo that exists on the whole site.
This works as expected over all the browsers I need it too. However I jumped on an old MBP the other day that Chrome hadn't updated on for a while and noticed the logo to be out of alignment by 20px exactly.
Ive recreated it in code pen thinking it was probably some padding/margin issue with my layout but even in the super stripped back version the problem still exists.
Up to date chrome:
correctly aligned logos
chrome v50:
Issue cause by older versions of chrome
https://codepen.io/jaketh9000/pen/wEYWpB
background-position: calc(100vw - 185px) 20px;
My first instinct was that it would be the slightly strange way i've got the background position to align to the right. But even when I just use a straight forward px value, the same issue persists.
Any ideas would be greatly appreciated.
Cheers.
For Chrome version 26.0 and below, use the -webkit-calc.
Related
I'm trying to implement a very simple video as a banner on a website using html5 tags. I just need it to be full width and responsive, which appears to work perfectly in Chrome and Firefox, but not Safari.
Here is a simplified version taken from a more complex wordpress page using exactly the same markup and the same happens.
http://noisilyfestival.com/video-test.html
I've set the video background to red, see in Safari there are huge gaps at the top and bottom whereas in Firefox and Chrome it sits flush.
Can't figure out for the life of me what's going on here! I've set the video to display:block which fixes the few pixel gap at the bottom but cannot resolve this. Thanks in advance!
I removed display:block; from #homepage-video and Safari looked just fine.
It was pointed out to me that on resizing the browser width the issue would correct itself. Therefore the intrinsic ratio technique is the most efficient way to ensure this works cross browser...
http://alistapart.com/article/creating-intrinsic-ratios-for-video
Works as it should now on all browsers I've tested it on.
this is a very specific question for a site I'm helping a friend troubleshoot. I understand if it doesn't get answered or if this question gets closed.
I was wondering if someone with a Mac and Safari could help me troubleshoot the below issue with the inspector..I'd be happy to buy you a beer next time you're in town. I'm on PC and can't replicate the problem.
This problem only occurs on Safari for Mac OS only. Chrome, Firefox, IE and other browsers display correctly.
There are a couple divs at the top, full width containing a logo and navigation.
http://912-registry.clubexpress.com
On Safari / Mac OS, my friend is saying that the big image slides on top of the navigation and underneath the logo bar at the top.
I've tried the full width 100%; position:relative; tricks as described in similar questions.
I have an idea why it's happening, because the large image is first in the DOM, the nav follows in the HTML and nav is fixed at the top with CSS. This was a kludge to avoid having to re-write the html and reorganize (which may have to be done). However, there may be a simple fix to the css hack that someone on Safari could find.
z-index? A position relative somewhere that's missed?
Otherwise back to the drawing board.
Whaddya' say Mac guys?
I'm having issues with some strange padding on the right side of this website I'm working on right now. I'm currently viewing it on a 13" Macbook Pro, full-screen within that viewport. (It has a lot of issues on the smaller viewports that I'm aware of; I haven't gotten to that point in the process.) I've inspected it thoroughly with the developer tools in Chrome but haven't been able to find anything to account for the padding-right or margin-right that's creating the horizontal scroll.
It's currently built with Bootstrap and Flexslider.
Link to repo: https://github.com/helenvholmes/designshow
Thanks!
The horizontal scrollbar also appears on Chrome 25 on my Win 8 64 system, regardless of width.
Try adding overflow: hidden; to the rules for div.flexslider.
That removed the horizontal scrollbar for me and appeared to leave everything else intact. However, please be warned that I haven't tested all the content thoroughly, so look carefully to see if that rule has other unwanted side effects.
How does that work for you?
I've checked other questions on here but I haven't found anything that will help me.
Since FireFox 4 was released I've been having an issue with the menu on my website.
www.ffxivinfo.com
As you can see, the menu is supposed to fit along the little graphic buttons so that each link is on the "button". In Chrome, IE8 (not checked 9) and FireFox 3.5 this looked perfect. However since FireFox 4 it has been displaying wrong.
It looks like it's a padding issue but I can't figure out where it is coming from. I have even removed the padding between each link so that they are close together (0 padding) yet the menu still stretches further to the right in FireFox 4+ than in other browsers.
I use the auto generated menus available at purecssmenu.com and I modified it to fit my own website.
Here is a link to just the nav code, I use a PHP include to insert it.
http://www.ffxivinfo.com/nav.php
And here is a link to the CSS for it.
http://www.ffxivinfo.com/navstyle.css
Basically I need the navigation to look the same in all browsers so that it fits into the graphic "buttons". I'm tempted to just scrap the current design and go with a simple gradient background and leave the menu wider in FireFox 4+ than other browsers but that's a bit defeatist.
Any help would be much appreciated. This is the first time a coding problem has sent me to a forum asking for help but I just can't figure this one out.
I believe the problem is not in your margins but due to the differences in text rendering between the browsers. In this case, Firefox is rendering the text slightly wider.
If I might suggest an alternative, rather than using an image background and hoping for pixel-perfect rendering (which is pretty unlikely given the diversity of browsers and operating systems out there) try styling the links themselves with background-color and border-radius.
I don't see the problem in FF6. However, I see you specify your font size in pt. pt is for print, not the web. Try changing that to px and see if that fixes your situation.
I might ignore the Firefox 4 issue.
FF is now on version 6.
Your issue does not appear in FF3.5 (the most widely used FF) or FF6, both of which have more browser share than FF4.
http://gs.statcounter.com/#browser_version-ww-monthly-201008-201108-bar
Here is my site:
http://smartpeopletalkfast.co.uk/pp/
The very bottom menu is laid out correctly in every browser ive tested, including IE8 and IE7. However with IE9 its starts further to the right than it should and the twitter icon is pushed down to the next line. How can I fix this?
I tried to install firebug lite to see whats going on but I cant extract the firebug-lite.tar.tgz file.
http://getfirebug.com/firebuglite
Thanks
Turns out one of the relatively positioned divs needed to be given a set width.