Cross browser content:url solution - css

I'm using a class inside an img tag to define the content of the img dynamically depending on the device resolution through css. For some reason this works great in webkit based browsers and Opera, but doesn't work in Firefox or IE.
Here's the HTML:
<img class="content" />
and CSS:
.content {
content:url(img.jpg);
}
Is there a workaround for those two browsers?
Thanks!

Related

How to use an SVG logo in a web application?

My web application is only required to support modern browsers (IE starting at 10). But it has to be fully responsive, so it should look good on all possible display sizes and resolutions.
It has the standard logo in the upper left corner, which is linked to the start page. I want to use an SVG logo, which should look good at any resolution. At first, I had the logo in a normal <img> tag, with height and width specified in css.
<a href="#Url.Action("Index", "Home")" id="Home">
<img id="logo" src="~/Content/images/mitoLogo.svg" />
</a>
#logo {
height: 3em;
width: 9em;
margin: 0.3em 1.5em 0.3em 0.2em;
}
Sadly, IE cannot work with that and clips the logo instead of stretching it to the given size. So I looked around and found this suggestion for placing an SVG image in a page. What I have now is
<div id="logo">
<a href="#Url.Action("Index", "Home")" id="Home">
<object height="100%" width="100%"
data="~/Content/images/mitoLogo.svg" type="image/svg+xml">
</object>
</a>
</div>
This displays the image properly in both IE and Firefox (haven't tried other browsers yet), but the link only works in IE. Neither in IE nor in Firefox does the cursor change to a clicking hand, and FF with AdBlockPlus shows a "block" suggestion on hover, possibly because this is an object tag.
Is there a way to display the SVG image correctly everywhere, while preserving its link function? I'm not limited to css, but can do radical changes to the markup, if needed, and I can also change the SVG source.
I played with your initial code a bit and got it working... it seems that you need to only set the width as a percentage and it will scale the height appropriately.
#logo {
width: 25%;
}
Try changing the percentage and adjusting the result window size in the JSFiddle Demo
I tested it in IE10 (+ IE9 in the emulator) and Chrome and it worked exactly as expected.

Need image to automatically resize to browser window in IE 8

I created some pages to display a simple picture gallery, just the picture in the middle with next and back to click on either side of it. The picture sizes average about 800X1050, which fit great on my 1920X1200 monitor. What I needed was a way to automatically resize the picture to the browser height for use on smaller monitors, and I managed to get that to work after much searching on this site and others. I tested this on my wife's laptop and was happy with the results. However, when I tested it at work on our IE8 browsers (don't ask me why...), it doesn't work. Some of the people I will be sharing this gallery with will have to view it on our woefully outdated computers, so I've been trying the past couple of days to get it work and I can't. Here's the sample code I currently have for each of the gallery pages. There could very well be some unnecessary / redundant bits as I cobbled this together from many sources. Any help for this problem, and possibly even any improvements would be greatly appreciated!
<html>
<title>Picture Gallery</title>
<head>
<style>
.numbering {
vertical-align: top;
}
img {
max-height: 100%;
vertical-align: middle;
}
</style>
</head>
<body bgcolor="silver">
<center>
<img src="10.png" class="numbering">
<img border="0" src="back.png">
<img src="picture.jpg">
<img border="0" src="next.png">
<img src="spacer.png" class="numbering">
</center>
</body>
</html>
As the Max-width property works in ie8, Use width: inherit; to make it work with pure CSS in IE8.
like this
img {
width: inherit; /* This makes the next two lines work in IE8. */
max-width: 100%; /* Add !important if needed for the code to work. */
height: auto; /* Add !important if needed. for the code to work */
}

<main> element doesn't show padding in Opera, Safari, IE

I have the html5 element in my project and given it a padding. Firefox and Chrome show the padding correctly, but unfortunately Opera, Safari and IE don't.
Do you have any experience with this issue and know how to solve it?
It is not happening due to my reset.css, and I was able to reproduce the error in a simple fiddle. Just check it in the named browsers to see the difference.
FIDDLE
And here is the example code.
HTML:
<section class="wrapper">gets padding everywhere</section>
<main class="wrapper">gets no padding in the mentioned Browsers</main>
<section class="wrapper">gets padding everywhere</section>
CSS:
.wrapper {
padding: 8em 0;
}
Thank you!
It looks like IE, Opera etc don't treat the <main> tag as display block. I added css to force it and it worked in all the browsers you talked about here
main.wrapper{
display: block;
}

CSS Page-Break Not Working in all Browsers

I'm having trouble getting this working in most browsers, except for IE (it even works correctly in IE6) and Opera.
Firefox separates the divs correctly but only prints the first page.
Chrome and Safari only applies the page break to the last div.
How can I get this working across all browsers correctly?
The HTML:
<div id="leftNav">
<ul>
<!--links etc-->
</ul>
</div>
<div id="mainBody">
<div id="container">
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
</div>
</div>
The divs with the IDs #leftNav and #mainBody are are set to float:left, so they display nicely.
I only want to print the .pageBreak classes, hiding the #leftNav and the rest of the #mainBody with CSS.
The CSS:
#media print
{
#leftNav
{
display:none;
}
#mainBody
{
border:none;
margin:none;
padding:none;
}
}
Parent elements can not have float on them.
Setting float:none on all parent elements makes page-break-before:always work correctly.
Other things that can break page-break are:
using page-break inside tables
floating elements
inline-block elements
block elements with borders
For the sake of completion, and for the benefit of others who are having the same problem, I just want to add that I also had to add overflow: visible to the body tag in order for FireFox to obey the page breaks and even to print more than just the first page.
I've found that Twitter Bootstrap classes add a bunch of stuff to the page which has made it difficult to get page-breaks working. Firefox worked right away, but I've had to follow various suggestions to get it to work in Chrome and, finally, IE (11).
I followed the suggestions here and elsewhere. The only property I "discovered" that I haven't seen yet mentioned is "box-sizing". Bootstrap can set this property to "box-sizing: border-box", which broke IE. An IE-friendly setting is "box-sizing: content-box". I was led to this by the caveat about "block elements with borders" made by Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752.
It looks like it's a bit of an arms race to discover the next property that might break page-breaks.
This is the setting that worked for me (Chrome, FF, IE 11). Basically, it tries to override all the problematic settings on all divs on the printed page. Of course, this might also break your formatting, and that would mean that you'll have to find another way to set up the page.
#media print {
div { float: none !important; position: static !important; display: inline;
box-sizing: content-box !important;
}
}
There is a solution if the parent has float . For the element to which you applied the page-break, make the element overflow:hidden. Thats all. It worked for me.
<div style='float:left'>
<p style='overflow:hidden;page-break-before:always;'></p>
</div>
Although this is not prominently documented, it should be noted that the page-break properties cannot be applied to table elements. If you have any elements that have a display: table; or display:table-cell; applied to them (common in many templates under the clearfix class) then contained elements will ignore the page-break rules. Just cancel out the the rule in your print stylesheet and you should be OK (after the floats have also been removed, of course).
Here is an example of how to do this for the popular clearfix problem.
.clearfix:before, .clearfix:after{
display: block!important;
}
The other place I have run into this is when the template declared the entire page (usually called main or main wrapper) with display:inline-block;
If the section is inside of an inline-block, it will not work so keep your eyes open for those as well. Changing or overwriting display:inline-block; with display:block should work.
I had a position: absolute; in the div printing that caused this not to work.
Make sure the parent element has display:block; rather than display: flex;. This helped me fix the issue
"Firefox versions up to and including 3.5 don’t support the avoid, left, or right values."
IE support is also partial
you can achieve what needed by :page-break-before:always; which is supported in all browsers
"but only print the first page" : I don't think it is css related , I suppose it's sth on print window of browser :)
what's your code?
like this?:
<style>
#media print
{
table {page-break-after:always}
}
#media print
{
table {page-break-before:always}
}
</style>

CSS Style does not work in IE, but in Chrome ONLY

I wonder why does this style not work in IE and FF, but in Chrome ONLY
#show{top:10%; position:relative; margin: 0px auto; width:100%;}
[Edit]
If I want to make the same work in IE and FF, what do I have to do
Thanks
Jean
Can you provide the relevant HTML markup too? And which version of IE you are using.
One problem could be additional CSS styling that the element with ID 'show' inherits.
To separate styles between IE and FF, Chrome, etc use Conditional Comments.
<!--[if lt IE 9]>
<link href="path-to-file/IE.css" rel="stylesheet" type="text/css" />
<![endif]-->
This will tell IE to use a different stylesheet than IE, FF and other browsers.
IE is a beast that won't work without some trial and error, so set up that stylesheet and play with it til it does what you want.
To separate styles within your stylesheet, use this; it's a great resource and has helped me a great deal! CSS browser selectors. It's a Javascript plugin that will read any styles that start with .webkit, .ie, etc and apply those styles only to that browser.
Are you trying to position your #show div 10% down from the top of it's containing div? If so try this:
html:
<div id=#your_container>
<div id=#show>
Content
</div>
</div>
css:
#your_container {height: 200px; position: relative}
#show {top: 10%; position: absolute}
top:10%; position:relative;
10% of what? For a relative-positioned element, percentage dimensions are measured relative to the parent element's size. Does the parent element have a height: applied? If it doesn't, that's why you're getting no movement: you're saying “move the top by 10% of ‘auto’, which is an indeterminate amount”.
If you want 10% of the browser viewport height, you must tell every element between the root html and the element you're positioning to use the full height of its parent. ie.:
html, body { height: 100%; }

Resources