I have a link in html and i am using :after pseudo element to insert some content and style that content.
It is working fine in FF & IE9. but not working in IE8.
when i click on "Click" link, container div's background color changes.
but content inserted by :after not takes that color as background in IE8.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(function(){
$(".clickMe").click(function(){
$(".yellow").addClass("red").removeClass("yellow");
});
});
</script>
<style>
.testLink {
display: block;
width: 109px;
background: inherit;
max-height: 32px;
overflow: hidden;
}
.testLink:after {
content: "...";
background: inherit;
position: relative;
width: 45px;
margin-left: -20px;
padding: 0 5px;
background-image:none;
background-color:inherit;
font-size: 14px;
}
.yellow{ background:yellow;}
.red{ background:red ;}
</style>
</head>
<body>
<div class="yellow">
linkTextHere
</div>
click
</body>
</html>
Any expert advice would be appreciated.
thanks in advance..
Take a look at the browser support of inherit for IE8
http://www.w3schools.com/cssref/pr_background-color.asp
Note: The value "inherit" is not supported in IE7 and earlier. IE8
requires a !DOCTYPE. IE9 supports "inherit".
So they seem to have a general problem with it considering the Doctype. Maybe try a different one than html5 just to make sure?
Related
I've got the following css file :
.h_bg{
padding:22.4% 0;
background-size:100% auto;
background-position:center top;
background-repeat:no-repeat;
position:relative;
height: 2em;
}
.h_bg h1{
width: 100%;
position:absolute;
line-height:1;
top: 23%;
color:#fff;
font-size:500%;
text-align: center;
padding-bottom: 15%;
background-size:89px 183px;
}
#media screen and (min-width:1001px)
{
.h_bg{
background-image:url(/images/bg1-desktop.png);
}
}
#media screen and (min-width:1001px) and (max-width:1300px)
{
.h_bg h1{
background-size:7% auto;
padding-bottom: 16%;
}
}
And the following html page :
<!doctype html>
<html>
<head>
<title>Beauty app</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="h_bg">
<h1>text</h1>
</div>
</body>
</html>
css link extactly to the place, where css file is. Unfortunately, text string is invisible and this code shows blank page. What can be a problem? Any help would be appreciated.
the problem is here:
color:#fff;
The #fff is forcing your H1 text in h_bg class to be white color, therefore it is invisible
Just incase you hit similar issues in future. This is how you can debug it.
Open your browser (i was using chrome) then right click on the element, for your instance its kind of difficult because you can't see it then click on inspect element.
On the bottom right corner you should see your CSS properties, try play around with it till you found your problem.
I realize this question has been asked a bunch of times, but none of the suggested solutions have worked for me. Basically my tag will not center in IE9+. Its using margin: 0 auto.
I have added text-align:center to the body and html styles. I have a valid doctype. The only thing is I have some PHP that is before the doctype. If that is the problem how do I get around that?
Here is my code:
CSS
html{
height: 100%;
width: 100%;
font-family: GothamBook;
text-align: center;
}
body{
width: 100%;
height: 100%;
text-align: center;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
background-image: url(../Images/bg-pattern-gray.png);
}
main{
box-sizing: border-box;
text-align: left;
width: 940px;
margin: 0 auto;
padding: 10px 40px;
padding-bottom: 40px;
background-color: #FFFFFF;
position: relative;
overflow: auto;
}
>
index.php
<?php
include_once "../PHP/HeaderFooter.php";
include_once "../PHP/Event.php";
$headerFooter = new HeaderFooter();
$eventID = "";
if(isset($_GET['eventID']) && !empty($_GET['eventID'])){
$eventID = $_GET['eventID'];
$event = new Event($eventID);
}
?>
<!DOCTYPE html>
<html>
<head>
<?php
echo "<title>" . $event->eventTitle . "</title>";
?>
<link rel='stylesheet' href='../CSS/reset.css' />
<link rel='stylesheet' href='../CSS/global.css' />
<link rel='stylesheet' href='../CSS/event.css' />
</head>
<body>
<main>content</main><script src='../JS/jquery-2.1.0.min.js'></script>
<script src='../JS/jquery.expander.min.js'></script>
<script src='../JS/expanderScript.js'></script>
</body>
</html>
EDIT
Thanks for the replies. Didn't even think to see if the main tag was supported. I decided to just change the main tag to a div with the id of main. Its an easy fix that way.
Internet Explorer does NOT support <main>. None of them. See CanIUse (at notes) and MDN.
And because of that, IE does NOT style elements it does not support. You can use html5shiv/html5shim which is the polyfill or modernizr that has the polyfill and much more.
From now on, IE will style it. But then you need to set main's default CSS, which specifically is missing on your CSS, as #bboysupaman noted:
main { display: block; }
Or just use a normalize.css which covers all default styles for everything before any other css you use.
Proof:
Just an update proving my point to user C-link Nepal and his magic IE that renders main:
I tested on a real IE10, not emulated stuff. Here is the Fiddle.
Open the iframe url on the IE: http://fiddle.jshell.net/h9rq8e6r/2/show/ If was REALLY block, the below wouldn't happen!
(Paint skills ftw)
Add the following to your css:
main {
display: block;
}
That should take care of it.
I am trying to place a solid color banner that stretches across the top of the screen like on this website, facebook, and others. For some reason I am encountering difficulties doing this
I created a div tag in my HTML file for the banner and tried to apply CSS to the div tag but nothing is working.
<!DOCTYPE html>
<html>
<head>
<style>
#banner {
background-color: #333FF;
font-family: Arial;
position: absolute;
left: 0;
right: 0;
padding:15px;
height:800px;
background-size:100%;
}
</style>
<title>Random Password Generator</title>
</head>
<body>
<div id="banner"><h1>fdsfdsfdsfds</h1></div>
</body>
</html>
I also tried linking to an external CSS file but that isn't working either.
How can I make a simple, solid color banner at the top of the page, on every page?
#333FF is an incorrect color. It should be like this: #333FFF. See the W3C Specification for more info on the length of hex codes (hint: they need to be six characters long).
Working example : http://jsfiddle.net/ntim/SKnxP/
position:absolute; also doesn't seem necessary in your case.
You don't actually need to use position absolute unless you want it to be over the top of anything. Instead, you can just use the following:
<style>
#banner {
background-color: #333FFF;
font-family: Arial;
padding:15px;
height:800px;
background-size:100% 100%;
}
</style>
here is something based on a template I use:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="CSS-STYLE-SHEET.css">
<style type="text/css">
body
{
background-color: #E7E7E7;
text-align: center;
font-family: Arial, Helvetica;
font-size: 15px;
color: #000000;
border-spacing: 0;
border-collapse:collapse;
padding: 0;
margin: 0;
}
#Banner {
background-color: #333FFF;
top: 0; /* Probably not necessary... */
height: 40px;
width: 100%; /* Also probably not necessary */
}
#ContentMain
{
background-color: #FFFFFF;
height: 100%;
}
</style>
</head>
<body>
<div id="ContentMain">
<div id="Banner">Banner goes here</div>
Content goes here
</div>
</body>
</html>
should work.. the grey bit at the back is because the html and body tags dont fill the entire screen - something like this should fix it (I would use min-height), but I have not included it here as then if you want a page taller than the browser window and works in Internet Explorer things get annoying...
Jsfiddle here
I have a canvas fullscreen over a webpage.
The size gets handled in processingjs.
<div id="canvasDiv">
<canvas id="processingCanvas" data-processing-sources="resources/processing/canvas01.pde"> </canvas>
</div>
Behind the canvas is a lot of text. The problem is i can't scroll on a iPad anymore cause the canvas is on top.
Is there a way to ignore the canvas but still show it on top?
This is the current css:
#canvasDiv {
position: absolute;
left: 0;
z-index: 999;
}
#processingCanvas {
position: fixed;
top: 0;
left: 0;
}
Here is how to let elements fall through to underlying elements:
If the browser is Chrome, Firefox, Safari, Blackberry or Android, but not IE or Opera, you can use pointer-events to tell the canvas not to handle click/touch events and then the clicks/touches will be handled by the underlying elements. So,
in CSS:
#topCanvas{ pointer-events: none; }
But in IE and Opera, you have to be tricky:
Hide top canvas,
Trigger event on bottom element,
Show top canvas.
This code shows how to trigger events on underlying elements:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#wrapper{ width:200; height:200;}
#bottom{ position:absolute; top:0; left:0; width:200; height:200; background-color:red; }
#top{ position:absolute; top:0; left:0; width:200; height:200; background-color:blue; }
</style>
<script>
$(function(){
$('#top').click(function (e) {
$('#top').hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
$('#top').show();
});
$("#bottom").click(function(){ alert("bottom was clicked."); });
}); // end $(function(){});
</script>
</head>
<body>
<div id="wrapper">
<canvas id="bottom"></canvas>
<canvas id="top"></canvas>
</div>
</body>
</html>
The :active code works in all browsers, except IE8 (not 9). I've looked at other similar questions to this and have tried different methods. This is the code:
HTML:
<div id="main" style="color:white;font-family:Georgia">
<div id="button" onmouseup="someFunction()"></div>
<!-- other things -->
</div>
CSS:
#button
{
position: relative;
width: 241px;
height: 41px;
background-image:url("images/buttonStatic.png");
display: none;
}
#button:hover
{
background-image:url("images/buttonHover.png");
}
#button:active
{
background-image:url("images/buttonActive.png");
}
The button displays proper, changes to the second button when I hover over it properly, but doesn't change to the third button when I click on it.
I just tried this out in IE8 and it works fine. Make sure your DOCTYPE specification is declared correctly <!doctype html> and maybe try putting in the IE compatibility meta tag which is something like <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>.
On a side note, you shouldn't be using a <DIV> element as a button like that. You should use <button> or <a> with suppressed behaviour.
Edit
Here's my code...
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Active Button</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css&3.5.0/build/cssfonts/cssfonts-min.css"/>
<style type="text/css">
.button {
padding: 4px 12px;
border: solid #555 1px;
background-color: #ddd;
}
.button:hover {
background-color: #eee;
}
.button:active {
background-color: #09c;
color: #fff;
}
.frame {
padding: 2em;
}
</style>
</head>
<body>
<div class="frame">
<button class="button">I'm a Button</button>
</div>
</body>
</html>
Your code is fine, it's a known bug (sorry, discrepancy) in IE8.