Archive for the 'CSS' Category

Simulate collapsed borders with DIVs

I had a situation where I wanted to have a number of boxes, arranged in rows of up to 3, in a table-like layout, but using floated DIVs instead of a table.  The problem is, when you add borders around the boxes using DIVs, they “double up” where DIVs are next to each other.  Using a table layout instead, you could specify border-collapse:collapse; and that situation goes away.  It does not appear to do so for DIVs.  Here’s an illustration:

floatingboxes_problem

Notice the area in the green rectangle.  The borders where the DIVs adjoin are clearly visually thicker than the outer borders where no other DIV adjoins.

My initial styling looked like:

            div.boxcontainer {
                width: 561px;
                font-size:large;
                text-align:center;
                background-color:#ffffff;
                float:left;
                margin-left: 10px;
            }

            div.campaignbox {
                float: left;
                width: 185px;
                height: 185px;
                background-color: #def;
                margin:0x;
                padding:0px;
                border: 1px solid #aaa;        
            }                
                
            div.oneLine {
                margin-top:80px;
            }
            div.twoLines {
                margin-top:70px;
            }
            div.threeLines {
                margin-top:60px;
            }
            div.fourLines {
                margin-top:50px;
            }
            div.fiveLines {
                margin-top:40px;
            }

And my example markup for the boxes shown in the image above like this:

<div class="boxcontainer">

    <!-- insert new items here, at the top of the list: -->

    <div class="campaignbox">
        <div class="twoLines">
            <a href=".">My top-left<br />bx</a>
        </div>
    </div>
    <div class="campaignbox">
        <div class="threeLines">
            <a href=".">Example<br />three<br />liner</a>
        </div>
    </div>
    <div class="campaignbox">
        <div class="oneLine">
            <a href=".">Cool Stuff Here</a>
        </div>
    </div>
    <div class="campaignbox">
        <div class="threeLines">
            <a href=".">Well<br />hello<br/>there</a>
        </div>
    </div>
    <div class="campaignbox">
        <div class="fiveLines">
            <a target="_blank" href=".">This<br />Box<br />Has<br />Much<br />to Say</a>
        </div>
    </div>

</div> <!-- boxcontainer    -->

After some googling and a bit of trial-and-error, I adapted this technique for my own use.

Basically the only thing I needed to change was the campaignbox style.  I replaced the border attribute with the box-shadow as described in the article I linked above:

            div.campaignbox {
                float: left;
                width: 185px;
                height: 185px;
                background-color: #def;
                margin:0x;
                padding:0px;
                  /* And here comes the trick to collapse
                     the borders.  Based on: http://codepen.io/Hawkun/pen/rsIEp */
                  box-shadow: 
                    1px 0 0 0 #AAA, 
                    0 1px 0 0 #AAA, 
                    1px 1px 0 0 #AAA,   /* Just to fix the corner */
                    1px 0 0 0 #AAA inset, 
                    0 1px 0 0 #AAA inset;
            }

Everything else stayed the same, but now my borders are properly collapsed, as shown below:

floatingboxes_fixed

Advertisements

Top 20 Essential Firefox Add-ons for Web Devs

Here’s a handy listing of 20 Essential FF Add-ons for Web Designers (and Developers, IMHO).

Some of these I already know about and use a few (Firebug, Web Developer, IE Tab, YSlow), but I intend to add a few more to toolbox (Window Resizer, Page Diff, CSS Viewer).  The rest seem to either not very useful to me personally, or are duplicates of functionality I already get from Firebug and/or Web Developer, but hey, YMMV!

Be sure to hit up the hyperlink above for the full blog post!

ebook: 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls

This book sounds like it will be really practical and useful!  The author tackles issues he’s faced using jQuery with ASP.net controls, and highlights useful combinations of the two.  You can pre-order the ebook today for $10!

51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls

Thanks for the tweet, Dave.  I’m going to go order mine now…

Hanselman’s MultiBrowser or CrossBrowser Testing Article

In this article, Scott Hanselman talks about 3 techniques he uses to test his sites in a variety of browsers (FF, IE) and versions (IE6, 7, 8).  Where I work right now I build intranet apps and we are (sadly) standardized on IE6, so this is of limited use to me at the moment, but you never know when things might change, so I’m linking this here for my own future reference…  …or for you, my dear reader(s).  🙂

MultiBrowser or CrossBrowser Testing and deconstructing Microsoft Expression Web SuperPreview

Always set a width when floating an element!

Hint: always set a width when floating an element via CSS.

Learned that the hard way today.  Twice.

If the floated element does not have a pre-defined width, it will take up as much horizontal space as required and available, regardless of the float. Note: some browsers attempt to place elements beside floated elements when the width isn’t defined – usually giving the non-floated element only a small amount of space. So you should always define a width on floated elements.

Quote from: Understanding Floating article on about.com.

A second helping of CSS

Hot on the heels of the massive CSS Roundup I just posted about, I discovered @elijahmanor recently tweeted 15+ CSS Tips and Tricks.

Some highlights:

  • Want to force or suppress pagination at certain spots on your page when printing?  See #12.
  • CSS has the ability to transform text to lowercase, uppercase and capitalized the first character of a word.  See #5
  • Remember that annoying textarea scrollbar that display by default in IE? Yes, we can remove it.  See #13.
  • Want a block of text to never wrap, no matter how wide it renders?  See #11.
  • Need to brush up on your CSS Shorthand?  See #17.

Click me for the full list.

More CSS than you can shake a stick at…

Great news!  I’m finally getting it—CSS really is sexy!

Thanks to @sqlbelle for tweeting the link to this amazing Mega CSS Resource Roundup, including cheatsheets, tips, techniques, etc.  Very cool.

Here’s a few cool highlights:

There’s so much more I didn’t even touch on, so please check out the full roundup.


Scott’s recent tweets…

Error: Twitter did not respond. Please wait a few minutes and refresh this page.