For some reason, the padding appears different on all windows computers. My icons aren't located properly in the middle nor is the text in my buttons. It is working perfectly on windows.
https://imgur.com/a/3XMkL9N - here is an example picture
See more at: https://cobury.dk/
The CSS/HTML I use:
i.icon-facebook, i.icon-instagram, i.icon-linkedin, i.icon-youtube {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 6px;
padding-right: 6px;
border-radius: 99px;
background: #19191b;
color: #fff;
margin-right: 5px;
}
<div class="somefooter2">[icon type="icon-facebook"][icon type="icon-instagram"][icon type="icon-linkedin"][icon type="icon-youtube"]</div>
The padding is perfect in Chrome on Windows, but looks weird on both Chrome/Safari on Mac. I am using the same padding top and bottom, as you can see. What am I missing? Is it something about my divs? Line height? A bug?
I am using the paid font Gilroy.
Related
How do you do?
I have converted XD file to html, css code.
I checked on my PC(windows), but I didn't check on Macbook.
Details:
I coded button and used pseudo element to display right arrow at the right side.
Here is my code.
HTML
<button class="register btn-top-register">Register</button>
CSS
.register{
background-color: #FF6D1F;
border-radius: 10px;
color: white;
padding: 20px 50px;
margin-right: 5%;
border: none;
position: relative;
box-shadow: 1px 5px 0px #8b3507;
}
.register::after{
content: '\1F892';
width: 20px;
height: 20px;
position: absolute;
right: 0;
}
This register button displayed triangle on Windows, but step shape on Macbook.
I tried many times to fix difference.
Could you help me how to fix and display the same shape-triangle?
You can use browserstack to test your code in different devices such as mac and ios
Have a look at these unicodes https://www.toptal.com/designers/htmlarrows/.
If you want to use of unicode I don't know exactly.
I suggest you to use SVG or img to display an icon on your button.
You can download an SVG icon from flatiIcon, or you can use of featherIcon or font awesome for example.
I'm testing designed page with CSS and html with different browser. When I test with chrome page working correct , but not working correct in Firefox. I didn't use strange style, Just used the margin , padding and border radius. I don't know why not working. Thanks for guiding.
background-color: #7B618F;
padding-top: 30px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
border-radius: 0 0 10px 10px;
margin-right: 2px;
margin-left: 2px;
font-size: 12px;
color: #fff;
in Firefox
in Chrome
It happens sometimes, I think it's a bug. I was using chrome and I had this type of problem so I switched to edge and firefox but sometime later it was also not working. But after rebooting my pc everything was okay.
I find solution for this problem. It's problem for right to left direction used in CSS style , when I use dir in division tag working correct in Firefox.
resolved
<div class="h-left" dir="rtl">
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.
I have a problem trying to make a search button looking fine on firefox. It's an input submit made with an iconic font, a white background and a border-radius like this:
display: block;
width: 60px;
height: 60px;
line-height: 60px !important;
padding: 0;
background: white;
border: 0;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-khtml-border-radius: 30px;
font-family: 'iconic';
color: #bad104;
font-size: 5em;
It must look like this (chrome and IE renders perfectly my code) : http://img341.imageshack.us/img341/6590/kogy.png
But when i use the same code on firefox, here is what I get: http://img17.imageshack.us/img17/953/jms4.jpg
I looked on dom inspector on both browsers, and when i look at "calculated values", it doesn't renders the same thing on chrome (line-height: 60px) and firefox (line-height: 67px).
Everything I've tried from now is a fail :/ I hope you guys will have some help for me :)
Thanks !
You shouldn't define a unit of measurement with line-height, this is so that the spacing is relative to the font size. In your example
line-height: 60px;
should be
line-height: 1;
or
line height: 100%;
as you are specifying that you want it to be the same height as the font.
Button line-height in FF is hardcoded as line-height: normal !important; meaning that even a user defined line-height: xxx !important will not override it.
Give these a read:
https://bugzilla.mozilla.org/show_bug.cgi?id=349259
https://bugzilla.mozilla.org/show_bug.cgi?id=697451
For some reason images are being displayed as a thin line in IE 8 and earlier and i cannot work out why this could be. I'm using CSS to re-size the images for the homepage, the reason for me using CSS to re-size the images is because the thumnails are being generated by Wordpress.
This is what it looks like in IE...
How it looks in Firefox and all other browsers...
The CSS i'm using to size the images...
.home .attachment-home-post-thumbnail {
box-shadow: none;
height: 125px;
margin-right: 8px;
margin-top: 8px;
width: 140px;
}
Any ideas?