How can i set content to overflow in fieldset?
It works in IE but not in FF.
Same functionality I can achieve with div element in both browsers.
Sample:
<fieldset style="border:thin solid #990033;">
<legend>test</legend>
<div style="background-color:#0033FF; height: 30px; width:800px;" >FIXED DIV</div>
</fieldset>
<p> </p>
<div style="border:1px solid #999999; padding:0 8px 8px 8px;">
<label style="background-color:#FFFFFF; padding:0 5px; position:relative; top:-10px;" >test</label>
<div style="background-color:#0033FF; height: 30px; width:800px;" >FIXED DIV</div>
</div>
Found solution, add conditional css style:
fieldset {
display: table-column;
}
<!–[if IE]>
fieldset {
display: block;
}
<![endif]–>
This is actually a bug in Firefox and it exists for almost 8 years. :D
https://bugzilla.mozilla.org/show_bug.cgi?id=261037
From a blog post by Emil Björklund:
body:not(:-moz-handler-blocked) fieldset {
display: table-cell;
}
you don't need to overflow the content! In IE(6), by default, the "fieldset" tag has no padding, in FF it has! That is why you have a different behavior!
You can reset the padding (padding:0px;) of the fieldset but in this case, in FF, the label doesn't look fine! To fix that, you can reset the padding-bottom of the fieldset and apply a "margin-left:-12px" to the div inside the fieldset.
However, that solves the problem with FF but generates an issue in IE!
So, my suggestion is to use conditional CSS statements to apply to each browser the right rules of style!
Related
Please do not mark this as a duplicate as i have got all of the correct code (as far as i can see) in and i think something is somehow over riding it. Used Chrome Inspector but it isnt picking up any problems.
I am trying to vertically align the text in the boxes (i dont want to id them all separately and pad them as if the text needs updated then so will the css).
Here is the code:
CSS:
.draggable{
color: #ffffff;
background-color:#EE3C96;
display:table-cell;
vertical-align:middle;
font-size:12px;
font-weight:bold;
text-align: center;
width: 90px;
height:90px;
float: left;
margin-left: 10px;
padding: 5px;
}
HTML:
<div class="draggable">
Lost time - employee absence
</div>
<div class="draggable2">
"Safe Place" to work
</div>
<div class="draggable">
Lost resources - employees leaving
</div>
<div class="draggable">
Financial penalties
</div>
And here it is on Codepen:
http://codepen.io/lbarnes/pen/vkrib
draggable and draggable2 are essentially the same (need them separate as it is used in the jQuery :)
Thanks in advance, hopefully someone can find something as i have tried everything lol!!
I recommend you to use the double span tip to vertically align your multiline text.
First, a simple exemple
And now, adapted to your needs :
<div class="draggable">
<span><span>
Lost time - employee absence
</span></span>
</div>
<div class="draggable2">
<span><span>
"Safe Place" to work
</span></span>
</div>
You can keep your current HTML markup, and add these spans via jQuery (I won't recommend it) :
$('.draggable, .draggable2').contents().wrap('<span><span></span></span>');
Then, add this CSS to get your vertical alignment :
/* Vertical align */
.draggable, .draggable2 {
display: block;
width: 90px; height: 90px;
line-height: 90px;
}
.draggable>span, .draggable2>span {
display: inline-block;
vertical-align: middle;
line-height: 0;
}
.draggable>span>span, .draggable2>span>span {
line-height: 20px;
}
Your CodePen forked
You can put the text in the box between <p></p> tag than add in your css the following lines:
.draggable p {vertical-align: middle;}
.draggable2 p {vertical-align: middle;}
You can add the following code to the draggable classes to solve the issue.Remove the display:table-cell
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
This would center the text inside the div both horizontally and vertically
This works for webkit browsers.For Mozilla
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
and IE
display:-ms-box;
-ms-box-pack:center;
-ms-box-align:center;
More info on browser support
I'm trying to use display: table with fieldset, but it's not scaling properly. The same thing works if I change <fieldset> to <div>.
I tried with Safari and Firefox.
Am I missing something?
http://jsfiddle.net/r99H2/
Basically, the default rendering of fieldset can't actually be expressed in CSS. As a result, browsers have to implement it in non-CSS terms, and that interferes with application of CSS to the element.
Pretty much any element that can't be recreated using pure CSS will have issues of that sort.
The fieldset is an element with special behavior, so it is likely for this issue to occur.
Add another div wrapper inside your fieldset wrapper, and use the div. Change fieldset back to normal, or block.
<fieldset style="background: pink; width: 100%">
<div style="display: table; width: 100%">
<div style="display: table-cell; background: red; width: 33%">a</div>
<div style="display: table-cell; background: green; width: 33%">b</div>
<div style="display: table-cell; background: blue; width: 33%">c</div>
</div>
</fieldset>
When you change the width of the fieldset, you are changing the size of the border of it. Its function is to group elements and draw a border around them. Its size doesn't affects the content inside it. So, follow this.
.fieldset {
display: table;
padding:0;
border:none;
}
.div {
display:table-cell;
border: 1px solid black;
width:calc(100vw * 1/3);
}
<fieldset class="fieldset">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
</fieldset>
I have an area on a page that uses with overflow. In side that div a have content with a few links and a few hidden divs. When a link is clicked, a hidden div is shown. In FF the div appears like intended: above everything else, in IE, however it appears above the content inside the div with overflow, but not above the overflow. How can I fix that?
Here's an example of my code:
<style>
.hiddenDiv {
position:absolute;
zIndex:9999;
width:300px;
height:250px;
background:#fff;
border:1px solid #ccc;
}
</style>
<div style="overflow-y: auto; border: 1px solid #ccc; height: 200px; width: 300px">
some content here
<div class="hiddenDiv" style="display:none">more content here</div>
</div>
i think this is some sort of IE specific issue.
This means your page is rendered in quirks mode..
Do you have a doctype declared in your page ?
example that works fine unless IE is put in quirks mode (then it exhibits the behavior you describe): http://www.jsfiddle.net/UtKYn/1/
Use:
* { zoom: 1; }
Though it's not advised to use the * selector, so try to narrow it down a little.
Also, consider z-index
try to add
margin: 0px;
padding: 0px;
above code for the div that is indented.
I have the following HTML:
<div class="selfClear" style="float: left; border: 1px solid black;">
...floated stuff in here...
</div>
<span style="margin-top: 10px; border: 1px solid purple;">hello world</span>
I'd like there to be a 10px gap between the div and span, per the margin-top. But, since the div above is floated, it won't render that way. The fix to make sure something clear's the DIV. To do that via pure CSS, it appears one should use the '::after' method of inserting content that is then set to clear:
.selfClear::after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.selfClear {
display: inline-block;
}
However, this doesn't quite do what I think it should be doing. If I don't include the height/visibility styles so that I can actually see the period as it is inserted, I see that it's actually rendering inside the div (the black border encloses it), rather than after the div (so it's between the div and span). Am I misunderstanding how this should be working?
EDIT:
Here's a simpler example:
CSS:
#theDiv {
border: 1px solid green;
}
#theDiv::after {
content: ".";
}
#theOtherDiv {
border: 1px solid orange;
}
HTML:
<div id="theDiv">
Hello
</div>
<div id="theOtherDiv">
World
</div>
That ends up placing a period after 'Hello' rather than after the div.
It appears that ::after and ::before are actually appended to the CONTENTS of the element, not the element itself. Is that correct?
Yes, it appends to the content of the selected element. You could try wrapping the div then appending after the wrapper div, but that defeats the whole purpose of using :after in the first place.
You could also try setting the enclosing div to 'overflow: auto'. That works everywhere.
I would suggest using clearfix - it's a lot simpler, you just set up a surronding with a class of clearfix.
See this example.
I've been running into a presentation issue with Internet Explorer. The following simple block of code renders as I would expect it to in Safari, FireFox, Chrome, and Opera. However it results in a noticeable space between the left and right floated DIV elements in both IE6 and IE7.
My question is: Is there a more correct way to achieve a float such that the same CSS works in both IE and the other browsers I've mentioned? If not, what is the best approach for getting rid of the space in Internet Explorer?
Thanks, Matt
<style>
.left {
width:100px;
float:left;
border: solid black 1px;
}
.right {
width: 100px;
margin-left:100 px;
border: solid red 1px;
}
</style>
<div class="left">
a
</div>
<div class="right">
b
</div>
Since this is a community wiki. I thought I'd post the working code with the solution proposed below by Plan B.
<style>
.left {
width:100px;
border: solid black 1px;
float:left;
}
.right {
width:100px;
border: solid red 1px;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="left">
a
</div>
<div class="right">
b
</div>
<div class="clear"></div>
c
Float them both left, add the following after both divs:
<div class="clear"></div>
.clear { clear: both; }
That or use padding instead of margins.
.body {
padding:0px;
margin:0px;
}
It is the double margin float bug. Described well here:
http://www.positioniseverything.net/explorer/doubled-margin.html
Try adding display: inline to floated divs. I believe this is an IE bug of adding more margins to floated elements. display: inline worked for me in the past. Hope this helps.