I have a simple line of text I'm replacing with sIFR for a header on my site. The site is liquid so it scales when the browser window changes width. But when I shrink the browser window down, the alt text (when I turn it on for testing) wraps to another line, but the sIFR text doesn't.
I've seen written elsewhere on the web that people implement in the sifr.js code a preventWrap=false function, but being new to JavaScript I'm not sure where to put it to make it work.
Here's the relevant CSS:
.sIFR-hasFlash h2 {
visibility: hidden;
letter-spacing: 1px;
font-size: 18px;
text-align: center;
line-height: 1.5em;
}
And the relevant JavaScript:
sIFR.replaceElement(named({sSelector: "h2",
sFlashSrc: "flash/h2_font.swf", sBgColor: "#006633",
sColor: "#FFFFFF", sFlashVars: "textalign=center", sWmode: "transparent"}));
Not sure where I would put the preventWrap=false, or if that's even the way to go.
sIFR 3 should fix this.
I had a similar problem, adding position:relative to your CSS might fix it.
Related
I would like to be able to add picture that always shows at the top part of the screen. I want a bar that stays at the top of it all the time. I do not know how to do it but I believe YouTube has something like it. Except I want it without the content on the side because that is a little annoying.
In order to do this, you have to use absolute positioning. This requires you to use CSS with your HTML (if you are talking about web design).
Here is the CSS
img {
position: fixed;
left: 0px;
top: 0px;
}
Here is the HTML:
<img src="YOURIMAGE.jpg" height="100" width="100">
Not to be disrespectful, but it seems as though you are not familiar with web design. I would recommend looking at W3 schools and try to grasp some of the concepts there before you continue.
The content of my webpage is going behind the side menu I have positioned to the left.I want the menu to be fixed however whenever I do so the content hides behind the menu to the left. Any help would be much appreciated. (Apologies for formatting, new to the site.)
.menu {
padding-top: 150px;
height: 100%;
width: 170px;
background-color: white;
float: left;
display: table;
position: fixed;
}
Fixed elements are no longer within the page flow, they act in the same way as an absolute positioned element. Chris Coyier has a really good explanation about the differences in positioning http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
In order for your body content to stop flowing behind the fixed property, you need to create a container (if one does not exist yet) that all of the body content resides in, except of course the nav/menu bar. You then apply a padding-left to the main body content equal so the width of the fixed element so that the main body content is always padded away from the left of the browser.
Fixed elements don't affect the flow and positioning of elements and position:relative on a parent container has no affect on a fixed element.
I am trying to put two Nivo sliders on one page. Some of the attributes are different. So I have simply created two scripts for these attributes, "slider" and "slider2". That's no problem.
However, I want to make the title style a little different for the second slider. I noticed that the text style of the slide title is controlled by this style:
.nivo-caption p {
padding:8px;
margin:0;
color: #000;
font-size: 16px;
}
However, I don't see that css style called within my html. (When I look at the web page source code I see it but not when I'm actually looking at the code file itself.)
I'd love to simply create a new style for my second slider, something like:
.nivo-caption2 p {
margin:0;
color: #000;
font-size: 12px;
}
But I need to know how to actually call that within my html. Can anyone help? Thanks.
Actually, I figured it out. Since I have ids of "slide" and "slide2" for each slide show, I simply appended that to my new style and that worked.
I thought Safari had sorted this but it still seems to be an issue (unless I'm doing something obviously wrong).
I have a SVG placed inside an object tag. That is wrapped in a flexible containing DIV (e.g set to be width 50%). On resize, the container height resizes in Firefox, Chrome and Opera as I would expect but on Safari the container stays too high.
Here's an example on Codepen to demonstrate, switch to the full size result or 'editor on side' (button bottom right) to see the effect clearly in Safari: http://codepen.io/benfrain/full/fhyrD
Besides using JS to resize the SVG on load/resize, does anyone know if there is anything else I can do to make Safari behave correctly? Could of sworn I'd figured this out a few weeks back but now I seem to be hitting the issue again.
So, Sérgio Lopez had an answer for this. You can employ the intrinsic ratio for video technique that Thierry Koblentz described here: http://alistapart.com/article/creating-intrinsic-ratios-for-video. More info at this blog post: http://benfra.in/20l
Here is the cut and paste code you need in your CSS:
Surrounding object tag
object {
width: 100%;
display: block;
height: auto;
position: relative;
padding-top: 100%;
}
And this for the SVG inside:
svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
I have some text in Photoshop & it's set to "crisp". When I put it on my site it doesn't quite look the same.
Does anything exist in CSS yet that I can use to make it crisp? Or not?
Or do you have any suggestions to achieve a similar effect?
Not only is it not possible, but different browsers on the market enforce different antialiasing settings, meaning that you can't get consistent results, even if they are not what you want.
For a good article on how the various browsers deal with font rendering, I'd suggest reading this: http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
this is what I found on a big company's web site:
body, table, form {
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
background-color: transparent;
color: #333;
-webkit-font-smoothing: antialiased;}
What you're really asking is:
"Is it possible to control anti-aliasing from the web development perspective?"
The answer, for now, and for at least some time into the future (until OS/browser vendors start giving that kind of developmental control [don't hold your breath]) is undeniably: NO.
Forcing AA is a myth
No way to smooth text
Use images to simulate AA
Forcing anti-aliasing using css: Is this a myth?
Try This code snippet
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}