One of the css classes I am using is:
.test {
display: inline-block;
margin: 0 5px 0 5px;
}
which works fine in chrome.
But, for some reason, I see the UI a bit messed up and if I remove display: inline-block, it looks good on IE, but then its messed up in chrome. Is there a way to ignore using display: inline-block from this class when its IE and use only when on chrome?
One way to do it is with javascript. The first thing you're going to want to do is check to make sure the browser is Internet Explorer. If it is, you can set the inline display style which will override what you have in your css file. I'm not sure whether you want to set the elements to display:inline; or display:block; so I will set them to display:block; in the following code snippet, just to show you how it can be done.
if (/*#cc_on!#*/false || !!document.documentMode) {
var myTestElements = document.querySelectorAll(".test");
for (var i = 0; i < myTestElements.length; i++) {
myTestElements[i].style.display = "block";
}
}
else {
console.log("Not IE");
}
.test {
display: inline-block;
margin: 0 5px 0 5px;
}
<div class="test">Test1</div>
<div class="test">Test2</div>
<div class="test">Test3</div>
<div class="test">Test4</div>
First I used an if statement to see if the browser is IE. Inside that I selected all the elements with document.querySelectorAll(".test");. Then in a for loop, I iterated through all the .test elements and added an inline style of display:block;. NOTE: The else statement is not necessary. I just added that for the purposes of this code snippet. I hope that helps.
Related
I have sort of elements with this pattern:
<div data-image="{imageurl}" ...></div>
I want to set this elements background-image to data-image. I test this CSS code:
div[data-image] {
border: 2px solid black;
background-image: attr(data-image url);
}
border show correctly but nothing happened for background
How can do I fix this code only with css (not js or jq)?
a nice alternative to data- attributes (or the attr() approach in general) can be the use of custom properties (MDN, csswg, css-tricks).
as their values are not restricted to strings, we can pass around any type that is allowed as a custom property value!
also, you get the benefit of updating these properties at runtime, with a swap of a stylesheet.
.kitten {
width: 525px;
height: 252px;
background-image: var(--bg-image);
}
<div class="kitten"
style="--bg-image: url('http://placekitten.com/525/252');">
</div>
As of writing, the browser support of attr() notation on CSS properties other than content - like background-image - is very limited.
Besides, as per CSS level 2 spec, combining url() and attr() is not valid:
content: url(attr(data-image));.
Hence there is no cross-browser CSS solution at the moment to achieve the desired result. Unless using JavaScript is an option:
var list = document.querySelectorAll("div[data-image]");
for (var i = 0; i < list.length; i++) {
var url = list[i].getAttribute('data-image');
list[i].style.backgroundImage="url('" + url + "')";
}
div[data-image] {
width: 100px; height: 100px; /* If needed */
border: 2px solid black;
}
<div data-image="http://placehold.it/100"></div>
In your HTML:
<div data-image="path_to_image/image_file.extension" ... ></div>
In your CSS:
div:after {
background-image : attr(data-image url);
/* other CSS styling */
}
Problems:
This is your required answer. Check this documentation in w3.org. But the main problem is it won't work, not yet!. In many browsers, attr() runs successfully when it is used in content: attribute of the CSS coding. But using it in other attributes of CSS, it doesn't work as expected, not even in major browsers.
Solution:
Use scripts such as JavaScript or jQuery.
References:
W3C attr()
MDN attr()
Thanks:
Hashem Qolami for correcting my syntax. :)
If the goal is being able to set the background-image style of an HTML element from within the HTML document rather than the CSS definition, why not use the inline style attribute of the HTML element?
div[style^='background-image'] {
width:400px;
height:225px;
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
/* background-image is not set here... */
}
<!-- ... but here -->
<div style="background-image:url(http://img01.deviantart.net/5e4b/i/2015/112/c/5/mandelbrot_62____courage_to_leave___by_olbaid_st-d646sjv.jpg)"></div>
EDIT:
If selecting the <div> by style is not an option, you may be able to give it a class and select it by class name.
Whole code : http://jsfiddle.net/o3omng/Vh3u9/
<div id="as_profile" class="div_clearboth"></div>
<div id="as_notice" class="div_clearboth"></div>
In the HTML code, #as_profile and #as_notice are
both have class="div_clearboth" attribute.
.div_clearboth { clear : both ;
margin-bottom : 10px ; }
In the CSS code,
I give clear:both style and margin-bottom : 10px style to div_clearboth attribute.
It works well in other div tags,
but It doesn't work well in #as_profile.
Check the jsfiddle. Then you can see that there is no space between #as_profile and #as_notice.
They must be 10px away. How can I fix it?
Whole code : http://jsfiddle.net/o3omng/Vh3u9/
<s_somethig> tag and [##something##] are going to replace by server automatically.
You can correct it by giving #as_profile an overflow value besides visible:
#profile_control {
overflow: hidden;
}
Or changing display to inline block:
#profile_control {
display: inline-block;
}
Or giving it padding/border:
#profile_control {
padding: 1px 0 0 0;
}
As #sevenseacat pointed out, the culprit is the floated li's within #as_profile
CSS :
#as_profile {
padding-bottom:20px;
}
Can you use Padding for divide? It works for me.
Jsfiddle
I have this code that has one "outerDIV" that contains an "innerDIV". On chrome the "innerDIV" size is 491px, whereas on IE it is 425px (same as outerDIV). Hence, on Chrome I can see the first two children of "innerdiv": "My test string #1" and "test2". But for IE I can only see the first child.
I am not quite sure what the "right" behavior should be, as firefox does the same as IE. However I would like to have IE do the same as Chrome.
I have been experimenting with some css styles (mainly overflow and display), but still can't make it right: IE will expand its height instead of its width to make the elements fit.
Can you guys help me figure out a way to change the css so that IE will wraps the div elements inline? As a restriction though, I cannot change the width on the HTML. As a benefit, I am using a css that only loads for IE to patch these kind of IE inconsistencies. The same css will NOT load for chrome, so I don't need to worry about messing with chrome when changing the IE CSS. Thanks in advance!
<html>
<head>
<style type="text/css">
<!--
body {
font-family: helvetica;
}
.myContainer {
overflow: hidden;
border: 1px solid rgba(0, 0, 0, .5);
font-size: 14pt;
height: 49px;
line-height: 49px;
overflow: hidden;
display: block;
}
.myContainer > DIV {
float: left;
white-space: nowrap;
display: block;
}
.myContainer .item:first-child {
padding-left: 10px;
}
.myContainer .item {
float: left;
padding-right: 32px;
}
-->
</style>
</head>
<body>
<div id="outerDIV" class="myContainer" style="display: block; width: 425px;">
<div id="innerDIV">
<div class="item">
--------My test string #1--------
</div>
<div class="item">
------test2-------
</div>
<div class="item">
test
</div>
</div>
</div>
</body>
</html>
You need a doctype tag on your page, otherwise it will be rendered in quirks mode.
What that means exactly differs from browser to browser, but basically it tries to be compatible with very old browsers. In IE it triggers the non-standard box model, which would explain the differences in size.
Look at the W3C recommended list of doctype declarations for a doctype tag to use.
set the width of .item ... container overflow: hidden hides the items which are shown verticaly because the width is more than a 'line' of container can show. When using floating is good to have the width set. DOCTYPE is very important to be set too. I personaly use loose.dtd which gives good competability.
I could not solve it purely with css. For IE, seems like the only way to fix this is to have the "innerDIV" element to have a width >= the sum of it's children offsetWidth. So I just added this to my JS code (special case for IE):
var len = innerDiv.childNodes.length,
innerDivWidth = 0,
i;
for(i = 0; i < len; i++){
innerDiv += innerDiv.childNodes[i].offsetWidth;
}
innerDiv.style.width = (innerDiv + 1) + 'px'; //Safety measure to make up for the decimal places. I guess we could write this line in a better way by rounding up, etc.
I'm attempting to display a logo (PNG created in Paint.NET) on my web page (XHTML 1.0 Transitional), like this:
<body>
<div class="header">
<div class="logo">
<img src="logo.png" />
</div>
<!-- etc. -->
.header is styled as follows:
.header {
background-color: Black;
color: White;
margin-left: -3em;
padding-top: 12px;
padding-left: 2em;
padding-bottom: 12px;
font-size: 1.4em;
}
.header .logo {
float: right;
}
The logo is white-on-black, with some other colours.
On IE8 (and Google Chrome), the image is displayed correctly. On IE7, the image is not displayed at all. What am I doing wrong?
I don't care about IE6.
If you drag-drop the image directly into IE7 does it display correctly?
If it does, then the issue isn't with the image but it's with your HTML or the CSS.
I don't have IE7 here so can't test directly, but I can recommend a simple approach to troubleshooting:
Remove the CSS styles one-by-one until the image renders in all of your target browsers. That should tell you what is causing the issue (hopefully the reason why will then be relatively easy to fathom)
If it is the float:right that messes it up perheps you should try to clear your floats. Try setting overflow:hidden; on .header class, or apply clear:both on the element that follows it in the markup.
Also the img tag always requires the alt attribute - you can however leave it blank - alt=""
HTML or XHTML? Don't think that a self-closing img-tag is valid in HTML.
EDIT: You are also missing the alt-attribute.
I have this problem in an MVC.NET application using an IMG tag with a src=data string.
At the end of the day, I don't care what's causing it, since it's 1 image out of 60000 (and only in IE)
function showPicture() {
if ($('#picture').css("display") == "none") {
$('#picture').css("display", "");
clearInterval(interval);
}
}
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))
interval = setInterval(showPicture, 500);
While I think it's strange that only certain records cause the Display:None attribute to be applied inline, I'm comfortable with sharing this, since the CSS Display:None is not coming from my code.
At any rate, theoretically, you can check to see if it's IE before running this code using the snippet from check for IE browser
Is there any way to set ff and ie to print background images?
I am using stars image to classify some skills and I set it as a background image and positioning to either set one start, two, three, etc. When I try to print the page the images disappear.
So is there any way to make them appear when I print the page or at least have a way of replacing the images with * or something that would be visible?
Have you considered using a print stylesheet? This could allow you to do something like:
<div class="star">*</div>
/* media:screen */
.star {
background: ...;
overflow: hidden;
text-indent: 9999em;
}
/* media:print */
.star {
text-indent: 0;
}
or even easier:
<div class="star"><img src="./images/star.jpg" alt="*" /></div>
/* media:screen */
.star img {
visibility: hidden;
}
/* media:print */
.star img {
visibility: visible;
}
You can specify stylesheets browsers should use by supplying a media tag, either by css or on the link element:
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="print stylesheet" type="text/css" href="print.css" media="print" />
In Firefox, go to File => Page Setup. There is a checkbox for "Print Background (colors & images)". Just check that and you should be all set.
In your print.css file change the background-image to a list item.
So:
.background {
display: list-item;
list-style-image: url(yourbackgroundimage.gif);
list-style-position: inside;
}
This method is described more here: http://www.web-graphics.com/mtarchive/001703.php
Actually I found the answer to be rather simple.
Situation: I had a div tag with a background image. Which would not printout when printing.
Solution:
Create another style sheet called "print.css"
Add the following line of code to your all your web pages right after your orginal css stylesheet link:
<link rel="stylesheet" type="text/css" media="print" href="css/print_styles.css" />
Immediately after your for the original non printing header, add the following:
<div id="header"></div> <!-- YOUR NON PRINTING HEADER -->
<div id="printheader"><img src="images/header_image.jpg" width="940" height="100" alt="header" /></div>
In your style.css file, which is the main css style for you site, add the following line:
#printheader {display: none; } /* Makes the print header not visible */
In your print.css file, add the following code:
#footer, #nav, #sidenav, .print, .search, .breadcrumb, .noprint {display: none;} /* Items from your page you DO NOT want to print */
#container, #container2, #contentwide, #contentwide_tpsub, #contentwide_tp, #contentwide_open {width: 100%; margin: 0; float: none;} /* Clear widths to ensure all text is printed */
#printheader {display: block; } /* Turns ON the div when printing */
What you are doing is essentially turning OFF the header on the normal "screen" page and turning the printheader ON when you make a print call.
** Please note: you will need to modify the print.css file to include other elements of your style.css file to format the fonts, colors, etc. Play around with "Print Preview" and add in the elements you need till you get the printout that you've been seeking.
Don't use background-image to display printable images, use the normal <img> tag instead.
background-image is meant for unimportant images which most modern browsers tend to skip during printing (default setting in IE 11, Chrome 35, FF 30).
Why would you not want to use the img tag?
Alignment issues - Use absolute positioning to solve alignment issues.
Spriting - Spriting is possible using simple img and div tags.
Make it more difficult for users to save the image - That is also possible with simple img and div tags.
To "keep my HTML clean" - do any of the workaround solutions really make it cleaner for you? Give it up :)
For IE http://support.microsoft.com/kb/980077
There must be something similar for FF.
p.s. you cannot set this for clients!
p.s.2. you can replace this stars with foreground pictures (absolute if needed) in css (media="print").
I had the same issue with IE not supporting the printing the background.
So I created 2 divs, one div had a higher Z and had the text content. The second div was immediately behind the front div but a lower Z index and had a image (img not background image) for width and height of 100%. So when I showed the 2 divs together it looked like one div because they perfectly overlapped. When I printed in IE Browser it shows with image because the image is not a background image but a normal img tag that fills a lower div.
some code.
<div id="survey" class="surveyResponseWindow" style="display:none;">Please logout and re-login, because your session has expired.</div>
<div id="surveyBackground" class="surveyBackgroundDiv" style="display:none;">
<!-- provides the background image for ie browser so that it does not show the lower level divs. -->
<img src="/rsm/jsp/public/images/contentGrad.gif" width="100%" height="100%" />
</div>
<script language="javascript" type="text/javascript">
function showSurvey(surveyResponseId) {
var e = document.getElementById("survey");
var bkgd = document.getElementById("surveyBackground");
var focusinput = document.getElementById('focusinput');
var nh = 'data-nohide';
if (e.style.display=='none') {
e.style.display='block';//show div
bkgd.style.display='block';//show div
}
focusinput.focus();//set focus so we know when they click outside
e.onclick = function(e) {
this.style.display='none';//hide div if they click on it
bkgd.style.display='none';//show div
};
//if the user press ESC
focusinput.onkeyup = function(e){
if(e.keyCode === 27){
var survey = document.getElementById("survey");
var bkgd = document.getElementById("surveyBackground");
//hide the div
survey.style.display = 'none';
bkgd.style.display = 'none';
this.removeAttribute(nh);
}else{
//do something else with other keys(ie:down, up, enter)...
focusinput.focus();
}
};
//click somewhere else input onblur
// was taken out because the browser print function would close the survey div page.
//focusinput.onblur = function(){
// if(!e.getAttribute(nh)){
// //hide the div
// e.style.display = 'none';
// }
//};
var params='<%=request.getContextPath()%>/request/dashboard/drilldown/callSurveyDetailAjax.html?surveyResponseId='+surveyResponseId;
YAHOO.plugin.Dispatcher.fetch(e,params, {onLoad:showBackground});
}
var showBackground = function() {
var e = document.getElementById("survey");
var bkgd = document.getElementById("surveyBackground");
bkgd.style.width = e.innerWidth();
bkgd.style.height = e.innerHeight();
bkgd.style.left = e.offsetWidth();
bkgd.style.top = e.offsetHeight();
}
window.onload = function() {
var focusinput = document.getElementById('focusinput');
focusinput.focus();//set focus so we know when they click outside
}
</script>
in CSS put this
.surveyResponseWindow
{
width:500px;
height:600px;
z-index: 2;
position: absolute;
top:100px;
left:150px;
border:1px solid #AAAAAA;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
box-shadow: -1px 7px 15px -2px #000;
}
.surveyBackgroundDiv
{
z-index: 1;
position: absolute;
top:100px;
left:150px;
width:500px;
height:600px;
border:1px solid #AAAAAA;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
box-shadow: -1px 7px 15px -2px #000;
}
I believe this is a browser setting, not the backend of the web sites. I could be wrong however.