I promise, I've read through hundreds of Joyent posts and stackoverflow questions and I'll preface this by saying I'm certain I have no misplaced commas and have flash installed and have had others try the page in IE.
The issue is that nothing renders in IE 6/7, but IE8, FF, and Safari are all fine. Here's the code:
//sIFR-config.js
var zapfino = { src: '/fonts/zapfino.swf' };
sIFR.fitExactly = true;
sIFR.useStyleCheck = true;
sIFR.useDomLoaded = true;
sIFR.activate(zapfino);
sIFR.replace(zapfino, {
selector: 'h1, h2, h3, h4'
,css: '.sIFR-root { color: #1A2F35; }'
,forceSingleLine: true
,tuneWidth: 5
,wmode: 'transparent'
,filters: {
DropShadow: {
knockout: false
,distance: 3
,color: '#330000'
,strength: 1
,alpha: .45
}
}
,ratios: [7, 3.59, 9, 3.56, 10, 3.49, 12, 3.5, 13, 3.46, 20, 3.47, 23, 3.43, 26, 3.44, 34, 3.42, 40, 3.41, 42, 3.4, 45, 3.41, 47, 3.4, 49, 3.41, 69, 3.4, 71, 3.39, 72, 3.4, 76, 3.39, 77, 3.4, 3.39]
});
/* sIFR.css */
#media screen {
.sIFR-active h1, .sIFR-active h2, .sIFR-active h3, .sIFR-active h4 {
visibility: hidden;
font-family: Verdana;
line-height: 1em;
color: #ff0000;
}
.sIFR-dummy {
width: 0px;
height: 0px;
margin-left: 42px !important;
z-index: 0;
}
}
<!-- HTML Snippet -->
<div id="header">
<H1>H1 Example</H1>
<h3>H3 Example</h3>
<h2>H2 Example</h2>
<h4>H4 Example</h4>
</div>
Note that nearly every option you see I've tried with and without, cache clearing, etc. Also, the main css absolutely positions h1-4 within div#header, which I've also tried commenting out.
EDIT: Note that the .sIFR-active class is applied to <html>, so I know the script is firing, but other than that nothing on the page is altered.
I've also tried different fonts from different sources, still no luck in IE.
TIA,
Jay
Sometimes in IE6/7, when an absolute is positioned next to a float, the absolute will disappear.
In your css you have .1header floated left and immediately following .header_text is positioned absolute.
Try setting .header_text to position:relative. Or put an empty div between .1header and .header_text. Or wrap the div .header_text in another div.
BTW - CSS class names must start with an underscore (_), a dash (-), or a letter(a-z). Starting a class name with a digit is invalid but I don't know if it makes a difference to IE in this case or not.
Added after comments
I am pretty sure that it is a css issue. Remove the <h1>...<h4> with the sifr in #header_text. Add <h1>test</h1>. In the CSS, add 'background-color:#00c;' on #header_text.
Look at it in firefox. You should see a red test on a blue background. Look in IE, you won't.
On #header_text change position:absolute to position:relative. Look in IE, the red test with blue background should show up (not where you want it but that's another issue).
Related
I am working on an existing JSF Primefaces 8 project with previous developers long gone and I have in general become reasonably competent over the last year or so, but the one thing that still escapes me is styling. I believe the project is using something like sass.
I have a couple of p:calendar elements in readOnly mode (no free form date entry) that make up a 'from date' & 'to date' combination. I am restricting them with each other via minDate & maxDate to ensure that 'to date' is greater/equal than 'from date'.
So far so good and while it does work I would like to make it visually clearer that certain dates are not available. As in 'gray out' the unavailable dates. Unfortunately it does not render like that, the unavailable dates have the same text color & background as the valid ones.
When I inspect the unavailable ones I get this
<td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">23</span></td>
so I think I need to overwrite the text color for this class, right? But how do I go on about that?
I found the following in src/resources/sass/_forms.scss
.ui-datepicker-calendar {
font-size: 13px;
margin: 8px 0 0 0;
padding: 8px;
td {
padding: 2px;
a {
color: $text-color-primary;
text-align: center;
#include border-radius-all($border-radius);
}
&.ui-datepicker-today a {
background-color: $panel-background-color-darkest;
}
a.ui-state-active {
background-color: $highlight-primary-color;
color: $text-color-white;
}
}
}
I do realize I need to learn the principle here in the very near future but any quick help would be appreciated all the same.
Thanks for your time
I got to the bottom of it.
I needed to tweak the datepicker styles in one of my SASS (.scss) files and added to '.ui-datepicker-calendar {}' the following section:
.ui-datepicker-unselectable .ui-state-default {
color: $color-grey-lighten-3;
}
This link helped me greatly: https://www.hongkiat.com/blog/jquery-ui-datepicker/
I am using react-virtualized WindowScroller with CellMeasurer to scroll through a 100 sample records and by itself, it works great.
Now, when I place this component in a content pane with a frozen header and footer (using flex) above and below it, react-virtualized does not bring in additional data beyond the first page.
The structure of my container page is the same as the create-react-app template:
<div className="App">
<div className="App-header" />
<div className="App-intro" />
<div className="App-footer" />
</div>
and here is the CSS I use to freeze the header and footer:
html, body, #root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.App {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.App-header, .App-footer {
flex-shrink: 0;
}
.App-intro {
flex-grow: 1;
overflow-y: auto;
}
FWIW, the official WindowScroller example accomplishes a frozen header using flex, but try as I might, I am not able to replicate it on my end.
I am at my wit's end after spending a whole entire day on this. I would really really appreciate any pointers to get this flex layout going with a functional window-scroller.
In the CodeSandbox you linked to (codesandbox.io/s/52j0vv936p)- window "scroll" events aren't reaching WindowScroller. That's because the window isn't actually what's scrollable, rather it's the middle "body" part. If that's what you want, you don't need to use WindowScroller at all and should remove it.
The only thing left that's broken is that your AutoSizer isn't getting a valid height because one of its parent <div>s doesn't have a correct height. For Stack Overflow convenience, here's the relevant bit:
Why is my AutoSizer setting a height of 0?
AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with flexbox layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)
Here is a diff to your sandbox that shows what I'm talking about and here is a fixed Code Sandbox demo.
I've been trying Masonry but can't get it to work exactly as I wanted. The elements I use vary in width and height, but all fit in a grid (4 different sizes, all multiple of smallest+margins). I've also calculated a distribution of elements (7 of the smallest, 4 of all the others) that can fit precisely.
However it's rare that masonry manages to fit them neatly, sometimes there's one lurking at the bottom, sometimes several are misplaced. It's always so that in one view I can see what items need to be moved for it to fit.
Is there a way to make masonry more aggressive in moving elements? Or have it go over two times to make sure there are no empty spaces?
You should probably look at masonry's "big brother" Isotope here. Mind you, if you have elements that are sorted in a certain order or fixed in a certain order - and that are wider than a single column width - they can "block" a column at narrow browser widths.
EDIT Maybe this fiddle explains it a bit better. If you look at that one and - while observing the numbers in the divs - you see that the next masonry element up (the red element 5) can not possibly fit in the white square as it must come after element 4; so where it must end up means, that, with only three rows fitting, one gets a white gap. Maybe you can use Isotope's shuffle and/or reLayout methods and sacrifice ordering your elements in a strict order? Best would be a jsfiddle with your issue.
<article>
<div class="tile blue"><p>1</p></div>
<div class="tile black"><p>2</p></div>
<div class="tile tall yellow"><p>3</p></div>
<div class="tile grey"><p>4</p></div>
<div class="tile wide red"><p>5</p></div>
<div class="tile green"><p>6</p></div>
<div class="tile grey"><p>7</p></div>
<div class="tile blue"><p>8</p></div>
<div class="tile green"><p>9</p></div>
</article>
$('article').isotope({
itemSelector : '.tile',
masonry: {
columnWidth: 100
}
});
article .tile {
display: block;
float: left;
box-sizing: border-box;
width: 100px;
height: 100px;
font-size: 3em;
font-weight: 700;
padding: 0 6px;
color: #fff;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
border:1px dotted black;
}
article .tile.wide {
width: 200px;
}
article .tile.tall {
height: 200px;
}
.tile.yellow { background: yellow; }
.tile.red { background: red; }
.tile.blue { background: blue; }
.tile.black { background: black; }
.tile.grey { background: grey; }
.tile.green { background: green; }
To expand on Dan's answer, having just had this problem myself, it seems that Packery is a more up to date; much more maintained version of Masonry - from the same author. It's not clear to me why both projects exist as separate entities, with only typos fixed in the latter.
The good news is - it's almost totally a drop-in replacement. The only change I had to make (other than names masonry->packery where used) was to remove an option, because it is the default and only option in Packery.
That was isFitWidth: true, my feeble attempt to make Masonry pack things something close to how nicely Packery does without any options at all.
Another nice change with Packery is that gutter: x applies to vertical as well as horizontal gutters. In Masonry, this was horizontal only - though trivial with margin-bottom in CSS, this felt like a needless hack.
Is there any way to achieve this in CSS3?:
height: 100% -110px;
My context:
You can't calulate it with pure CSS. (it will not work in all browsers, as mentioned by Litek ) But there is a organizational way to handle this, but you will need to wrap you element in a other one:
body {
height; 100%;
padding: 0 0 20px;
}
div#wrap {
background: #fff;
height: 100%;
padding: 0 0 20px;
margin: 0 0 -20px;
}
div#wrap div { //this would be your actual element
height: 100%;
background: pink;
}
What you want to use is calc() that is comming to FF and propably webkit, but don't count on it being widely supported anytime soon.
As for your example, maybe sticky footer will be some inspiration for you.
Edit
Nowadays it's well supported by major browsers:
http://caniuse.com/calc
Directly like that i'm not aware of any feature widely adopted to do that.
But there is a easy method to achieve the effect.
Put all element inside a container <div> with 'height: 100%', this container should have position relative so you can position the other elements inside it relative to its position. place the header on top and the footer at bottom with absolute positioning and calculate with javascript the height that the content div must have.
You can also subscribe the 'window.onResize' event to recalculate when the window is resized.
I know this is not a clean and prety solution, but is the one the you can make work well in almost any browser.
In the context it was given the 2nd div height value doesn't really matter. Actually it's only important where that div starts and where it ends.
In other words height = vertical end - vertical start:
#div2 {
position:absolute;
top:90px;/*20+50+20*/
bottom:20px;
}
http://jsfiddle.net/cGwrw/3/
I am quite new to XHTML/CSS, but have now got my site laid out nicely. Just one loose end which I can't seem to get past (I've spent a fair bit of time on this & found related info, but nothing quite the same):
All I want to do is overlay a faint image on my background. I don't want to use the "opaque" filters, as they trigger the script security alert on my IE Explorer 8.
I am quite happy to use the opaque gif image I have created.
I can see that z-index is the way to go. However, my image area insists on locating further down the page rather than overlaying.
Here's what I think are the key extracts of the code where I am going wrong [I have snipped detail such as fonts]:
HTML:
body { position:relative; z-index:1;
margin: 0 20px 0 0;
padding: 0;
background: #FFFFFF url(images/ge01.jpg) repeat-y;[snip]}
<div id="transparency">
</div>
CSS:
#transparency {
url(images/transparency.jpg) no-repeat;
width:230px;
height: 1000px;
position: relative; top: 80px; left:0;
z-index:2;
}
Have you tried using position: absolute; on your transparency element?
position: relative means that you will position the transparent element in relation to other content.