Text/Link alignment inconsistent between Chrome and Firefox - html

If you look at the footer on www.jrsteelers.com, it looks fine in Firefox. In Chrome, however, the Facebook and Twitter links don't align properly. I'm using Firefox 11 and Chrome 18.x. I haven't checked IE yet.
What's going on? I used Firebug to get some more insight but I'm stumped.
Link: Screencap of what I'm seeing
Thanks for any input!

This seemed to do the trick within Chromes console.
<span> like us on Facebook at </span>

Related

The website UI does not look fine in safari but looks perfect in chrome and firefox

So there's this problem with the site's UI:
it works fine in Google chrome etc in mobile browsers but when viewing in Apple safari mobile browser, the site's UI gets displaced.
I have tried everything, I guess the margin property is not working in safari. Take a look at Screenshots.
how it looks on android chrome
Second image is how it looks on safari. and it should be like first image on safari as well
First thing I would think of that try to use a css normalizer
https://necolas.github.io/normalize.css/
Along with a css prefixer to ensure the problem is not from the design
https://autoprefixer.github.io/
In case both of these solutions didn't work please provide a JSFiddle Code in order to help you properly.

Links breaking in Firefox but not in Chrome

I have lately been finding that certain hyperlinks and submit buttons fail to work in Firefox, but never in Chrome. These are links that worked before, then they fail, and later they may work again. I never see this behavior in Chrome.
For example this bookmark link:
<div class="z_01">Paragraph text here. <span class="blank"><img src="images\corner-right-up.svg" alt="Top"></span></div><br><br>
I have also had the same problem with form submit buttons that work not at all of just sporadically in Firefox.
On some links, the cursor will change to a hand on the left side of the link (or button) but not on the right side.
It’s not due to a Firefox add-on because I’m working in Firefox Developer Edition and I have no add-ons installed on that version.
I’m in Firefox Developer Edition 69, but the same problem occurs in Firefox 67 and 68. It does not occur in Chrome 64.
Has anyone else seen this behavior in Firefox, and is there a fix or workaround?
Your link is just the ID of another element on that same page. I'm assuming Chrome will be a little more smart than firefox and in the bookmarks change that link to https://www.whateverwebsite.com/whatever-page#ovr10 . I'm presuming Firefox only puts #ovr10 in your bookmarks. Only a guess though.
If that indeed is the problem and you want to fix this, changing your link to https://www.whateverwebsite.com/whatever-page#ovr10 would fix that particular issue.
Edit:
Tested on Firefox 65 (stable) and Firefox Dev 69.0b6. Link format does not appear to be the issue. Your code is also bookmarking fine for me.

Chrome not picking up margin-left style, works in FF and IE

I'm trying to get a paragraph of text to indent, it works in FireFox and Internet Explorer, but does not work in Chrome. The code is:
HTML
<p class="text-left-ten">What does this does hopefully is indent by 10 %. I hope so! Otherwise....</p>
CSS
.text-left-ten { margin-left:10%; }
I tried using padding with the same result, works in FF and IE but not Chrome.
Also, it does not appear in the Matched CSS Rules in the Developer Tools window.
Any suggestions greatly appreciated.
Thanks guys. I found out it was Chrome caching it, the old Ctrl-F5 thing didn't work. Have diabled caching in the Devleopment tools and all is good now :)

Text flow out of divs in chrome, but not on all chrome users?

I got a really strange problem, and after so much tries and research I can't get out of it.
I have a website, but SOME (just 5% of visitors) people with the SAME version of chrome, see the text flowing out of divs and text overlapping. It's very strange because I tested the website on all chrome browsers using browser testers, without any problem. And in internet explorer or firefox this problem never happens...
A page is located here
And here are some screenshots of what SOME people see (maybe you won't see this in chrome)
click here
Maybe it is because of the font face I am using? Or maybe some bad coded CSS?
Please help me out of this!
Thanks a lot!
I see you use .svg font. Recently I was hunting some Chrome font rendering bugs and saw this:
http://code.google.com/p/chromium/issues/detail?id=95102
This seem very similar to issues you are having. You could try to serve some other font type to Chrome and if this would fix that.
If you don't want or can't serve some other font type to Chrome, the only thing you can do is wait until Chrome version 24 is out to all users which should be soon (I can't find any announcement)
I tested it in
Chrome 23.0.1271.97 m
Chrome 26.0.1371.0 canary
Chromium 25.0.1334.0 (169326)
# Windows 7 x64 and your page seems fine for me.

How could be HTML markup working in Safari and not working in Chrome

The problem is on my blog - blog.dynback.com.
Right panel goes down in Chrome, and stayed normal in all other browsers including Safari 4. And without Firebug its hard to find where is the problem.
You have errors in your markup, fix those first, at least the missing end-tags.
Validate here: http://validator.w3.org/check?uri=http%3A%2F%2Fblog.dynback.com
I think it has do to with the JavaScript. I've noticed the issue appears after code snippets are highlighted. Chrome uses a different JavaScript engine than Safari. Maybe that's the problem.
Try to shrink the width of #main_content