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?
Related
I’m trying to get my website working properly and I’m having trouble with the top bar on iOS safari. The website in question is my personal site. And so far I’ve found the issue on the iPhone 11 Pro Max safari though I have reason to believe it is affecting all notched iPhones.
Is there any way to use css or meta tags in order to remove this line between the header and the top bar. I haven’t been able to find any info and so far the only work around I’ve found is to make it a web app. Though I doubt people would add my website to their Home Screen just to avoid the issue.
You cannot remove this line with CSS, it is for the browser to separate the top bar of the phone from your website. If your header has a different background color, you wouldn't even notice. Take a look at this (It is on an iPhone with notch):
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.
I am trying to make a website and was looking at this template (http://www.uipasta.com/wordpress-preview/rolling/).
I really liked the "testimonials" part and was trying that on my code.
However, I realized that "testimonials" part works totally fine on Chrome with any browser size, but not on Safari.
All the elements of testimonials get overlapped on Safari when I first open it up... It's funny because if I shrink or enlarge the browser and keep doing it like that, the elements stop overlapping and work perfect like on Chrome.
I tried to modify some stuff in css files and tried to find a bug.
But, all the attempts failed in vain... Can someone help me out with this?
LOL I can't even upload more than 2 links yet, because i don't have enough reputation... Here is how it looks on Safari, https://i.stack.imgur.com/kza7d.jpg
but yeah that's how it looks on Safari when it should be clean carousel moving objects.
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
I am working on the redesign of my website http://square1dev.com. In the sidebar however, I am having some issues making it look correct in Google Chrome. Issues are:
Categories Title (h2 Background Image) - There is supposed to be a small little line to the right side of the word "Categories". Safari and Firefox show this, Chrome however doesn't.
Categories List (li list-style-image) - Each list item is supposed to have a small image of Right Angle Quotes (»). Again, Safari and Firefox show this, Chrome not so much.
Any ideas why this would be?
Chrome can have some weird CSS caching behavior, based on comments and my viewing it in half a dozen browsers, I have to suggest blowing away your Chrome cache and trying again...I've run into this several times where it'll lodge a stylesheet in cache and not let go.