I have a piece of code
<img src="xxx" style="zoom:80%" />
It is displayed as expected on chrome.
But on Firefox, this picture is not zoomed.
What should I do?
CSS zoom is non standard, and is not supported by Firefox. See MDN
You could try transform:
<img src="xxx" style="transform: scale(80%);" />
I'm building a page that has links on the left of the screen that target an iframe. They work just fine in the new IE, but not at all in FireFox. I've played around with their Z-index, but can't seem to get them to be recognized in FireFox. They don't just not work, but the mouse cursor doesn't even show that they are links on hover. The address for the page I'm working on is at the address below.
http://www.snoscoot.com/fcaccessories/hondapowerequipment/test.html
An example of the code for one of the buttons is as follows:
<A HREF="http://www.snoscoot.com//fcaccessories/hondapowerequipment/subcompacttractorpartsandinformation.html" TARGET="productdisplay"><IMG SRC="http://www.snoscoot.com/fcaccessories/hondapowerequipment/hondatractorparts150px.jpg" border="0">
<font size="3" color="black" face="Arial">Subcompact tractor parts</font></a>
The code I have for the targeted iFrame is as follows:
<IFRAME
SRC="http://www.snoscoot.com/fcaccessories/hondapowerequipment/compacttractorpartsandinformation.html"
NAME="productdisplay"
WIDTH=700 HEIGHT=1622
frameBorder="0"
scrolling="no">
</IFRAME>
Would anyone have some advice as to how to get the links to function in FireFox? I can't seem to figure out why they work in IE, but not in FF.
Thanks
Your iframe inside the <div id="dropdown"> is 1500px tall by 950px wide and hence covers up most of the rest of the page. In particular it's sitting above those links, so they can't be clicked.
Are you sure you want it to be 1500px tall?
I am trying to mask an element that has some images inside of it, using only css.
i have done this and it works fine in webkit using -webkit-mask-box-image and its doing just what i want, but im having trouble using other browsers.
gecko is supposed to work using mask, and that tag does show up in firebug, but it doesnt actually use the mask.. i've also tried converting the png im using to base64 data uri, but to no avail.
example: http://jsfiddle.net/nNLta/
does anyone know the correct way for doing this?
HTML
<div id='wrap'>
<div class='masked flashing-anim'>
<div class='the-mask' >
<ul>
<li class='blink_1'></li>
<li class='blink_2'></li>
</ul>
</div>
</div>
<div class='the-outline'>
<img src='img/real-stuff.png' height=500 />
</div>
</div>
CSS
#wrap {
position: relative;
}
.the-outline, the-mask {
position: absolute;
top: 0;
}
.the-mask {
height: 500px;
width: 360px;
-webkit-mask-box-image: url(../img/the-mask.png);
-moz-mask-box-image: url(../img/the-mask.png);
-o-mask-box-image: url(../img/the-mask.png);
mask-box-image: url(../img/the-mask.png);
mask: url(data:lotsofchars);
}
example: http://jsfiddle.net/nNLta/
Part 1
mask is not the same as mask-box-image unfortunately. If you read the (rather sparse) docs you will see it is applicable to SVG only. More on this later.
Currently Gecko doesn't support 'mask-box-image' - if you search the MDN you'll see it applies to -webkit- only.
Additionally I don't think this is actually spec. Webkit has had this capability/concept for ages (in various forms like -webkit-box-reflect) and I think that it's just a hangover from those days. I'm not sure whether this will even be adopted by all browser vendors (although I hope, and it makes sense that, it will).
Part 2
To use the svg dependant mask: css property you need to create an SVG element and reference that. Here is a guide. I've not used this technique before so I'm afraid that's all the detail I'm going to go into right now.
An alternate option
If you don't need a clever repeating/growing mask why not create a large png and overlay the text/image you wish to hide. I'm not sure I understand what you are ultimately trying to do but this seems pretty simple to me. The obvious issue is when you need the stuff behind the mask to be selectable/interactable (err..interactive that is...); for instance when you wish to apply masking to text or links. A way around this is to use pointer-events:none which is supported in Gecko and Webkit (but nothing else...). Here's more from the MDN
Sorry I don't have better news - if none of the above is helpful please feel free to leave a comment with your specific requirement and we'll see if we can't work around the browser limitations.
Hope this is helpful!
I want to know how can one actually use a .svg file In a web page?
See svgweb quickstart and the svgweb project homepage for something that works in all browsers including IE (requires flash plugin).
There are many ways to include an existing svg file:
<img src="your.svg"/>
<object data="your.svg"/>
<iframe src="your.svg"/>
<embed src="your.svg"/>
<div style="background:url(your.svg)">...</div>
If all you want to do is to place an SVG image such as a logo or static diagram, you just need to be careful to provide a fallback for older versions of Internet Explorer (i.e. versions 8 and earlier).
The best and simplest method I've found is to use a .png or .jpg for your fallback, placed using a normal img tag. You then wrap the img tag in an object tag, using the data attribute to place the SVG.
<object data="/path-to/your-svg-image.svg" type="image/svg+xml">
<img src="/path-to/your-fallback-image.png" />
</object>
The img fallback is only loaded and used if the browser doesn't understand SVG.
I recommend putting the svg inline into your document (html5 technique). Just open your SVG file, copy the SVG tag and everything insideof it and then paste it into your html document.
<html>
<body>
<svg></svg>
</body>
</html>
It has the advantage that this allows you to use css to style it, like changing the fill color or applying filters to it like blur. Another advantage is that you save one http request for fetching the svg file if it is inside of your document.
If you want for example to change its position using css, then you have to put the css inside of a style attribute. Styles that are in an external css file will not get applied in most browser as this is a security restriction. For example:
<svg id="mySVG" style="position: absolute; top: 200px; left: 200px;"></svg>
This technique is supported by all browsers except IE8 and below as well as the android 2.3 browser and below.
Read the chapter inline SVG for further details:
css-tricks.com Using SVG
developer.mozilla.org SVG In HTML Introduction
If you dont want to put it inline in your page then the best alternative seems to be the object tag and avoid using the embed tag.
Read this for further details about object vs embed vs img tag:
How to Add Scalable Vector Graphics to Your Web Page
http://www.w3schools.com/svg/svg_inhtml.asp
The best example:
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
Caspar's approach is the proper one. However, I would move the fallback to the CSS, since you probably want to apply some styles to the svg file itself...
<object data="/path-to/your-svg-image.svg" type="image/svg+xml" class="logo"> </object>
CSS
.no-svg .logo {
width: 99px;
height: 99px;
background-image: url(/path-to/your-png-image.png);
}`
Raphaël—JavaScript Library. Nice javascript library that is using svg, and gives you a large range of effects!
Also supports most browsers, including IE
I'd like to agree with the answer from "code-zoop". Although this technically doesn't answer your question, it might also be a solution: enter the relevant data straight into the HTML. Either directly as an svg element, or by using Raphaël-JS.
From w3c-schools:
SVG is all suported in In Firefox, Internet Explorer 9, Google Chrome,
Opera, and Safari you can
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
(end of quote)
And to think even more outside the box, depending on how you want to use it, you can also put your 1-color graphics in a webfont. (see for example iconmoon.io )
I have a very simple silverlight xaml page displays textbox and a button.
When i run my application on IE6 it works fine. But for IE7 IE8 and FF3 - it does not display any content. The page is rendering blank.
<div style="height: 100%; width:100%;">
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/test.xap" MinimumVersion="2.0.31005.0"
Width="100%" Height="100%" HtmlAccess="Enabled" />
</div>
Does anyone has any idea what silverlight content is not rendering ?
I found an answer...! Just keeping the question / answer on StackOverflow so others can find the answer for similer question :
IE7 IE8 and FF3 does not accept value 100% as height or width or SL2 object. Change Height and Width to px value (for ex 800px) and that will solve the problem.
Thanks