Same amount of pixels rendering differently across OSes - html

The filter bar on my site - http://grailed.com is rendering differently in Chrome on Windows and Mac even though Chrome says the height is 31px on both.
Here is an image of the Mac rendering. This is how I want it to show up.
Here is an image of the PC rendering. Zoomed in on the offending area.
On top of that the globe icon and the dollar sign are at differing heights. I have no idea where to start with this issue, any tips would be appreciated!

Let's take a glimpse at your CSS (after being run through an un-minimizer, and using some of the DOM inspection tools of different browsers):
.filterhead {
text-align: center;
cursor: pointer;
background-color: #e1e1e1;
padding-top: 10px;
}
...
h3 {
font-family: "SackersGothicStd-Heavy";
text-transform: uppercase;
font-size: 13px;
letter-spacing: 6px;
padding-bottom: 5px;
padding-top: 4px;
color: black;
font-weight: normal;
}
The majority of the height of your header is defined by the the "padding-top: 10px" setting as specified by the filterhead class. Padding-bottom is 5px as specified by h3. And the font size is effectively 16px. (10+5+16 == 31).
Change the padding-top attribute of .filterhead from 10px to 5px and it starts to look like what originally showed in the pic representing the Mac rendering. That should probably do it for you.
But no matter what, I'll never be able to rock that $500 dress shirt with the hearts printed on it that you have for sale on your website. That takes some serious stylin' to pull that look off.
http://assets3.grailed.com/uploads/photo/image/11138/display_upload_2F1393376651400-xu5dk1ezfx-b4c0f2f9854185bc01c09e5a9b232221_2F

Try using CSS to specify the size an margins.

Related

Why diamond sign looks weird in my iPhone?

I have a website similar to SO. Moderators have a diamond sign in the end of their name. Bud I don't know why it looks red and weird in my iPhone (on chrome it is fine).
See? It looks red and huge. Why? And how can I fix it? Noted that SO looks fine in my iPhone:
Also my styles are the same as SO:
.mod-flair {
color: #07C;
margin-left: 3px;
font-weight: bold;
font-size: 15px;
line-height: 8px;
margin-right: 4px;
}
I copy/pasted the same character from SO
This is likely to be the problem, as you're leaving it up to the browser to encode the character. I'd suggest explicitly using a character entity instead. Stack Overflow uses ♦
♦

Chrome Text Shadow Bug on Retina Display

Codepen Link: https://codepen.io/calebzahnd/pen/OWxxLw
h1 {
max-width: 800px;
font-family: sans-serif;
font-size: 90px;
font-weight: 900;
text-shadow: 0 0 50px #000;
}
Screenshot:
I've found what I can only imagine to be a bug in Chrome Browsers when displaying on a Retina screen. There is a strange clipping on the text shadow, and the text shadow itself is pushed way below the actual text. When adjusting the font-size, the clipping will randomly change to only clip certain characters. If you adjust the blue value of the text-shadow, certain values will snap the shadow back to where it should be located, but without any sort of rhyme or reason. I've checked and this displays fine on Safari and Firefox. Can someone explain what is going on here?
I can perfectly see the text shadowing in Chrome and Safari browser with my retina display screen.
Try updating your browsers and/or clean your cache.
h1 {
max-width: 800px;
font-family: sans-serif;
font-size: 90px;
font-weight: 900;
text-shadow: 0 0 50px #000;
margin-left:25px;
}
<h1>This is what you want everyone to see</h1>
The problem is that there is this large shadow, and the text is right against the pixel edge. Some devices/browsers won't render past the pixel edge of a window or a div. My suggestion is a 25px margin to the left of your text. Perhaps even 25 all around.

iOS7 Safari - anchor changes width first time it is tapped

I have a button class anchor CSSed as follows:
.button {
display: inline-block;
width: 8.0em;
text-align: center;
text-decoration: none;
background-color: #840;
letter-spacing: 1px;
line-height: 2.2em;
padding: 0.5em 0.2em;
border: 4px solid #420;
}
See below for an example with FAQ tapped.
It doesn't happen reliably, but typically only the first time a button is tapped, sometimes when you go back the button is back to normal, other times it is wider, other times it looks larger (meaning width, height and font are larger), other times all the buttons look smaller!
If you want to try it out, you need to use Safari on an iPhone -- iMac and iPad seem to work okay.
I had a similar situation lately on the iPhone (well itouch but it is using the same iOS) I had a paragraph that for some unknown reason the text was reflowing and becoming bigger than the heading text. But rotating the device the text reflowed and changed size. I fixed it with this:
-webkit-text-size-adjust: 100%;
I found this answer originally here:
Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
Hope that works for you.

Spacing different in Chrome and Firefox

Here is a link to the page that is giving me trouble:
http://youtube.thegoblin.net/layoutfix/
If you view the website in firefox and chrome you can see that the spacing is different. The way it looks in chrome is the way I meant it to look.
I have tried linking in the YUI 2: Reset CSS as it as suggested in another question, but I cannot seem to get it to work.
Here's the stylesheet link: http://youtube.thegoblin.net/layoutfix/styles/style.css
You should change line-height on some elements that contains text. These are line-heights for some (maybe all) elements you need to change:
#title: 56px
.yoText: 46px
#buttonTitle: 68px
#buttonText: 34px
Looks like browsers count differently line height for font you choose, so defiantly line-height could make it better.
Just short example, not full fix:
#dl-button #buttonTitle {
color: #37590B;
float: right;
font-family: "TallDark";
font-size: 600%;
line-height: 0.7;
margin-right: 60px;
margin-top: 20px;
text-shadow: 1px 1px #BDF277;
}
makes green button much better, so you may play around with others the same way.

HTML Checkbox is displayed really large on user's computer in Firefox and Chrome, not in IE

I've encountered an oddity.
On one of our QA tester's boxes, there is an HTML check box that displays very large under Firefox and Chrome, but in IE, it shows up in its default size. On my box and others, the checkbox displays as is typical.
Are there any Windows desktop display settings that would affect the size that checkboxes are rendered in Firefox and Chrome? Is there anything in CSS to beware of?
Here's the combined CSS that affects the control:
various selectors {
display: inline;
margin-top: -1px;
width: 20px;
font-family: Verdana, Helvetica, Sans-Serif;
font-size: 10pt;
height: 22px;
line-height: 20px;
border: 1px solid #6d6d6d;
padding-left: 3px;
padding-top: 3px;
vertical-align: middle;
}
More simply put, avoid using pt units in CSS, as they may be interpreted differently. Stick to using px units for as much as you can. So for various selectors, set font-size: 10px;
Does the QA test box machine have the font set to a different default size in the browser? Set the font size in Pixels of the checkbox to confirm.