I have A LOT of input text boxes on a site I am creating with very specific width's in pixels.
The width of the boxes are all the same in Safari and Firefox but in Chrome, they are off by a few pixels fewer. Does anyone know why this happens or what would be causing this?
EDIT: I use Eric Meyer's Reset CSS v2.0 as well
EDIT #2: It looks like Tamil Selvan's box-sizing did the trick. It just really messed up all my heights of other div boxes that I've made. Looks like I'm just going to have to spend some time to fix that. Thanks!!
input {
padding:3px;
height:8px;
outline: 0;
border:0;
border-radius:3px;
}
It looks like Tamil Selvan's box-sizing did some of the trick.
I added the following to really fix some of the problems I was having with the box's not being the same:
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
However, I have found that letter-spacing is also an issue. Safari and chrome's letter spacing is off slightly too and I am trying to figure out how to fix this as well.
Letter Spacing Example
font-family: 'Arial Narrow', Arial, sans-serif;
font-size:13px;
Related
My fonts and images look blurry on Firefox and Chrome on my PC. but looks amazing on Safari, Firefox and Chrome on my Mac
Image below is my font
This image is from my SVG image file
Does it have to do with my CSS? I have this in my CSS
body,
html {
font-family: Roboto, arial, sans-serif;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100%;
}
Not sure whats going on here. Thanks
Looks like you changed something on your PC. Go to Start, type in Adjust the appearance and performance on Windows, and put on Adjust for best appearance. That should help, I had the same problem.
I am making a embed-able widget for the customers so that they can embed my service on their own website.
I am having one issue that if customer is using bootstrap v3.3.7 (tested only this version so far) on their website so one of its css style:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
is destroying my app alignment.
My widget app without Bootstrap:
My widget app with Bootstrap:
I have tried a lot of things like I applied internal and inline css styles to override it but nothing worked.
I tried this:
#widgetParent {
font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
line-height: normal;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
Here I applied property value "content-box" because its fixing the issue on Google Chrome Dev Tool but its working in inline or internal css.
I even tried to adjust my app the Bootstrap styles in a way that it will look better but its not possible because obviously not everybody use Bootstrap so my app alignment will crash on without Bootstrap websites.
So, Is there any way I can detect whether the website has Bootstrap or not so I can give styles according to it or any way to prevent this * selector from applying to my widget app ? If anybody have any solution to it please let me know.
Note:
I have tested this on bootstrap v3.3.7 CDN which is included in the app like this :
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
Thank You
I put this in my internal css I mean the html style tag and the problem resolved.
#widgetParent div {
font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
line-height: normal;
-webkit-box-sizing: content-box!important;
-moz-box-sizing: content-box!important;
box-sizing: content-box!important;
}
Thanks everyone for help.
http://trulyamped.com/test/art.html
For some weird reason whenever i toggle one of the options such as web/ios/print the animation does a weird glitch and the animation skips.
but when i delete the codes *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
from my style it works properly but only to find that my hover animation is clipped.
So what i am asking is how do i get the animation glitch to stop? (just click on one of the filters on the site to see the glitch)
for comparisons look at http://designwoop.com/labs/filtered-portfolio/ and you can see how smooth it looks
i am really nit picky and the way the animation is not smooth bothers me.
it's easy since you already know the reason that couses glitch.
quicksand is a plug-in so it's not smart enough to calculate css.
And also it is better not to apply box-sizing css for practice.
I would suggest take the
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
out and calculate width and padding by yourself for figcaption
I'm having an odd issue. I have a simple web page, and for some reason the <h1 /> tag is having a margin-top and margin-bottom of over 18px. There is nothing in my *.css file that specifies this. Firefox Firebug shows me the style that is applied, but there is no margin anywhere.
In the picture, the div that the header text is in (or supposed to be in) has the limits. But the header text is pushed down because of the margin.
What could be causing this?? Is there anywhere in firefox/firebug that can show me EXACTLY where that style came from? It says that the header tag inherited from the body style, but that is only this:
body
{
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
}
Any ideas? Thanks in advance.
Headers often have a margin by default. Have a look at using a reset/normalization stylesheet.
Reset or normalization stylesheets reset your styles to a standard baseline across all browsers. The difference between reset and normalization is that resets clear margins, padding, etc. where normalization stylesheets apply sensible defaults.
These links should be of use:
https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet
Reset Reloaded
normalize.css
That's the default styling for <h1>s. It's similar the fact that <h1>s have larger text size than paragraphs. It's just the default. It can also be overwritten.
Most of the browsers add some default margin and padding.
Try resetting the margin, like so
body{
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
margin:0; /* ADD THIS */
}
You can also reset it on the h1
All browsers have a default CSS that is applied to all pages.
Use something like Yahoo's Reset CSS to cancel out any styles applied.
i have a background image on a webpage and i am placing an image in my body to line up over the image:
here is my css:
Background:
body {
font: 12px tahoma, Arial, Helvetica, sans-serif;
line-height: 1.5em;
margin: 0px;
padding: 0px;
color: #241a10;
background:#c9e4ec url(/Content/images/myImage.gif);
}
Image:
#leftSideContainer {
position:relative;
margin-top:-47px;
width:147px;
height:93px;
background:url(/Content/Images/image2.gif);
}
In IE7 and Chrome, it looks perfect and lines up exact:
But in IE8 and Firefox, the image shows a little lower down compared to the background image:
If it was just an old version of IE that was broken i wouldn't care but in this case firefox is broken as well.
i tried playing with the:
margin-top: -47px;
but if i move it higher to get it to line up in firefox, it them obviously looks misaligned for the other browsers.
any suggestions for what might be causing this discrepancy.?
CSS reset is your friend
http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.