Category: CSS

Replacing HTML tables with CSS to improve responsive design

04/08/2015 Aaron Belchamber No Comments

Many websites are still displaying HTML tables with those “<table><tr><td>” tags.  The problem is, try loading a table that looks nice on your desktop computer onto a mobile device and chances are, parts of your table will no longer be visible on screen, or the table will resize and squish the content.  Tables aren’t meant to be resized so drastically, so the best solution would use HTML 5 structure and CSS to help your data look like a table but have the flexibility of breaking out of the table structure in your CSS media queries easily.

Here is a sample of the structure to imitate HTML tables without using those antiquated table tags.

<section style="display: table;">

  <header style="display: table-row;">

    <div style="display: table-cell;"></div>

    <div style="display: table-cell;"></div>

    <div style="display: table-cell;"></div>

  </header>

  <div style="display: table-row;">

    <div style="display: table-cell;"></div>

    <div style="display: table-cell;"></div>

    <div style="display: table-cell;"></div>

  </div>

</section>

 


A CSS Z-Index rule and why it works sometimes and not others

03/15/2014 Aaron Belchamber No Comments

In order for CSS z-index to work properly, the element you are applying the property to can only be “position:absolute” or “position:relative”.  Though Firefox seems to ignore with a wink to the developer and assign z-indexes as intended, this is a common issue especially with older versions of Internet Explorer, IE 9 & IE 10 and Chrome.

I found in the past that z-index is pretty squirrelly, though I’ve always found a work around to get it to work, there always seems to be a browser that won’t show it like the others.  Some developers can mount on their high horse and explain the reasons why, but most will probably admit they’ve had issues with “z-index” and objects not showing up in the browser as reliable as “layers” in Photoshop always does…

 


Center a Div and other HTML blocks

02/26/2014 Aaron Belchamber No Comments

CSS can often be tricky.  What do we need to do to get all those pesky browsers to show things the way we want?!  Sometimes, I marvel at the patience of people who find out, after hours, just how to nudge something properly one way or get the body of text to flow and display just the way they’re asked to do it.  So, something so basic, why is it sometimes so much trouble?  And do we need to write all this just to center a block?!  Why can’t we just say “align:center”?!  Don’t get me started on VERTICAL alignment, that’s not nearly as easy as table cells made such a trick out to be….

Add this to any of your CSS or inline where needed and make sure no other margins are defined:


margin-left:auto;margin-right:auto;

Note:  Be sure a width and height of this block element is also defined!