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>
Related
Try pasting this HTML into a file and opening it in Chrome:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<textarea></textarea>
</div>
</body>
</html>
The parent is a bit bigger than the textarea:
This is only the case on Chrome (not Firefox).
I noticed that if I removed the doctype, it behaves normally - the parent is the correct size. My first thought is that it's just different default useragent styles. Here's a diff between the the user agent styles with and without the doctype:
So I tried matching the padding and the box-sizing like so:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<textarea style="box-sizing: border-box; padding: 2px 0px 0px 2px;"></textarea>
</div>
</body>
</html>
But the problem doesn't go away. Any idea what's causing this?
(Sorry for the over-sized images - I'm not aware of any markdown tricks to make them a more reasonable size.)
Yes, it is a chromium bug.
The best workaround is to set it to block type box.
textarea {
display: block;
}
a simple html page .if you run it in IE(my version is 7).you will find the input have a "margin-left"(size is 15px).
but if you delete the (*zoom:1),we should use it to trigger the haslayout in ie,the "margin-left" disappear.
so that is why???
<!DOCTYPE>
<html>
<head>
<style>
body,div,input{margin:0;padding:0;}
.div-inline{display:inline-block;*display:inline;*zoom:1;border:1px solid red;}
.marginLeft-15{margin-left:15px;}
</style>
</head>
<body>
<div class="marginLeft-15">
<div class="div-inline"><input type="text" id="proxy_unuse_address"></div>
</div>
</body>
</html>
I think that display:inline-block; triggers the hasLayout too(according to this page), so why dont you just remove the *display:inline;*zoom:1; style completely, it should work...
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/
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>
Unfortunaly this site we're developing has to be IE6 compatible. It contains a horizontal block style menu, but there's still one more problem with IE6.
I have the following code:
<html>
<head>
<style type="text/css">
a {
display: block;
width: 0px;
background-color: red;
}
</style>
</head>
<body>
This is a anchor tag
</body>
</html>
Because of the spaces, it wraps every word on a new line. What do I need to do if I want it on a single line only?
Thanks!
Add this css on the a element:
white-space: nowrap
Have you tried popping your anchor into a span or div?
Well, don't set its width to 0 would be the cross-browser proper approach.
Use float: left instead, if you want the anchor to be displayed in block mode but not allocate 100% width.
When you use floats like that, you also need to make sure you clear them, to make them occupy space in their container:
<div>
<a ... />
<a ... />
<div style="clear: both;"></div>
</div>