CodingCSS: min-height

 

Press Ctrl+Enter to quickly submit your post
Quick Reply  
 
 
  
 From:  99% of gargoyles look like (MR_BASTARD)  
 To:  ALL
37448.1 
I'm trying to get table cells to have a minimum height, specified through CSS. I figured that all browsers should now be able to support this, but testing on three browsers (FF3, Safari4, Chrome) indicate otherwise.

The CSS:
code:
 
        table
        {
            border-collapse: collapse;
            table-layout: fixed;
            display: table;
        }
 
        td
        {
            border: solid 1px #000;
            min-height: 90px; 
            width: 90px;
            padding: 5px;
            vertical-align: top;
            font-size: 80%;
            font-weight: bold;
        }
 

On another forum, I found a bit of a bastardised hack to get it working, which is to include a DIV in each cell, and apply min-height to that. It works, but it offends my delicate, southern pansy sensibilities.

Hairy-chested code gods, have you encountered similar? And how did you wield your mighty powers to smite this beast?

bastard by name, bastard by nature

0/0
 Reply   Quote More 

 From:  CHYRON (DSMITHHFX)  
 To:  99% of gargoyles look like (MR_BASTARD)     
37448.2 In reply to 37448.1 

Tables are deprecated. Meaning: avoid them like the bloaty plague they are.

 

In a very few cases, where you are actually displaying tabular data, rather than attempting to hack up a layout, they are appropriate. Not sure why you would need "minimum height" in such a case, but whatever.

 

To get absolute 'minimum' dimensions, you need to stick in cells stuffed with 1-pixel x whatever images (I prefer a 1x1 transparent gif).

 

I guess the div thing probably does it too (haven't tried it; same diff?).


----
What can't social media do?
  • Make coffee
  • Tie its shoes
  • Spell
0/0
 Reply   Quote More 

 From:  Peter (BOUGHTONP)  
 To:  99% of gargoyles look like (MR_BASTARD)     
37448.3 In reply to 37448.1 
Never had to do this, and not in a position to try it out right now, but try setting the min-height on the tr instead?

Another thought, perhaps a tad less icky than divs/imgs: have the first column a zero width td with height:80px, and see if that forces a minimum (whilst potentially allowing others to increase).

If those didn't work, I'd probably go down the jQuery route - pseudo: $j('tr').each( if $j(this).height < 80 { $j(this).height(80) } )

Actually, I'd probably favour that over the empty cols, since it's cleaner markup and this seems a presentation/prettifying issue, so no big prob for non-js clients.
0/0
 Reply   Quote More 

 From:  99% of gargoyles look like (MR_BASTARD)  
 To:  CHYRON (DSMITHHFX)     
37448.4 In reply to 37448.2 

It's a calendar, so I leave it to you as to whether I'm presenting tabular data (for which tables are deprecated) or hacking up a layout. My personal preference for using tables as layout is not to.

 

In this case, I could probably set it out with floating DIVs, but wouldn't be too surprised if the thing fell apart in some browsers.

 

Yes, the DIV in cell trick does work. Slightly less messy than using an IMG, but still not desirable.

 

But, in other news it appears that height is interpreted as a minimum height on table cells anyway, so min-height may be superfluous. I just need to check that this works.

bastard by name, bastard by nature

0/0
 Reply   Quote More 

 From:  99% of gargoyles look like (MR_BASTARD)  
 To:  Peter (BOUGHTONP)     
37448.5 In reply to 37448.3 
That's a good thought, thanks. First I'm going to see if the solution ^ works! :)

bastard by name, bastard by nature

0/0
 Reply   Quote More 

 From:  milko  
 To:  99% of gargoyles look like (MR_BASTARD)     
37448.6 In reply to 37448.5 
http://css-tricks.com/elastic-calendar-styling-with-pure-css/ just nick it.

milko
0/0
 Reply   Quote More 

 From:  Peter (BOUGHTONP)  
 To:  99% of gargoyles look like (MR_BASTARD)     
37448.7 In reply to 37448.4 
Hmm, calendar is more of an ordered list, so ol+li seems appropriate.

I've done a float:left style before for fixed size (i.e. no contents, just day selection) and that was fine in all browser (even IE6). With content and potentially changing heights, the ol+li route would require some JS to determine rows/etc. Not too bad, but not trivial either.
0/0
 Reply   Quote More 

 From:  99% of gargoyles look like (MR_BASTARD)  
 To:  ALL
37448.8 
Thank you, gentlemen. I'm churning this out of a PHP script, so I can use that to determine rows with no problem. The calendar CSS is interesting (and I like the approach of using lists). I'm not sure how they define rows with that (or there's something more to it), something to play with methinks!

bastard by name, bastard by nature

0/0
 Reply   Quote More 

Message 37448.9 deleted 24 May 2015 01:53 by 53NORTH

 From:  Ally  
 To:  Peter (BOUGHTONP)     
37448.10 In reply to 37448.7 
I don't know. I'd argue that dates are not necessarily tabular data, but a calendar is. Going out of your way to avoid using tables seems counter-productive.
0/0
 Reply   Quote More 

 From:  Peter (BOUGHTONP)  
 To:  Ally     
37448.11 In reply to 37448.10 

Depends on the type of calendar - is it ones where the week/day aspect takes priority over the incremental day aspect.

 

For a holiday thing, when you're booking a range of dates, that's probably better list-based.
For an appointment thing, when you're booking times on days, tabular might make more sense.

 

But yeah, I have seen people re-implementing clearly tabular stuff with divs, and that's annoying.

0/0
 Reply   Quote More 

 From:  99% of gargoyles look like (MR_BASTARD)  
 To:  Peter (BOUGHTONP)     
37448.12 In reply to 37448.11 

Actually, the approach that Mike linked to came in for some pretty tough criticism, pretty well founded IMO.

 

A monthly calendar (days along the horizontal axis, weeks on the vertical) is a table layout. That's the approach that I've gone for in the end, although I'm also playing around with a list-based version on the side (although not that one) just for the sheer joy of it.

bastard by name, bastard by nature

0/0
 Reply   Quote More 

 From:  Peter (BOUGHTONP)  
 To:  99% of gargoyles look like (MR_BASTARD)     
37448.13 In reply to 37448.12 
I wasn't saying Mike's link was what to use - although I don't see the tough criticism either? (just some moans about browser support)

A monthly calendar with specific rows/cols is tabular - nobody here is disagreeing with that.

But my point is that one should look at what they're doing and decide, rather than assume that "group of dates" automatically must always mean "monthly calendar".

For more sequential/timeline-based things, when the specific day/week are not the key identifier, using a list makes more sense, since it can be laid out both in grid format and regular 'unwrapped' format, and so on.

If you need both, you could do table for one and list for the other, but the point of semantic markup is that the tags don't change; the stylesheets do.

So of course, you could argue this just highlights the need for a date/calendar tag in HTML, where you specify significant information and let the browser handle everything else for you.


Something like...
html code:
<calendar start="Jun 2010" style="display:grid;visibility:month;" weekend="false">
	<event date="8-Jun-2010">Crazy repeating stuff.</event>
	<event date="2-Jul-2010">Something happens.</event>
	<event from="11-Jun-2010" to="11-Jul-2010">Damned football thing.</event>
</calendar>

html code:
<calendar start="today" limit="3 weeks" style="display:agenda;">
	<event date="8-Jun-2010">Crazy repeating stuff.</event>
	<event date="2-Jul-2010">Something happens.</event>
	<event from="11-Jun-2010" to="11-Jul-2010">Damned football thing.</event>
</calendar>


Heh. Maybe I should try getting them to add that to HTML5. :)
0/0
 Reply   Quote More 

 From:  99% of gargoyles look like (MR_BASTARD)  
 To:  Peter (BOUGHTONP)     
37448.14 In reply to 37448.13 
I wasn't saying Mike's link was what to use

I didn't mean to imply that you did. I was simply agreeing, or something.
although I don't see the tough criticism either? (just some moans about browser support)

Perhaps not as tough as Jeremy Paxman (is he still alive? He was when I left the UK):
quote:
Sorry guys, great proof of concept and all, but a calendar is a table with two axes, weeks and days. It’s all very well to bastardize the ordered list, but why would you when a table already does what you want with minimal fuss.

Especially the fuss regarding body * {display:inline;} (though why you didn’t choose ol.calendar * {display:inline;} escapes me) and having to include display:none on a script element (which the w3c validator doesn’t like in your example).

I have to say, the elasticity of the calendar intrigues me, and I only wonder whether the same thing is possible with a table (surely you can set a table’s width by ems).

Nice idea, but let’s leave a disclaimer to say that no sane person should implement this.

quote:
I would agree with some of the other commenters that a table is indeed more semantically correct for styling calendars – particularly in a grid format where the two axis have semantic meaning. Using ROWSPAN, COLSPAN, THEAD and TH gives a lot of flexibility as well as semantic meaining.

Wow. I never imagined arguing FOR the use of tables, but I think it provides the most semantically rich relationships.

quote:
Let’s not overdo Lists, okay? Tabels do make sense with Calendars…

But then there's always the bubble gum brigade:
quote:
Oh, this is great dude!

For more sequential/timeline-based things, when the specific day/week are not the key identifier, using a list makes more sense, since it can be laid out both in grid format and regular 'unwrapped' format, and so on.

I did try to sell that idea to the client, but she wants a calendar (because everyone else has one) so she will have a calendar.

bastard by name, bastard by nature

0/0
 Reply   Quote More 

 From:  milko  
 To:  99% of gargoyles look like (MR_BASTARD)     
37448.15 In reply to 37448.14 
who's this Mike guy anyway. If I remember it right I just googled calendar CSS and pasted the first link, buyer beware!

milko
0/0
 Reply   Quote More 

 From:  99% of gargoyles look like (MR_BASTARD)  
 To:  milko     
37448.16 In reply to 37448.15 
(hug)

bastard by name, bastard by nature

0/0
 Reply   Quote More 

 From:  Rich  
 To:  99% of gargoyles look like (MR_BASTARD)     
37448.17 In reply to 37448.1 
Hi, sorry for unearthing an old thread, I've been missing for a while and thought I could offer a semblence of help.

You almost hit on the nice-feeling and standards-compliant answer with the 'display:' property in your table style:

quote: 37448.1
CSS code:
        table
        {
            border-collapse: collapse;
            table-layout: fixed;
            display: table;
        }
 


You could use divs which use table-type 'display:' properties so they are formatted as you need:

CSS code:
 
div.calendar
{
        display: table;
}
 
div.week
{
        display: table-row;
        min-height: 3em;
}
 
div.day 
{
        display: table-cell;
        width: 10em;
	height: 3em;
	text-align: right;
	background-color: #C0C0C0;
	overflow: visible;
	border: 1px solid #000000;
	padding: 0.2em;
}
 


Put this into practice:

HTML code:
 
<div class="calendar">
		<div class="week">
			<div class="day">&nbsp;</div>
			<div class="day">&nbsp;</div>
			<div class="day">1</div>
			<div class="day">2</div>
			<div class="day">3</div>
			<div class="day">4</div>
			<div class="day">5</div>
		</div>
		<div class="week">
			<div class="day">6</div>
			<div class="day">7</div>
			<div class="day">8</div>
			<div class="day">9</div>
			<div class="day">10</div>
			<div class="day">11</div>
			<div class="day">12</div>
		</div>
		<div class="week">
			<div class="day">13</div>
			<div class="day">14<br />
				<span style="color: #FF0000">
				<strong>Geoff's birthday.</strong><br /> Must
				remember to buy him a present this year. 
				Last year he cried like a bitch when we 
				all forgot he'd been dropping hints about that 				
				god-awful DVD box-set...</span></div>
			<div class="day">15</div>
			<div class="day">16</div>
			<div class="day">17</div>
			<div class="day">18</div>
			<div class="day">19</div>
		</div>
		<div class="week">
			<div class="day">20</div>
			<div class="day">21</div>
			<div class="day">22</div>
			<div class="day">23</div>
			<div class="day">24</div>
			<div class="day">25</div>
			<div class="day">26</div>
		</div>
		<div class="week">
			<div class="day">27</div>
			<div class="day">28</div>
			<div class="day">29</div>
			<div class="day">30</div>
			<div class="day">31</div>
			<div class="day">&nbsp;</div>
			<div class="day">&nbsp;</div>
		</div>
	</div>
 



Which results in:



As a word of caution, however, CSS doesn't (as far as my experience has shown) support rowspan and colspan, so is ideally suited for things like calendars and tabular data, but not for more fancier layouts which have been where legacy <table/>'s have been useful.




Rich
Web: LostJohnnies.com
Email: rich [at] lostjohnnies [dot] com
MSN Messenger: dexta1984 [at] hotmail [dot] com
____________________________________________________

0/0
 Reply   Quote More 

 From:  CHYRON (DSMITHHFX)  
 To:  Rich     
37448.18 In reply to 37448.17 
I've had better luck using this type of structure:

code:
<div name="row-1" style="white-space:nowrap;">
     <div name="col-1" style="float:left;width:100px;">
     </div>
     <div name="col-2" style="float:left;width:150px;">
     </div>
     <div name="col-3" style="float:left;width:40px;">
     </div>
</div>
<div name="row-2" style="white-space:nowrap;">
     <div name="col-1" style="float:left;width:100px;">
     </div>
     <div name="col-2" style="float:left;width:150px;">
     </div>
     <div name="col-3" style="float:left;width:40px;">
     </div>
</div>


-- It is relatively bullet-proof and standards-compliant across browsers including IE6 <groan>, unlike display:table-cell etc.

On the other hand, it actually makes sense to just use a table for something like a calendar

----
What can't social media do?
  • Make coffee
  • Tie its shoes
  • Spell
0/0
 Reply   Quote More 

 From:  99% of gargoyles look like (MR_BASTARD)  
 To:  Rich     
37448.19 In reply to 37448.17 

Thank you. As Mr Smith observes, display:tablexxx goes to pot with some older (but still widely used) browsers, and a table actually does make sense for a calendar.

 

But the lack of colspan shouldn't be an impediment since the cell width is fixed, so you could just apply another class to override the generic width with another.

bastard by name, bastard by nature

0/0
 Reply   Quote More 

Reply to All    
 

1–19

Rate my interest:

Adjust text size : Smaller 10 Larger

Beehive Forum 1.5.2 |  FAQ |  Docs |  Support |  Donate! ©2002 - 2024 Project Beehive Forum

Forum Stats