I have a div that wraps a table with style display: table. Table contains div with height:500px http://jsfiddle.net/9ucm7z9h/:
<div style="width: 400px; display: table; background-color: blue;">
<div style="height: 100px; background-color: green; overflow: scroll">
<table style="width: 100%;">
<tr>
<td>
<div id="test" style="height: 500px; background-color: yellow;"> </div>
</td>
</tr>
</table>
</div>
</div>
This code rendered differently in IE and Chrome/Firefox. It is a Chrome/Firefox bug? What can I do to force it rendered as in IE?
It seems to be a bug which can be eradicated by triggering the layout somehow.
First of all, the child element of one ruled as display:table might turn into display:table-row or display:table-cell by default, even if not written via the CSS rules. Browsers always try to correct or fix things which obviously here do not work out properly.
Trying to trigger layout using float or display:inline-block here looks like it fixes the misbehavior of the parent displayed as table, at least in Firefox.
http://jsfiddle.net/9ucm7z9h/3/
You can find a bug report here.
Related
As you can see above, I cannot select the overflowed events on the calendar date. It looks like it's because I have the overflow:hidden/visible toggle triggering on the class of the calendar date: '#cell-shell'.
Here is the HTML code for that specific date:
<td>
<div id="09" class="cell-shell>
<div class="date-num">9</div>
<div class="event-wrap>
<span></span> <!--these hold edit buttons when editor is logged in-->
<span></span>
<div id="e1" class="cell-data">Event 1</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e2" class="cell-data">Event 2</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e3" class="cell-data">Event 3</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e4" class="cell-data">Event 4</div>
</div>
... <!-- pattern repeats-->
</div>
</td>
Here is my current relevant CSS:
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
}
.cell-shell:hover {
overflow:visible;
}
.event-wrap {
position: relative;
display: inline-block;
font-size: 0;
}
.event-wrap:hover {
opacity: .5;
}
Is there any way through CSS or JS that I can prioritize the '#cell-data' elements? I need to be able to click on those events 6 & 7 and beyond, but once my mouse wanders out of the '9' '.cell-shell' box into the '16' '.cell-shell' box, '16' seems to take over.
EDIT: I added more information as requested by david. I thought it was irrelevant but perhaps not. I added the elements as well as the children below them. I also added in the event-wrap CSS
It looks like it's not because you mouse over 16, but because your mouse went between the event divs, thereby touching the 16 div between the event divs.
See the frame below where you're over an event on top of 16 just before you cross the gap:
The way that hover works is that if the mouse is over any sub-element of the element with hover, that hover CSS will continue to be used. But the moment the mouse leaves the border-box of the sub-element AND is outside of the element with over, the hover CSS will stop working.
I bet that if you're fast and accurate enough, you can get the mouse to clip over the gap between frames and keep it open. But your users might not find that useful. ;P
One method that might fix this would be making sure that the event divs have no space between them. That means no margins separating them.
In order to keep your current visual without having to add too much code, you can do something like the following:
...
<div class="event-wrapper"><div id="e1" class="cell-data">Event 1</div></div>
<div class="event-wrapper"><div id="e2" class="cell-data">Event 2</div></div>
...
...where the event-wrapper class looks like:
.event-wrapper {
margin: 0px;
padding: 0px;
}
Another method might be having the whole date box expand its size, but that might require some changes to how the layout works in order to keep it from messing things up.
Anyway, I hope that helps.
Use z-index to give priority to your cell-data elements over '16'.
Find a sample demo of it's usage below:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Add CSS property z-index: -1 into your css.
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
z-index: -1 // Here
}
.cell-shell:hover {
overflow:visible;
z-index: -1 //Here
}
Hope it will work for you.
I am using jquery draggable to drag and drop the contents on the table cells that are part of editor. We are allowing users to directly drag and drop content to respective tds and use the template for creating prints and emails.
Whenever user drags over the table-cells of editor, a div with option to replace split and add are shown.
I am appending this div inside hovered td.
<tr>
<td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
<h1><a target="blank" href="http://local.smgt.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a>
<br><br><a target="blank" href="http://local.smgt.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>
<div class="contentdiv" style="position: absolute;">
This will show options replace/split/add new
</div>
</td>
</tr>
The problem is position absolute for this div doesnt work in firefox.
And i can not wrap up the contents of td inside other div having position relative as suggested Here and Here. The reason being for this is i am not sure how complex the dom of td can be as we are allowing user to fully customize the contents inside it.
Link To Fiddle
works perfectly in Chrome though. Any other solution guys??
Instead of using <table> <tr> <td> </td></tr> </table>, try to design div as a table.
For your reference http://snook.ca/archives/html_and_css/getting_your_di . After this try your code, it may help you out.
Design div as table is best approach. This may be used for responsive design too.
<td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
<h1 style="position:absolute;"><a target="blank" href="http://local.amp.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a><br> <br> <a target="blank" href="http://local.amp.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>
<div class="contentdiv"> </div>
</td>
you've given absolute position to <div class="contentdiv"> </div>
Remove absoute position for this and add absolute position for <h1> which is placed above to <div class="contentdiv"> </div>.
I've checked. It's working perfectly.
http://jsfiddle.net/qfquj/69/
The following are I modified.
removed absolute position for
.contentdiv{
height:200px;
width:300px;
background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
color: black;
background-size: 100% 100%;
text-align: center;
top:0;
opacity:.6
}
and added inline css for h1
<h1 style="position:absolute;">
Here is answer for your question. I hope this may help you.
http://jsfiddle.net/qfquj/73/
What I modified is,
Removed top:0 and added float:left
.contentdiv{
height:200px;
width:300px;
background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
color: black;
background-size: 100% 100%;
text-align: center;
position:absolute;
opacity:0.6;
float:left;
}
Added inline css float left for <h1>
<h1 style="float:left">
Firefox has a problem with absolute positioning whenever tables or display: table-cell is involved, where it will ignore the table cells as a relative parent.
It's a 13 year old Gecko bug.
You can fix this by reverting from the table structure and using display: inline-block on your cells for example, or putting another relative div around your table cell.
If I am in a table cell in a apply the CSS rule vertical-align: middle; to that cell then all the text centers vertically in the cell.
<table>
<tr>
<td style="vertical-align: middle;">
I am vertically centered text!
</td>
</tr>
</table>
However, if I apply this to another element it functions differently or not at all. For example:
<div style="width: 300px; height: 400px; vertical-align: middle;">
I am not vertically centered, but I wish I was :(
</div>
But then if I apply it to an image tag then it adjusts how the image is oriented with other inline elements.
Here is a jsfiddle with examples of all these scenarios.
My question is, how can I accomplish vertical center alignment within a simple DIV just like the way it behaves in a table cell?
Add display: table-cell to your div.
jsFiddle: http://jsfiddle.net/7FYBa/20/
<div class="outer" style="position:absolute;">
<div class="inner" style="display:table-cell; vertical-align:middle;">
I am not vertically centered, but I wish I was :(
</div>
</div>
But of course. Vertical centering is pretty funky in CSS.
I'd suggest you read up on some of the vertical centering techniques out there. Different elements and considerations equate to different methods. Here's an article I'd suggest.
You can try something like this using jQuery http://jsfiddle.net/7FYBa/30/
vertical-align works for none-table-elements when you increase the line-height.
#elem {
vertical-align: middle;
line-height: 100px;
}
But of course layouting is not that easy using line-height.
I currently have a web site in which I am using some Javascript to change the Background of a DIV.
The DIV is defined as follows :
<td style="width: 750px; height: 300px; background-color: Black; border: 0px;">
<div id="outerscreen">
<div id="mainscreen">
</div>
</div>
</td>
and the Javascript I am using is as follows :
var docEl = document.getElementById('outerscreen');
docEl.style.backgroundImage = "url('pics/intro.gif')";
My problem arises where this function works perfectly on IE but fails for Chrome, FF and Safari.
Can anyone shed any light on what the problem is and how I might be able to resovle this.
Thanks in advance
Chris
Assuming that you have some content inside #mainscreen, the most likely explanation is that #mainscreen is floated, so it isn't used when calculating the height of it's parent, but that you have a Doctype (or no Doctype at all) that triggers Quirks mode in Internet Explorer, so it doesn't allow floats to fall through the bottom of their containers.
Add a Doctype that triggers standards mode (so IE will be more consistent with other browsers)
set overflow: hidden on #outerscreen
This does work in FF4 and Opera10. You need to specify the height and width of <div id="outerscreen">, or have some content inside which takes up screen real estate for this effect to be visible.
Although i don't recommend using a table for your layout here is a solution that works better and gives you more control
<style type='text/css'>
.outerCell {
width: 750px; height: 300px; background-color: Black; border: 0px;
}
.outerScreen {
background-image : url('pics/intro.gif');
height: 300px;
}
</style>
<td class='outerCell' >
<div id="outerscreen">
<div id="mainscreen">
</div>
</div>
</td>
now the javascript:
var docEl = document.getElementById('outerscreen');
docEl.className = "outerScreen";
Having your style defined in a css is more flexible when you want to make changes,
code seperation is always good
I think the problem is with the '
try:
docEl.style.backgroundImage = "url(pics/intro.gif)";
I have a table that is 640px wide seperated in two [TD]'s. The left one is 150px and the right one 490px.
The question is, using CSS or any other method, how do I stop the content from overflowing the size I have set and making the page look like a mess.
I have have tried the css overflow: scroll method and in some cases this works, but not in all. I need something that is going to work everytime. If I could get each TD to scroll if the content is larger that would certainly suffice.
I do not have a link to provide, this is just a general question as I will have many areas on my site that I may need to use something like this.
Thanks
If you're using tables as backbone of you website, then you do it wrong. You should use div elements instead.
Tables should be use for tabular data, not for structure.
Sometimes it's quite hard to get fast the look as when used table, but it's not impossible. For 2-row table you can use something like this
<div id="container">
<div id="left">
<div id="right">
<div class="clr" >
</div>
CSS:
#container{
width: 640px;
}
#left{
width: 150px;
flot: left; /*if you want them to be next to each other */
overflow: scroll; /*or hidden?*/
}
#right{
width: 490px;
float: left;
overflow: scroll;
}
.clr {
clear: both;
}
I agree with both answers so far - the ideal solution is to re-code your layout without the table, but if you don't have time, wrapping your table cell content in a <div> will do the trick:
HTML
<table>
<tr>
<td class="left">
<div>This is your left content</div>
</td>
<td class="right">
<div>This is your right content</div>
</td>
</tr>
</table>
CSS
table {
width: 640px;
}
td div {
overflow: scroll;
}
td.left,
td.left div {
width: 150px;
}
td.right,
td.right div {
width: 490px;
}
The added <div>'s around your content will respect the CSS overflow property and prevent non-breaking content from blowing up your layout.
Since you are using fixed widths, it sounds like you need to set table-layout: fixed on your table element.