Block Titlebar Height

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

I'm thinking of using this so titles which are wider than the h3 element can drop to a new line while keeping the ".block" cells aligned when there's long and short titles on the same row.

Looks as expected in FF3.5 and OP10 on Ubuntu, but I don't plan on jumping into Windows for a few days as I still have a lot of backend stuff to do.

Anything sticking out like a sore thumb for anyone ? :D

CSS Code: [ Select ]
.block
{
   margin:0 0 20px 10px;
   float:left;
   width:215px;
   background:#eee;
   border:#cce 1px solid;
   border-top:0;
   font-size:16px;
   text-align:center;
}
.block h3
{
   font-size:0.8em;
   line-height:1.2em;
   min-height:2.4em;
   color:#fff;
   text-shadow:#000 1px 1px;
   margin:0;
   padding:2px 2px 5px 2px;
   background:url("./images/bar-blue.gif") repeat-x center left;
}
  1. .block
  2. {
  3.    margin:0 0 20px 10px;
  4.    float:left;
  5.    width:215px;
  6.    background:#eee;
  7.    border:#cce 1px solid;
  8.    border-top:0;
  9.    font-size:16px;
  10.    text-align:center;
  11. }
  12. .block h3
  13. {
  14.    font-size:0.8em;
  15.    line-height:1.2em;
  16.    min-height:2.4em;
  17.    color:#fff;
  18.    text-shadow:#000 1px 1px;
  19.    margin:0;
  20.    padding:2px 2px 5px 2px;
  21.    background:url("./images/bar-blue.gif") repeat-x center left;
  22. }
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

I'm not sure exactly what your trying to do, but it looks pretty standard to me. I don't think text shadow will work in IE but it shouldn't break anything. You may run into an issue where your width is actually 217px due to the border being added. That in turn could cause some funny wrap/floats.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

joebert is this something for your user stylesheet or for your site?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Here's a screenshot from Firefox 3.5, if I drop that min-height then the two one-liners in this screenshot collapse and there's a gap under those blocks on the next row.

I'm aware that both text-shadow and the various border-radius (see NOTE) rules aren't going to work everywhere.
There's a few pixels of leeway on the right side to account for box-model funkiness.

I guess the main things I'm worried about are the min-height and font/line-size/height related rules.
I'm pondering dropping min-height and going with height.

Attachments:
Untitled-1.gif


NOTE: Because of needing three rules for each border-radius property I have them all at the end of the CSS with each selector that uses them. That's why you don't see them in that code. :D
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

It's for a site, not user.css :D

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 64 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.