I'm using the following HTML and CSS to create elements which are tightly together in a 100% space (floating?).
<div class="wrapper">
<div class="image">This is image</div>
<div class="content">This is content</div>
</div>
.wrapper {
font-size: 0;
}
.image, .content {
display: inline-block;
box-sizing: border-box;
width: 50%;
color: #000;
font-size: 18px;
}
.image {
background: #f6f6f6;
}
JSFiddle.
Endresult: Chrome top, Safari for Windows bottom
This style works great on all browsers - except Safari for Windows. I'm not sure about the "real" Safari but my iPad seems to work fine. Is this an issue I should be worried about?
In Safari for Windows, setting the width to:
width: 49.7%;
will give the result you are looking for.
You can detect the browser and then apply the style just to Safari for Windows.
See here for how to detect Safari for Windows:
Detection for Safari Windows with Javascript
Related
Take the following HTML and CSS:
<html>
<body>
<td class="colorpick">
<input type="color" name="head" value="#aec7e8">
</td>
</body>
</html>
input[type="color"] {
border: none;
width: 24px;
height: 24px;
}
On Chrome, Safari, and Internet Explorer, this appears to follow the CSS, and the input appears as a square.
Chrome screenshot
Safari screenshot
However, on Firefox, it appears as a very very narrow rectangle that does not follow the CSS. This is consistent between devices and between versions of Firefox. How do I make the color input match the shape that it is in the other browsers?
Firefox screenshot
Desired:
FF Result:
Let's get rid of borders, margins and paddings:
input[type="color"] {
border: none;
width: 24px;
height: 24px;
border:0;
margin:0;
padding:0;
}
Fiddle: https://jsfiddle.net/qkyhn7pj/
I'm trying to use the property height: -webkit-fill-available.
For that purpose I built this example https://codepen.io/anon/pen/VJoOWW
I'm using Ubuntu 18.04 and when I ran the code on Chrome, everything woks fine, but in Firefox I could not make it work.
My Firefox: Firefox Quantum 68.0, Mozilla Firefox for Ubuntu, canonical 1.0
EDIT1: Using width: -moz-available did little changes on the layout, but the image isn't displaying in the same way as chrome
EDIT2: The first image is correct (Chrome). The last image is displayed on Firefox, I would like to display the image on Firefox in the same way as Chrome
It seems like you are trying to fit the image inside the containing div. You can do that with well-supported CSS properties. There are many ways, here is one.
.block {
border: 1px solid red;
height: 85px;
}
.img {
margin-bottom: 10px;
max-height: 100%;
}
<div class="block">
<a href=''>
<img class ="img" src="https://s3.amazonaws.com/monetostatic/email/white-label/ustrike/logo_header.png">
</a>
</div>
you can simply give a height: inherit; to your <img> and of course to its wrapper <a> and you'll see it works exactly like chrome.
also, remove width: -moz-available; its useless here.
and with this approach, you won't need height: -webkit-fill-available; anymore.
hope it was helpful.
This is my HTML code:
<body>
<div class="proba">
<div class="proba1">
</div>
</div>
</body>
And this is my CSS code:
body {
background: #acacac;
}
.proba1 {
background: url(http://ljuska.na.rs/fedge2.png) repeat-x;
height: 100px;
}
.proba {
background: black;
}
https://jsfiddle.net/buy0h2mk/
Everything works fine on a PC. But on a mobile (Android Google Chrome) there is a line like a border but it's not a border.
That is an unfortunate artifact of anti-aliasing. Notice that there are some zoom levels in which the line does not appear. A workaround is to add webkit-backface-visibility: hidden to .proba.
https://jsfiddle.net/buy0h2mk/2/
This is a link from CSS Secrets: Better Solutions to Everyday Web Design Problems book which will center any content using css3 only and without specifying a width. Link: http://dabblet.com/gist/8aa9aa04ee57f479c513. IE 11 supports the flex model, vh unit & box-sizing. Why isn't the vertical centering part working in IE11? It works in Chrome, Firefox & Edge.
I am also trying to make it work in IE10- using polyfills and I haven't had success. If anyone manages this to work in these lower versions of IE, please post your solution.
For your example to work IE11 expects HTML, BODY and MAIN to have a defined height. One could debate about which browser is correct and which has a hidden feature. I prefer FF developer Edition for coding and testing as it seems to be closests to W3C.
Check the snippet for add's...
/**
* Vertical centering - Flexbox solution
*/
html, body { height: 100% } /* ADDED */
* {
margin: 0
}
body {
display: flex;
min-height: 100vh;
}
main {
height: 100px; /* ADDED */
padding: 1em 2em;
margin: auto;
box-sizing: border-box;
background: #655;
color: white;
text-align: center;
}
h1 {
margin-bottom: .2em;
font-size: 150%;
}
body {
background: #fb3;
font: 100%/1.5 sans-serif;
}
<main>
<h1>Am I centered yet?</h1>
<p>Center me, please!</p>
</main>
I'm experiencing issue with Pacifico font, which is available in Google Fonts. This issue is happening only in Chrome and Safari, other browsers are okay.
Example:
http://jsfiddle.net/dRcaB/5/
The problem is that the D character is cropped on the left hand side. If I add some padding-left, it displays correctly. This is happening only with the Pacifico font.
What's wrong?
HTML:
<div class="pacifico">Deli D</div>
<div class="pacifico padding">Deli D</div>
<div class="damion">Deli D</div>
CSS:
#import url(http://fonts.googleapis.com/css?family=Pacifico);
#import url(http://fonts.googleapis.com/css?family=Damion);
.pacifico, .damion {
background: red;
margin-bottom: 20px;
}
.pacifico {
font-family: "Pacifico";
font-size: 60px;
}
.padding {
padding-left: 10px;
}
.damion {
font-family: "Damion";
font-size: 60px;
}
i also facing same problem but its browser rendering issue. when you select the character you will understand how browser gives space for the character.
the only patch to solve this issue is use overflow: visible && padding property to its parent DOM ELEMENT.