HTML question, block and inline-block not behaving as expected

Look at http://jsfiddle.net/2uzfjs94/1/.

Scroll down the table and look at the green div that says 7:00am-9:00am. That thing has a rowspan of 8, but it won't expand the full height. I used the class="ac" on it. If you look at my CSS, ac is defined as:

.ac {
    display: inline-block;
    border: 1px solid #CCC;
    border-radius: 10px;
    padding: 5px;
    width: 250px;
    min-height: 80px;
    height: 100%; /* NOTE! I PUT 100% FOR THE HEIGHT */
    box-shadow: inset 0px 0px 10px -2px blue;
    background-color: lightgreen;
}

Open in new window


In Chrome and Opera, those <div>s do expand to the full height, but it won't work with IE, Firefox.

The same problem is true with the <div>s that have the time ranges of 1:00pm-2:00pm, 2:00pm-3:00pm, 3:30-4:00pm, and 6:00pm-12:00am. They're all on the first column.

How can I make those <div>s with big rowspans expand its full height across all browsers?

Thanks.
elepilAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

chaauCommented:
You need to define the height of your <tr>, like this:
tr {
    border-bottom: 1px solid #7BA0DF;
    height: 20px
}

Open in new window

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
See my notes in the css code

http://jsfiddle.net/2uzfjs94/3/
.ac {
    /* 
    ------ should be block --------
    display: inline-block;
    */
    border: 1px solid #CCC;
    border-radius: 10px;
    padding: 5px;
    width: 250px;
    /* 
    ----- don't need  -----
    min-height: 80px;
    */
    height: 100%;
    box-shadow: inset 0px 0px 10px -2px blue;
    background-color: lightgreen;
    /* 
    ------ add this ---
    */
    overflow:auto;
}

Open in new window

chaauCommented:
@Scott: does not work in Firefox
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

elepilAuthor Commented:
To Scott and chaau, thank you both for responding.

chaau, did you try it in all the browsers? Your version doesn't work in IE, looks really weird in Chrome, Firefox, and Opera.

Scott, yours doesn't work in all the browsers either.

Also, the min-height is necessary because I cannot let the <div> become too short. There is a minimum amount of content I have to put in those <div>s.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Your right.  I have 3 browsers open and thought that is what I tested on.  I think this is not going to be easy inside of a table.  chaau's height *works* but it as is the green box painting over the lines.  You probably just need to play with heights and padding.

This might be a lot easier to just use a css grid.   Especially if you want it responsive.  If you are not used to it, there is a small learning curve, but in the end you will wish you did this to start with http://getbootstrap.com/examples/grid/
elepilAuthor Commented:
If you both want to see how it should look, try my sample in Chrome, using display: inline-block. Using block doesn't work in Chrome somehow.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
On mac Chrome and Safari it worked, but not on firefox.
elepilAuthor Commented:
I can't believe there are still browser differences with rowspan. That property has been around forever. :(
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
With what you are trying to do, my go to is using fullcalendar http://fullcalendar.io/  Why try and reinvent the wheel. This has gone through a lot of updates already.  You can set the display to only show the daily planner if you like and it appears to do exactly what you want.

Your data can be an array http://fullcalendar.io/docs/event_data/events_array/ or json http://fullcalendar.io/docs/event_data/events_json_feed/ or even google calendar http://fullcalendar.io/docs/google_calendar/

I have been using fullcalendar for many years.
chaauCommented:
It has nothing to do with the rowspan. Your tr height is undefined. In addition to that you need to specify the height of at least one of the td. Check this JSBin. For the second table there is no height defined for a td, and the div is unable to take the whole cell.

In my first answer I forgot to mention that I defined the height=100% for the TD as well. Check the jsfiddle again
elepilAuthor Commented:
Scott, this appointment display I'm making is tailored for this business I'm writing it for. They can have as many 8 appointments for ONE time slot, and the owner wants a minimum amount of information displayed for EACH appointment. Full calendar cannot fulfill what the specs require.

I tried applying my CSS class using a background color to the <td> instead, thinking I could do away with the <div>, but it won't span the full height either.
elepilAuthor Commented:
chauu, did you even try it in IE? It still doesn't work in IE. It looks off in pixels in Firefox. Then in Chrome and Opera, look at the heights of the <tr>, for some reason they're not all equal and looks bizarre.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Give this a try....  

1) Go to http://fullcalendar.io/

2) On the month view, drag 7 or 8 events to the same day.

3) Switch to the day view

4) Drag all the events to the same time

Notice you have 7 columns of events in the same time slot

5) Play with pulling the bottom of a couple of events down to increase the length.

If you still want to do this on your own, you can use your browser's console to look at how they did this.  It is tables with div's inside the td's.  But is is a lot more complex and uses javascript to configure some sizing on the fly.  In short, the box's representing the event are absolutely positioned and uses z-index where you are trying to use rowspan.

This is highly customizable, can do what you want, and already has had a good handful of years to work out kinks and bugs.  It will have a more polished look as well.    Another option is http://www.telerik.com/kendo-ui#demo-scheduler.  While terlerik recently open sourced many of the web ui controls, the scheduler is part of the paid.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
elepilAuthor Commented:
Scott, it's a bit late for me to be switching stuff like this. My deadline is in 1 1/2 weeks, and I'm getting stressed. But you know what I did? I experimented with jQuery to see if I could adjust the height of those <div>s to match the height of their parent <td>. It worked on all browsers! But when I did this, I targeted just one. Now I had to modify the code to target all the <td>s with a rowspan attribute, then repeat what I did, but my code isn't working right.

Do you use jQuery? If you do, here's the new post I made: http://www.experts-exchange.com/questions/28691278/jQuery-Having-difficulty-setting-a-child-div-'s-height-to-match-it's-parent-td.html.

Thanks.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think you have the idea to use javascript/jquery to detect the height you need and update.
elepilAuthor Commented:
Scott, but it's not working right though, and I'm not sure why. chaaus is there pointing out something to me, and he's right that the <td> is expanding in height by a little each time I set the child <div>'s height to match it's parent <td>, causing a weird result.
elepilAuthor Commented:
chaaus and Scott, I divided the points between you for trying to help me. But I put C for the grade because the problem wasn't really resolved, plus I did open a new post at  http://www.experts-exchange.com/questions/28691278/jQuery-Having-difficulty-setting-a-child-div-'s-height-to-match-it's-parent-td.html where this is being continued.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.