My page has a display issue on pageload with Safari (display inline-block element has a width of 0, after one JS inline style its fine). I can fix the issue with this extra style for my span element:
display: inline-block; //standard for all browsers
display: -webkit-inline-box; //safari fix
I have to use at first the standard and after that my fix. On the current browser versions it looks good for FF, IE 9-11, Chrome and Safari (Desktop Mac).
My question is now: Is the order fine or can i get with some browsers a problem?
(Maybe browsers think: "Oh I have to make the inline element (span) to display:inline-block". And with the next line "Oh I dont know that property (-webket-inline-flex), so I use the standard display: inline".)
Hopefully you know what I mean? :)
The order is fine, however you will find that any browser which supports -webkit-inline-box will use this over inline-block. This may cause issues as the way the browser-prefixed version is implemented may not reflect how the non-browser-prefixed version is implemented.
For instance, Google Chrome supports -webkit-inline-box and will use this instead of inline-block. Off the top of my head webkit-inline-box is based on the old out-dated version of the Flexbox specification.
Perhaps a better solution would be to work out why Safari is giving your inline-block element a width of 0. This isn't behaviour I've witnessed myself, but Safari usually falls outside of the production browsers I test in.
Related
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.
I've been looking around StackOverflow and even else where to find if display: inline-flex; works in IE9. I posted a question before this when I had trouble with expanding a width dynamically, question here.
The answer helped me out, thank you who ever you are! Now that I've fixed the issue and it works fine in Chrome, Opera, Mozilla, Safari, IE10+, I still have trouble making this work in IE9.
I've also tried to add pre-fix for display: inline-flex; such as display: -webkit-inline-box, -ms-inline-flexbox, and so on.
The problem I had which fixed the whole deal was width: auto; and display: inline-flex;
Working fiddle here
How can I make this to work in IE9?
As you can see here: Can I use FlexBox? Flexbox is not supported in IE9
EDIT : Based on OP comment to answer:
if there's any way to make it work in IE9, with prefix or something?
here is a SO users' answer from another related question:
I understand from your question, that you are aware of the fact that
IE9 does not support flexbox.
A polyfill for flexbox, named flexie.js,
does exist (not maintained afaik), but it works using the old 2009
syntax of flexbox.
Using the old syntax is of course not recommended,
since the 2009 syntax is really outdated and many browsers won't
recognize it anymore. But, you can try to use Autoprefixer, which
transforms new-syntax rules to old-syntax rules (while preserving the
new-syntax for browsers that do support it).
There are caveats - You won't be able to use inline-style, you would have to write your styles in CSS files, and I don't think it supports dynamic changes to the
DOM.
Disclaimer: I haven't tried that method with IE9 + flexie.
I'm new in this area and I wrote a div style which didn't work properly for firefox 4, opera 11.1 and for ie 8.0 but worked for chrome 11. The code which was a style for a div was the following only with a different order
#info_text
{
background:#fdf6cc;
width: 650px;
margin-left:1px;
padding-left: 30px;
padding-right: 263;
min-height: 90px;
}
After changing it this way it worked for all the browsers except for the Internet Explorer 8.0.
Can I do something to make it work or it's the problem of the browser?
Does it metter the order in this case?
The order doesn't matter in this case.
You are missing units for the padding-right property. Running your code through a validator will flag errors like this.
Welcome to world of web development! All browsers interpret CSS differently, particular old versions of IE (try the above in IE6 for some fun!)
To understand exactly what problems you're having we need to see a working web page with the above.
The order of the CSS doesn't particularly matter to be honest, though obviously later CSS overrides earlier CSS and this something which is used commonly in the industry.
try opening "developer options" under "tools" in ie, if there is a more specific class, it may be overwriting something, or if something is formatted poorly, IE may be excluding it all together. Another option is "firebug lite", firebug is a very useful tool for getting started with css, javascript, and page structure. Without a link to the page that you are having the problem on, it's very hard to determine the cause, I copied your css and tried it myself, but got the expected result in all browsers
I'm working with some CSS (from a Joomla template) like this:
div#logo {
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
background: transparent url(../images/head.png) no-repeat scroll 0 0;
...
}
I've looked up some of those -moz- properties and they seem to be assigned their default values, and if I turn them off in Firebug nothing happens visibly.
Would there be a reason to add them to a CSS file? Are they for an old version of Firefox perhaps?
I think what's happened is someone's set a background shortcut rule and then looked at the ‘computed style’ resulting from that shortcut rule in the DOM inspector. They've noticed that setting the style also sets Mozilla's background-clip, -origin and -inline-policy properties, and tried to reproduce these rules without understanding what they're for (namely a detail of Mozilla's CSS implementation, and potentially CSS3 in future).
Certainly changing -moz-background-inline-policy would only have any effect on elements that were display: inline (which div isn't by default), and changing the clip/origin properties around the border would only make any difference if the element actually had a border.
Get rid of them.
Chances are good that these properties don't need to be there. I'd suspect that they're included to ensure consistent rendering across different versions of Firefox. I guess the answer is, if you're seeing no difference from disabling them in the versions of Firefox you're interested in supporting, take them out.
background-clip isn't supported on current Firefox builds AFAIK, so the author has probably put them in preempting a problem (though that would be odd as they are all set to the default anyway, and they haven't included the opera or webkit prefixes...)
background-inline-policy is default as continuous in all Firefoxes, and background-origin is default as padding in them all too.
I'd say pointless code for this one.
If I turn them off in Firebug nothing happens visibly.
I'm not sure on those particular attributes, but have you checked that the browser isn't using a cached style sheet?
I'm trying to use the page-break-inside CSS directive, the class of which is to be attached to a div tag or a table tag (I think this may only work on block elements, in which case it would have to be the table).
I've tried all the tutorials that supposedly describe exactly how to do this, but nothing works. Is this an issue of browser support or has anyone actually gotten this working, the exact bit of CSS looks like this:
#media print {
.noPageBreak {
page-break-inside : avoid;
}
}
Safari 1.3 and later (don't know about 4) do not support page-break-inside (try it, or see here: http://reference.sitepoint.com/css/page-break-inside). Neither do Firefox 3 or IE7 (don't know about 8).
In a practical sense, support for this attribute is SO spotty, it doesn't make sense to use it at all at this point. You'd be lucky if even 10% of your visitors have browsers that can support this.
The solution I used was to add
page-break-after:always
to certain divs, or add a "page-breaker" div in where you want breaks. This is quite ham-handed, I know, because it doesn't do quite what you want, and causes content to not reach the bottom of the printed page, but unfortunately there isn't a better solution (prove me wrong!).
Another approach is to create a stylesheet that removes all extraneous elements (display:none) and causes the main content to flow in one main column. Basically, turn it into a single column, text-only document.
Finally, avoid floats and columns when styling for printers, it can make IE (and FF) act wacky.
Safari 1.3+, Opera 9.2+, Konquerer, and IE8 all support it, at least to some degree.
Firefox apparently still does not.
Firefox does not support this as of 2010-11-30, and thus won't in Firefox 4.
IE8 does support page-break-inside: avoid - but when I tried this on IE9, it's not very successful at avoiding page-breaks (this may be a regression, or perhaps IE8 is also only capable of avoiding page breaks in very simple cases).
AFAIK it doesn't work in any webkit browser; certainly not in chrome.
It actually works in Opera, even on real sites.
Safari 1.3 and later support page-break-inside.
So does Konqueror.
I'm trying to use the page-break-inside CSS directive, the class of which is to be attached to a div tag or a table tag (I think this may only work on block elements, in which case it would have to be the table).
Firstly, there's no need to guess. Just look at the specification, and you'll see that it does indeed only apply to block-level elements.
Secondly, <div> elements are usually block-level elements, so there's no problem applying page-break-inside to a <div> element.
Finally, you don't need to wrap it in #media. You only need #media if you want to apply media-independent rules to only one medium, for instance, if you want to use display: block only for one medium. In this case, you don't need to hide those rules from other media, because they'll only apply to paged media anyway.
From preliminary searches, it's hard to find up-to-date statistics on browser support for this, but it seems that Firefox 4beta6 supports it and Chrome 7 does not. Chrome also breaks pages halfway through a line of text, so that part of the text appears on one page and part appears on the next. Uncharacteristic lack of attention to detail, but I guess neither Google nor Apple care about printing things.
Firefox 4 also adds some nice headers and footers to your prints with url, page title, site title, number of pages, and time. Nice.
As a bit more information further to Eamon Nerbonne's answer on the IE rendering (IE8+), you need to make sure the browser is in standards mode. This article on MSDN shows what is necessary - including a meta tag in your html to force the issue:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Feels kludgy, but there you have it... seems to work more consistently.