August 22, 2012 - <h1>, CSS resets, Bootstrap, and Forms

A place to discuss things that were on our weekly Web Wednesdays show

August 22, 2012 - <h1>, CSS resets, Bootstrap, and Forms

Postby raw10 » Wed Aug 22, 2012 5:56 pm

Greetings, fellow hangouters!

This week, Web Wednesday was brought to you by the <h1> tag, who reminds you to keep it short, sweet, and unique. The <h1> is for titles and top level page elements, and never for large blocks of text. You usually only want one or maybe two <h1>s on a given page.

There were a few specific questions that folks had, so here are some links and recommendations.

Linking MagicEdit Images

Sandy had a question about how to manage banner ads using MagicEdit. A simple approach would be to have an editable link and an editable image together like so:

Code: Select all
<div class="banner">
  <a magicedit me_name="bannerLink" href="#" target="_blank">
    <img magicedit me_name="bannerImage" src="" width="600" height="120" alt="banner" />

You need to deal with how the edit buttons show up, since by default both of them sit on top of each other. A simple style declaration fixes this:

Code: Select all
.banner .me_editImageButton a {

Here's the result when logged in:


Now you have an easily managed linked banner image!

Extra Space in Table Cell

Our next discussion was around why extra white space was showing up inside table cells. I have to issue a correction here because I said something about <div> elements having a default margin and/or padding. Vitaliy corrected me that <div>s have no margin or padding, but <p> tags do. So the problem we saw was with the <p> tag alone. Get rid of those tags and you're probably good (always best to test across browsers nevertheless).

Regardless, it's usually good to normalize your HTML styles with a CSS reset like Eric Meyer's ( or Normalizr ( More on the history of CSS resets can be found here:

Twitter Bootstrap Margins

Eric had a question about how Twitter Bootstrap was dealing with margins as a site is scaled down to mobile resolutions. I played with this a bit after the Hangout and found that overriding the default styles as follows works pretty well (in this case):

Code: Select all
body {
  padding: 0;

.container {
  padding: 0 20px;

Now the body will always have 0 padding even when the Bootstrap media query sets the body margin. Just make sure that the .container element wraps the content on each page (looks like it does). This keeps the content from running right up against the edge of the viewport. I hate it when that happens.

MagicEdit Forms

Again, some MagicEdit functionality here. If you want to know all of the various features supported on MagicEdit forms, here's an example of all of them in one shot:

Code: Select all
  me_subject="An email from your website!"

Note that if you have a field in the form with name="email", it will override the "me_from" value so that you can just hit "reply" to respond directly to the submitter. How convenient!

If you want some more documentation, follow this link:

Anyway, this will tabulate the data sent in the form and email it, save it to a CSV file, and send the browser over to the "thankyou.html" page. A fun trick at this point is to submit the form using AJAX, then just grab some content off of the returned page and display it where the submission form is without reloading the page. But that's an exercise for another day.

Thanks for tuning in, and see you next week!
Posts: 81
Joined: Tue Apr 12, 2011 2:46 pm

Re: August 22, 2012 - <h1>, CSS resets, Bootstrap, and Forms

Postby sandyhon! » Thu Aug 23, 2012 12:15 pm

Thanks guys! This is very helpful.
Posts: 18
Joined: Sun Jun 24, 2012 5:24 pm

Return to Web Wednesdays

Who is online

Users browsing this forum: No registered users and 1 guest