I try to use Tailwind CSS, I've just installed the tailwindcss as a CLI installation:
It's not working properly, they send some warning with class -webkit-appearance and vertical-align.
How can I resolve this problem and what caused this error?
<😃> I can't find any solution with it help me to solve this </😃>
I set as CSS>Line Unknown At Rules but problem is still there
The warnings are pretty straightforward.
-webkit-appearance is a CSS extension for browsers with the webkit engine. You should also add appearance for compatibility with other browsers.
vertical-align has no effect when used in an element with display: block. display: block is the default for any HTML element, unless you change it. So if you want vertical-align you need to set display to something else.
Related
I have a antd table in react but the styles for it differ across platforms (Windows and OSX).
The bottom line that separates two rows is not completely straight on Windows while it is straight on OSX. I've attached a picture for how it appears on Windows machine.
Has anyone faced a similar problem?
Looks like custom height got applied to 3rd and 4th column - Removing that height or setting it to auto might resolve issue.
If possible share css and html snippet.
Are you using same browser in both platforms ? And is it a border of a cell ?
I think you need to apply same CSS to all cells, with a min-width and a max-width, or just a fixed width.
Attention : look at your padding too, it's maybe the problem.
Did you try Normalize.css or reset.css for better cross-browser consistency ?
I once faced some issues in safari/firefox browser but my layout was fine in chrome. So, I used reset.css to get rid of the inconsistencies.
index.css
#import url("./reset.css"); /* path to reset.css */
...
...
/* rest of your code */
(I posted this answer when OP had not stated whether the issue persists when using the same browser or using different browsers across the platforms)
P.S: Either use reset.css or Normalize.css
I am developing a website in Angular2. In the css for all of my components, I am making use of the :host selector. The css there is brief and more or less identical in every component:
:host
{
position:relative;
top:60px;
background-color:black;
width:100%;
}
Most of my components are dynamically populated with data retrieved from a database, so the host element should grow with the content dynamically placed inside of it. This works as intended in both Chrome and Firefox, but not in Safari. In Safari, the data is loaded properly, but :host doesn't grow, and as such, the black background color just cuts off at a certain point as you scroll down the page. I should mention that the version of Safari I'm using is 9, which is certainly outdated, so for all I know, this may not even be an issue in more recent versions, but this still has to work in older versions for backwards compatibility. Also, I've not yet tested in IE or Edge, so I'm not sure if this is an issue there or not.
So I'm just wondering why :host isn't growing with its content in (at least this older version of) Safari and if there's a way to fix it? And I know I can just use a wrapper class in each of my components, put the background color in there instead of :host, and that will work(I tried it), and that's what I'll do if I have to, but I just wanted to inquire here first to see if anyone knows why I'm having this issue and if there's a way to fix it without resorting to a wrapper div/class.
Angular host elements have inline display by default. Try changing the default display of the host element:
:host {
display: block; // or any other value.
}
Inline elements ignore any height or width values.
See this for more explanation.
I figured it out. I had an old, unnecessary display:flex in a :host style for a parent component that was screwing things up. Removing that fixed the problem.
we have a page having span tags with different widths. Initially in ie11 the widths weren't properly set. Hence we added the following css change to orient it correctly and it worked
span{
display: inline-block;
}
but the same css change is not working properly for ie9 . We followed some SO suggestions and tried adding doctype but it didnt work out.
Can you please suggest?
have you tried using a resetcss file before applying your own styles?
because every browser would have its on setting, the resetcss will basically reset all the default browser setting and then apply your setting, you can get this file online for free here is one on this link below:
http://meyerweb.com/eric/tools/css/reset/
hope this helps, gud luck
I tried debugging more and found out the issue. Width in span was set in span without unit.
<span style='width:100'></span>
it was causing the error. After changing it to
<span style='width:100px'></span>
it worked in ie9 and ie11 .
Thanks
We are dealing with browser compatability issue for IE8. Borders for text box does not appear to be in blue. We are using attribute selector
input[type="text"]
{
border: solid 1px #7F9DB9;
}
Which is applied only to IE8 And not IE6.
However the problem is some text box already has border defined in it. Which are being overwritten. I tried using expression but it seems to work only when DocType is not present.
The other option left for us is to make each of the textbox classes in css for border with !important, Which is very tedious indeed for the big project.
Second solution is to use jquery which mgmt is aganist.
Can any one guide as how to target this.
Are you sure you've defined property at the appropriate level, and not again somewhere that would override it?
IE6 does not support attribute selectors, you will have to target it another way. I would suggest adding a CSS class -- the default styles are going to be different in every browser.
You could also try being more specific, as littlefoot mentioned. Try adding more of the cascade to reference that element and you might be able to override it. Avoid using !important wherever possible.
Chrome appends an stylesheet and it make a lot of problems for me. for example this selector
html>body, html>body * {background-color:#ffffff !important}
is one oe the things I can't override in my own styles. Anyone has a solution for that?
Though all browsers have a default stylesheet for elements, none of them set the background color as !important which wouldn't allow you to change it. What you show must be getting attached from elsewhere, not Chrome, but, without a link or the complete markup, anything we tell you would just be a wild guess.