IE8 won’t display background images on a div.
My HTML:
<section class="section-divider textdivider divider1">
<div class="container">
<h1>Info About The Foundation</h1>
<hr>
<p>Microfestival stable energy fields natural homebirth sarong watsu, aura discovering valuable truths. Nature equinox forest, feline acupuncture salvia. Didgeridoo prius what the planet really needs, divine feminine compostable toilet change agent closing circle feeling deep gratitude sustainable rain dance prayerformance. Beltane perineum cuddle party, bioneers radiant.</p>
More About The Foundation
</div>
</section>
My CSS:
.divider1 {
background-image: url('../images/bg/divider1.jpg')
}
In IE8 the image doesn't even load. It just displays the text without any styles being used at all. Is it because IE8 cannot read images for a div? I've looked around and didn't see any indication that IE8 cannot do this.
Remember, <section> is a new HTML5 element, meaning IE8 does not automatically recognize it. Have you A) added an html5shiv and B) set the display property in CSS?
HTML5Shiv
<!--[if lt IE 9]>
<script>document.createElement("section");</script>
<![endif]-->
CSS
section { display:block; }
90% of the time, the reason my new projects won't work on IE8 is because I forgot to add these two.
Related
I am making a tumblr theme which will have a pretty large image in the background (approx. 2000x1600px). However I need the page's content, the tumblr posts, to load relatively quickly. Which of these options would be faster?
<style>
body {background-image: "background.png"}
</style>
<body>
<div id="content">
/* tumblr posts go here */
</div>
</body>
or
<style>
img {z-index: 0}
</style>
<body>
<div id="content">
/* tumblr posts go here */
</div>
<img src="background.png">
</body>
The two don't really differ from one another.
If you open up Chrome Dev Tools and take a look in the Network Tab, the load times will be the same because the size of the image remains as is.
However, what you can do here, is leverage the power of CSS along with some Javascript. Apply the background image to a class, say .with-background, and then with some jQuery:
$(window).load(function(){
$('body').addClass('with-background');
});
This way, when everything else on the page (including other images, thus the listener on 'window.load') is loaded, apply this class, which will then load up the background image.
As a simple sidenote, if you don't want your body to remain blank while the content loads, what you can do is take that huge image, downscale it, and blur it (in Photoshop or other image editing software). That way "something resembling that image is back there" - all the while being very small in Kb. In turn, when the class is applied, you'll get your full-sized image.
Check out posts with images on medium.com - they do a similar thing. It is a design choice, more than anything else.
I have a web app built in asp.net/vb. The scripts on the site only work properly with IE. Is there a way to force the user to use IE all of the time on the site?
You should not. Are you really willing to ignore 75% of the traffic? or are you paid by microsoft and have got a really cool website idea? Any ways, you can do that by using javascript and detecting the browser and if its not IE then do not show anything(Make you main div "display:none"). Here is an example http://www.w3schools.com/js/js_browser.asp to detect browser. Yet again these approaches are used for customizing styling for browsers and not for what you want it to.
function detectIE()
{
var isIE=navigator.userAgent.toString().indexOf("IE") != -1
if(isIE)
{
document.getElementById("main").style.display="block";
}
else
alert("This website can only be accessed using Internet Explorer");
}
<body onload="detectIE">
<div id="main" style="display:none;">
//Everything inside this div
</div>
</body>
Another approach is by using conditionals
<!--[if gte IE 6]>
<div id="main" style="display:none;">
//Everything inside this div
</div>
<![endif]-->
Remember, it's not a 100% solution, browsers can change there user agent strings and present themselves as IE or javascript can be turned off. You should consider adding support for other browsers rather than ignoring them completely.
I am using a HTML5 video tag in my website. That video is playing perfectly with all browsers, but in IE9 it shows a black border(black extension). It is like the one usually the video players will show some black color extension on its both the side when the size of the player is more than the size of the video.
This is the solution we use.
For video, we display HTML5 by default backed in CDN storage. We also have fall back for Flash and then fall back for non-flash. So it checks HTML5 first, then flash failing that and then no content for non-flash support indicating some message about the user to upgrade their Fred Flintstones machine, we also offer an alternative so they can move out of BedRock!
Code
<style type="text/css">
.videobox{position:relative;width:300px;500px}
#video_box_id_css, .video_box_class{border:0px !important}
/* BACKGROUND SHOULD BE PAGE BACKGROUND */
.left{position:absolute;width:3px;height:500px;left:1px;z-index:10;background:#fff}
.right{position:absolute;width:3px;height:500px;right:1px;z-index:10;background:#fff}
</style>
<div class="videobox">
<video id="video_box_id_css" class="video_box_class" autoplay loop width="300" height="500">
<source src="http://video.cdn.com/xxxxxxxxxx/704_black_VP8.webm" type='video/webm'/>
<source src="http://video.cdn.com/xxxxxxxxxx/704_black_libtheora.ogv" type='video/ogg'/>
<source src="http://video.cdn.com/xxxxxxxxxx/704_black_x264.mp4" type='video/mp4'/>
<!--
ALTERNATIVE CONTENT LIKE SWF
VIDEOS FOR NON HTML5 BROWSER
//-->
</video>
<div class="left"></div>
<div class="right"></div>
</div>
Code Info
Our code is above (removed the flash so it is more readable). A side thing to note is we add a left and right div column which goes over the video black borders. You can tweak these and even add a bottom and top if needed.
Photo
The green border is actually the white div in opacity so you can sit the effect. It may be hacky but it the best solution we found.
Final
The result is much better as you can see below:
I've had this issue before, usually the problem lies within the video itself. When you encode your video try to match the settings as closely as possible to what you will use in your tag. It shouldn't be a roadblock for you, once you inspect the video a bit closer you should see a discrepancy.
I'm building a web site and I'm using HTML5. I'd insert into my header an img that is my company's logo. In terms of efficient and correctness it is better set up css propriety as background-image: url("logo.gif") in my css style or including in the html file
<header>
<img src="logo.gif" alt="logo" />
</header>
It is best to include the image as an img tag, not a background-image.
This means that if the client has disabled CSS on their browser, or it doesn't support CSS, they will still be able to see the logo at the top of the page.
This would also mean you could make the logo a link to the home page, which has become a general usability point for websites these days:
<header>
<img src="logo.gif" alt="logo" />
</header>
For more information on this sort of situation, see this popular StackOverflow post:
When to use IMG vs. CSS background-image?
that depends.
If your logo should be clickable then include it in the HMTL. (usebility)
If it is only present for design purposes go with the CSS.
It is generally a better idea to define everything related to the appearance of the Website in the CSS.
html:
<header>
<div id="company_logo"></div>
</header>
css:
#company_logo{
width:50px;
height:50px;
background-image:url();
}
Unless you need to have some contents over your logo, I'd go for the <img> tag (it is also screen reader-friendly provided you have the "alt" text).
Background images can not be printed, if your site has the purpose of being printed, then your logo won't display.
Remember that a logo is a content, and a background is a style. Using a background as a logo is not semantic.
I have a container div#content, which contains three divs inside. Now, how could I make sure that three divs inside have the same height? Of course, I hope each div's height could be expanded according to its content. For example:
here is what I tried
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title></title>
<style type="text/css">
#content{background-color:#DDDDD;width:100%;overflow:auto;clear:both;height:100%;}
#col1{background-color:yellow;width:10%;float:left;height:100%;}
#col2{background-color:red;width:30%;float:left;height:100%;}
#col3{background-color:#AAAAAA;width:10%;float:left;;height:100%;}
</style>
</head>
<body>
<div id="content">
<div id="col1">
<script language="javascript">
for(i=0;i<1000;i++){
document.write(i+"<br />");
}
</script>
</div>
<div id="col2">
<script language="javascript">
for(i=0;i<100;i++){
document.write(i+"<br />");
}
</script>
</div>
<div id="col3">
<script language="javascript">
for(i=0;i<10;i++){
document.write(i+"<br />");
}
</script>
</div>
I regularly get bashed by the CSS purists for this suggestion, but whenever I run into a problem like this for which – to the best of my knowledge – CSS simply doesn't offer a solution (no, "change your design" doesn't count!)...
I recommend using a table for that part of your layout.
Tables do equal vertical sizing easily and correctly across all major browsers. I'll continue to recommend them until CSS offers workable solutions for those problems.
A very useful technique for creating divs of equal height is to emulate it with a technique called "Faux Columns". This was an idea first suggested by Dan Cederholm (You can read his original article here), and has since evolved. You can see a good tutorial here. If you need it in a liquid layout environment, you might want to read this article.
Basically, the idea builds on NOT trying to force the divs to be of equal height, but have a wrapper of the three divs with a background-image that simulates the background of the columns. This approach works consistently among all modern browsers (ie6 even counts as modern in this context). The negative part is that you'll need a background image that is at least as wide as the page is allowed to expand. i.e. X pixels wide and 1px high.
First of all: if you have an equal attribute on different elements, please adhere to the DRY principle (Don't Repeat Yourself) and write it like so:
.content div{
border:1px solid #404040
}
That way you'll only have to change it in one place.
Now about your question. For a dynamic height, I'd specify that the div's should have a height of 100%, so they fill all the vertical space. This doesn't work nicely cross-browser so look for a hack that does this. If you don't want the div's to fill up the content div, put another div inside the content div and put that around the 3 divs.
So:
<div id="content">
<div class="innerContent">
<div class="1">Lorem Ipsum</div>
<div class="2">Lorem Ipsum</div>
<div class="3">Lorem Ipsum</div>
</div>
</div>
I may be wrong, but I think you either put the same values for the heights in the divs (either in percent or px) or you'll have to do some script (for example in JavaScript) that will check on the content height and set the other heights. I don't think it's doable with CSS. If I'm wrong I'd like to know the answer though:P
You could try it using css for modern browsers (display:table-cell, etc.), however, that will not work in IE6 and IE7.
If IE6 and IE7 are a requirement (I suppose it is...), you can include some javascript just for them using conditional statements and have that javascript set the height of all columns to the tallest. Not really pretty, but the percentages of IE6 and 7 should be going down fast anyway.
By the way, Machine's solution (faux columns) is another solution that works for a lot of designs.