Opera and IE are not handling css pseudoclasses properly - html

Problem is very very simple: When clicking on "red red red" in browsers: Chrome 17, FireFox 10, IE 9, Opera 11.61 both elements have been lightened with their appropriate colors.
When clicking on "GREEN" it happens only in Chrome and FF. In IE and OPERA nothing happens. Why?
Demonstration:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.container:active
{
background: red;
}
.container:active .in
{
background: green;
}
</style>
</head>
<body>
<div class="container">
red<br />red<br />red<br />red<br />red<br />
<div class="in">GREEN</div>
</div>
</body>
</html>
Does anyone know any workarounds?

CSS does not define which elements can be "active" and if a parent element of a clicked-on element also becomes "active".
http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
So all browsers are behaving according to the specs. Sorry!
If you want a workaround, try using an <a> element instead of the outer <div>. Need more styling then though. And the inner <div> should be an inline element to make sure it remains valid HTML.
Edit: And the <a> also must have a href attribute, otherwise it still won't work in IE. (Can't test on Opera here.)
jsFiddle

I believe you need to use Javascript to handle this, as CSS is not capable of selecting parent elements.
In jQuery:
$(document).ready(function(){
$('.container .in').mousein(function(){
$(this).addClass('container_active');
}).mouseout(function(){
$(this).removeClass('container_active');
});
});
http://jsfiddle.net/uYfna/8/

Related

Fieldset with display: table-column disappears entirely in IE8 & IE9

I just spent some trying to figure out why some form content vanished entirely in IE8 & IE9. After some investigation, it looks like it's the fault of having fieldset set to display:table-column. If I set fieldset to display:table or display:block then everything shows up fine, again.
When testing this html on my IE8 & IE9 virtual machines, I can see only the heading "Not inside a fieldset". If I remove the fieldset styling, I can see both.
Does anyone know why this happens?
<html>
<head>
<style type="text/css">
fieldset
{
display: table-column;
vertical-align: top
}
</style>
</head>
<body>
<form>
<fieldset>
<div class="row">
<h6>Inside a fieldset</h6>
</div>
</fieldset>
<form>
<h6>Not inside a fieldset</h6>
</body>
</html>
The display: table-column means it acts like the <col> tag in HTML. The <col> tag is an invisible element which is used to specify properties of the column like styles etc. It is not the same as <td> (which is display: table-cell).
You should use table-cell instead.
W3C Spec
Source - Random832's answer in this SO Thread
EDIT: table-column still gets displayed in IE 7, FireFox 24, Chrome and Opera 15. It doesn't work in IE 8, 9 and 10.
All elements are default positioned to vertically top. You need not to write any extra code. I believe below code should suffice:
<html>
<head>
<style type="text/css">
fieldset
{
height: 50px; /*************** Not Required, Just to show what I mean by my sentence mentioned above :) ****************/
}
h6,div {
margin: 0; padding:0;
}
</style>
</head>
<body>
<form>
<fieldset>
<div class="row">
<h6>Inside a fieldset</h6>
</div>
</fieldset>
<form>
<h6>Not inside a fieldset</h6>
</body>
</html>

Unable to set width/height to an img when DOCTYPE is set (Firefox)

Imagine three images with fixed size:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.photos img {
width: 320px;
height: 240px;
background-color: black;
}
</style>
</head>
<body>
<div class="photos">
<img src="abc" />
<img src="def" />
<img src="ghi" />
</div>
</body>
</html>
When you look at such page in IE or Chrome, you'll see what I expected - threee images with fixed sizes.
In Firefox however, it doesn't work.
But if I set the images to display: block; or remove the DOCTYPE (doesn't show on jsfiddle) it works.
What am I doing wrong?
Thanks
This seems to be an old feature in Firefox: I found a discussion about it from year 2007:
So I suppose it’s intentional and won’t go away. I guess they might be thinking this way: Everything is fine if you set dimensions on an image, we’ll scale it. But if the image is missing, we will render the alternative text instead, and this changes the img element from a replaced inline element to a text, a non-replaced inline element, and for it we won’t support height and width, by the spec. Instead, the text determines the dimensions. And presumably the authors of Firefox think this is the right thing to do, and only in Quirks Mdoe do they do as other browsers do.
If you add alt attributes (as you should, every img should have one), you’ll see how the box size varies by text length. Apparently Firefox treats a missing alt here as equivalent to alt="", implying zero width.
This would explain why setting display to inline-block (or block) changes the behavior: then width and height are applied.
I think firefox wont be applying height and width to <img> element which are empty and hence it must be rendering like that, so use CSS display: block;
Here's my fiddle
Or use an image and see...
Updated : fiddle

z-index problem in IE with transparent div

I have a transparent div-element with a higher z-index than an img-element on the same page. But Internet Explorer is acting as if the img-element would have a higher z-value when it comes to click events.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body style="margin:0;padding:0;">
<img src="7player.png" alt="7player" width="60" height="60" style="position:absolute; left: 100px; top: 100px; z-index:10" />
<div style="width:100%;height:100%;position:absolute;z-index:900;" onclick="alert('hello');"></div>
</body>
</html>
When clicking on the image nothing happens altough the click event of the div-element should be fired (works in Chrome for example).
Is there any workaround or fix for my problem?
In fact, your div "Doesn't have any background",
You need to give it a color background (e.g. white) with opacity=0.01.
For example:
background:white; filter:alpha(opacity=1);
Using a transparent image seems like a reasonable work-around for IE. This was answered already here:
IE z-index trouble on element with transparent background
I have tested the Suggestion given by Preli background:white;filter:alpha(opacity=1), and it is working fine. See the Demo in IE:
http://jsfiddle.net/VMrNF/11/
This is still a bug in IE11, but not Edge. The following solved my problem by creating a background that "looks" transparent but has a color.
background: rgba(255,255,255,0.0);
Slightly better that the filter solution above, if you want only the background to be transparent, but not the contents of the object.
add left:0 to div, click event available
tested in ie9

Why does HTML5 ignore line-height smaller than font-size?

i'm switching some pages over to HTML5 which contains headlines that need to be set with a really small line height. Now since <!DOCTYPE html> any line-height below the font-size is ignored. I can space them out all I want, but no chance bringing them closer together.
Anyone know why that is and if it's cureable?
Thanks,
thomas
Edit: Found it. My old markup was <a style="line-height:12px;" href="#">something</a> which worked in XHTML 1.0 transitional but not in HTML5.
I changed it to <div style="line-height:12px;">something an that works!
Thanks!
Your <a> tag is an inline element and it appears in HTML5 inline elements defer to its parent 'block' element's line-height ( or all the way up to the <body> style if that is the immediate parent ).
Example:
body { line-height:20px; }
a { line-height:12px; }
and this markup:
<body>
test
</body>
The <a> tag will have a line-height of 20px not 12px.
So your 'inline' <a style="line-height:12px;" href="#">something</a> didn't work but did when you wrapped it in the 'block'-level <div> element because block elements can dictate line-height.
A better way than bloating your markup by wrapping your inline element in a block element, just use CSS to make the tag display 'inline-block'.
<a style="display:inline-block; line-height:12px;" href="#">something</a>
Even better, give your <a> a class (change 'xx' below to something semantic):
<a class="xx" href="#">something</a>
Then in your CSS file set that class to 'inline-block':
.xx { display:inline-block; line-height:12px; }
Hope that helps.
Do you have some code? Do you have some extraneous padding or margins?
This works for me in Firefox, Chrome, and IE8
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:18px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
In my understanding, every block-level element has a width-0 character called "strut". It will participate in the calculation of line box's height. When the children's line-height is smaller than parent's,It looks like the children's line-height is ignored because parent's line-height will hold up the line box when the children's line-height is smaller.
You need to use em as big text size in IE8 and IE7 will not share the same line height...e.g. using 30px font-size:
This example shows that with a 30px text size the line height in IE7 and IE8 are not on par with Chrome and FF.
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
This example shows using em all browsers display the same line height.em is an old system though we need to use it until IE8 and below dies out. It's good practise.
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:0.2em;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>

How to change background color of readonly textbox in css

How to change background color of readonly textbox in css
There are too many unkowns in your question. Which browser do you want support? If you say textbox you seem to use ASP.NET, but there is no tag at you question.
Generally said, the behaviour between the browsers are different.
Consider the following html
<html>
<head>
</head>
<body>
<input type="text" disabled="disabled" value="This is a test" style="background-color:Black; color:Lime;" />
</body>
</html>
IE8 renders the background color properly, but disabled controls will always have gray text with shadows. Mozille Firefox beside that renders the control correct and i am sure there will be difference all over the different browsers and even between the browser versions (IE6 would interprete the color values correctly too).
If you want to have a html regardless which browser you use, you have to use a span or other inline element, to format it with border and colors you want, instead of using a input element.
You could use
input[disabled="disabled"] { background:url("url-to-background-image.jpg") no-repeat #fff; }
and for older browser that doesnt support this selector, you can use jQuery to apply a class
$(document).ready(function() {
$("input[disabled="disabled"]").addClass('disabled');
});
And unless it's disabled all the time, you should provide js for removing the class along with js for enabling it.
you can try this
input:-moz-read-only { /* For Firefox */
background-color: yellow;
}
input:read-only {
background-color: yellow;
}
Hi This will surely work for your code. Just try this..
<html>
<head>
</head>
<body>
<input type="text" disabled="disabled" value="JavaScript is the best" style="background-color:Black; color:green;" />
</body>
You can change the background color in css using this code but before that make sure your html page is linked with your css page.
Body {
Background-color: red;
}
Hope this code will work for you.