I am attempting to get my login form all aligned in a column. This works great in Chrome and (hilariously) IE but doesnt in Firefox!
Can anyone help me out with what the issue is?
You can see it here in a fiddle!
I am currently using border box to get everything aligned in spite of padding.
box-sizing: border-box;
Firefox still uses the prefixed version, so add -moz-box-sizing: border-box; before your box-sizing declaration.
Have you tried using the -moz- prefix for Firefox?
If you are into responsive design, include these also for wider coverage of browsers on mobile devices.
-webkit-box-sizing: border-box;
/* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
-moz-box-sizing: border-box;
/* Firefox 1 - 28 */
box-sizing: border-box;
/* Safari 5.1+, Chrome 10+, Firefox 29+, Opera 7+, IE 8+, Android 4.0+, iOS any */
Related
the site is https://mizore.site
on safari, the font-size is too big
img
on other img
It's only happend on ios safari, It display correctly on ipad safari, ios's other browsers.
I have no Mac, so I use inspect.dev to debug it, found the p font-size is 24px
inspect.dev debug img
Hope anyone can help me!
I think you need this in the CSS
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
i have a problem that i couldnt find a solution for it. I use bootstrap on my website and it uses
*, *:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
for all buttons.
Now i just installed arrowchat scrip and i have a problem with this rule from above, it ruins my css from arrowchat. I tryed to add
-webkit-box-sizing:content-box !important;
to my arrowchat class but still it doesnt affect with anything. Can someone give me a solution for this?
-webkit-box-sizing: content-box; /* Android ≤ 2.3, iOS ≤ 4 */
-moz-box-sizing: content-box; /* Firefox 1+ */
box-sizing: content-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
You need all of them to cover all the browsers
I have a div with a background image that I am rotating. Below is my css rules to rotate it:
#services_parallax {
-webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand');
}
The problem is in IE the edges of the image are very blocky and jagged instead of being smooth lines and don't appear to be antialiased. Does anyone know a fix for this? It was doing it in chrome until I applied the fix for it by applying -webkit-backface-visibility: hidden; which worked great for chrome, I just need a similar fix for IE if one exists.
To replicate this issue paste the following into an HTML file and look at it in IE:
<style type="text/css">
#services_parallax { -webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand');
background: url(http://img.netcarshow.com/Pagani-Zonda_R_2009_1600x1200_wallpaper_01.jpg) center center;
background-size:100% auto;
height:100px;
width:700px;
margin-top:50px;
margin-left:50px;
}
</style>
<div id="services_parallax"></div>
Anti-aliasing don't work on large images if there are height and width forced with CSS (IE11, 10 and 9). I've make some (very) approximate tests and I deduct anti-aliasing works under 1000px.
I'm still looking for an official source for this issue.
#geoffs3310, I feel your pain.
I have found this is still an issue with IE11, and some other browsers (Safari on iPad and on Chrome and the default browser on Samsung Galaxy Tab A). To work around this I whacked a dark background-color on the element containing the background-image. I don't know why, but it appears to do the trick, e.g.
background-color: black;
And in case anyone else reads this post, allow me to put forward a few other fixes I found in dealing with the various issues arising from skewing content. Note, these are all applied to the transformed container element.
Eliminates the jagginess buttons get after skew rotations are applied (kudos):
transform-style: preserve-3d;
Eliminate blurry where <canvas> has been used (kudos to Zoltan). Note, if there are other transforms on the element declare them on separate lines rather than shorthand (from memory this was to work around a similar Safari issue):
transform: perspective(0);
And another fix—though my documentation lacks what it fixes, I think it was to do with janky or blurry content in IE—try:
outline: 1px solid transparent;
To get round this issue i used box shadows which seemed to work and make the edges smooth
I want exact piece of code to get rounded corners for this page http://www.freecsstemplates.org/preview/fotofolium/. When I use PIE.htc file, it's working only when I declare position:relative; everywhere I used it & that's disturbing the layout. Can someone suggest code that works without position attribute for that template.
I didn't give moz & webkit but,it's working in others like safari,chrome. I gave only
border-radius:5px;
behavior: url("PIE.htc");
position: relative;
to make it work in every browser. It's not working only in IE if I remove position attribute even with PIE.htc.I used moz, webkit for border box, maybe so workin with FF, Opera etc.
Use border-radius
Because IE doesn't support border-radius, you can use CSS3 PIE. Thats where the PIE.htc came from.
You can set the CSS declaration for the rounded corners for all browsers, and use an HTC for old versions of Internet Explorer.
Working example for the div with rounded corners with no position set!
CSS
.curved {
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari and chrome */
-khtml-border-radius:10px; /* Linux browsers */
border-radius:10px; /* CSS3 */
behavior:url(border-radius.htc) /* Internet Explorer */
}
.menu_buttons {
margin: 40px;
width: 100px;
line-height: 1.1em;
float: left;
vertical-align: middle;
cursor: pointer;
text-align: center;
font: 0.9em Arial, Helvetica, sans-serif;
color: #fff;
background-color: pink;
border: 1px solid red;
}
EXAMPLE HTML
<div class="menu_buttons curved">.menu_buttons element</div>
Download the border-radius.htc, and check out the CSS curved corner Demos and Page .
TESTED ON
Windows XP Profissional versão 2002 Service Pack 3
Internet Explorer 8.0.6001.18702
Opera 11.62
Firefox 3.6.16
Safari 5.1.2
Google Chrome 18.0.1025.168 m
K-Meleon 1.5.4
Windows 7 Home Edition Service Pack 1
Internet Explorer 9.0.8112.164211C
Opera 11.62
Firefox 12.0
Safari 5.1.4
Google Chrome 18.0.1025.168 m
Linux Ubuntu 12.04
Firefox 12.0
Chromium 18.0.1025.151 (Developer Build 130497 Linux)
How can I create the following html/css style (rounded corners, basic background-color) highlighted in red box:
Use the border-radius CSS property to create rounded borders:
-moz-border-radius: 5px; /* Firefox 3.6-, removed in Firefox 13 */
-webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */
border-radius: 5px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
You can leave out the prefixes, because Firefox 3.6 or old webkit browsers are almost extinct.
Although it's possible to get rounded corners in OldIE (IE8-) using divs+images or PIE.htc, I recommend against it: PIE is not very reliable, and adding several HTML hacks just to get something to work in old IE is a waste.
See also: MDN: border-radius.