Major frustration with borders and padding

[oranuf]

Given the following photoshop mockup example:

http://www.advantex.net/images/help/blueprint-css-border-and-padding-problem.jpg

As you can see, the span-14 column has a 1px colored border, and the
content within that column has some padding applied. I have tried
everything I know to do, to get this client's mockup to work in
blueprint. The closest thing I have is similar to the following
markup:

<!--- column --->
<div id="RinColumn21" class="column span-14">

<!--- column border div --->
<div class="column border span-14 last">

<div class="pageHeader span-13 padHalf last">

<div class="span-9">

<h1>Retail Industry News</h1>

<p>
The most relevant headline news, selected
<br>
by RetailWire editors.
</p>

</div>

<div class="span-4 last debug">
<p>links here</p>
</div>

</div>

<div class="span-13 padHalf last">
<p>content here.</p>
</div>

</div>
</div>
<!--- end column21 --->

the column "border" class uses this CSS:

.border {
border: 1px solid #949564;
}

and the padHalf class uses this CSS:

/* to use this, make your content one grid column smaller.
This will pad the content one-half column on top and left (and right,
by way of the span you assign) */
.padHalf {
margin: 20px 0 0 20px
}

This is hacky, and worse, it the next column on the page, to the right
of this one that is span-14, still gets wrapped to the next line in IE
6 and lower.

We need this CSS framework to support the addition of padding and
borders to columns somehow, without getting really hacky... and every
solution I've seen elsewhere when searching this group doesn't seem to
fit my need here.

I've killed an entire day on this, and I still don't have what I
need. Please help!

Thanks much!

[Sunny Beach]

Since borders are added to the outside of any box it will mess up the
alignment of the grid. Those few pixels can throw things off.

This is a sample of how I would do it:
http://www.lendinglibrary.org/

The left version has 20 px of padding on a containing div. The right
version uses the pure grid with append-1 and prepend-1.

The only only hacky thing is the left and right border which is an
image. I made it 20 px tall (I like being able to see them) but it
could be 470x1 px.

The additional CSS is below. The section-border class could be a lot
shorter if you want to combine some of it.

.section-border{
background-image: url(../images/470x20-borders.gif);
background-repeat: repeat-y;
border-top: 1px solid black;
border-bottom: 1px solid black;
}

#padding-inside{
padding:20px;
}

This has been tested in IE6, along with the current Firefox (mac) and
Safari (mac) and it all looks pretty good.

Sunny

> --
> You received this message because you are subscribed to the Google Groups "Blueprint CSS" group.
> To post to this group, send email to bluepr...@googlegroups.com.
> To unsubscribe from this group, send email to blueprintcss...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/blueprintcss?hl=en.
>
>

[kaiser]

Yes, "border"s are added to the outside and "outline"s can´t be
displayed in every browser. i would suggest to add the following
classes for 1px-borders:

.borders { margin: -1px; }
.border-top { margin-top: -1px; }
.border-right { margin-right: -1px; }
.border-bottom { margin-bottom: -1px; }
.border-left { margin-left: -1px; }

optional you could write a plugin that covers for ex. border-top, -
right, -bottom, -left for -1px to -10px/-18px (horizontal/vertical)
and boders from -1px to -30px;

that way would cover all your needs with classes that you could apply
to get your block-elements back into the grid.

additions are welcome.

regards, kaiser.

[da]

> We need this CSS framework to support the addition of padding and
> borders to columns somehow, without getting really hacky... and every
> solution I've seen elsewhere when searching this group doesn't seem to
> fit my need here.

If you find such a thing, please share!

This is just how most of the grid frameworks work. Widths are being
declared in a way that borders and padding will disrupt the logic
especially if you begin to nest objects.

The only real fix is to expand the CSS to accommodate your specific
needs. Alas, it'd be hard to do that generically without massively
bloating the CSS.

-DA

[Chris Eppstein]

oocss has a nice, x-browser solution to this problem, but it requires additional markup. Basically you have containers that never have any borders, padding, or margin, and then you have skin elements that reside inside the containers that provide margin, outline, border, and padding, and then you have content markup  that lives inside of that.

Luckily, CSS3 has a number of attributes that change the way calculations are performed and eliminates a number of these issues. See: box-sizing http://www.css3.info/preview/box-sizing/

Chris

[kaiser]

As i said above: adding a border like this in your custom css keeps
your framework from beeing "hacky":

.borders {
border: 1px solid #eee;
margin: -1px;
}
.border-top {
border-top: 1px solid #eee;
margin-top: -1px;
}
.border-right {
border-right: 1px solid #eee;
margin-right: -1px;
}
.border-bottom {
border-bottom: 1px solid #eee;
margin-bottom: -1px;
}
.border-left {
border-left: 1px solid #eee;
margin-left: -1px;
}

This matches .border and .colborder too.

Regards, K.
P.s.: I would suggest to add this to blueprint in the next version.
You should change hr from #ddd to #eee too, to make the greys match
better.

Pps.: OOCSS is a really good and nice, but in some parts pretty
overdone sollution for FLUID grids only. So it´s no competant to
blueprint. (But thanks for pointing me on that.)

[Chris Eppstein]

The .border-right class would interfere with .span-xx classes. I also question the utility of such classes when the width and color are both pre-determined. I'm also pretty sure that it will not work as expected with .prepend-xx and .append-xx because those use padding and so your border will be outside the prepended/appended columns.

Regarding OOCSS, I wasn't suggesting that you change from blueprint, but rather learn from the concepts which are there to adapt to the strange box-model interactions like this one. OOCSS is less of a framework like blueprint, and more of an "approach".

In short: if you want composable classes, you need more markup to address the "skin" of your columns (until box-sizing is broadly adopted by the browsers).

chris

--

[24/7]

Hi Chris,

 

you´re right when it comes to my border-right class. It doesn´t make sense in a second case. The blueprint border-class is exactly the same in it´s result. So i would suggest to leave border-right out, but: i´m still trying to convince you on the border-classes. They would make the boder/colborder/hr classes and definitions just complete. I´m using borders, border-top and border-bottom in my basic-stylesheets and some other useful stuff too. I´m posting it here to hear what you (and anyone else) think of it.

 

Note: They are not only bp-related/have anything to do with a grid.

 

----------------------------

 

/* To avoid dotted lines attached by browsers – they won´t work everywhere but in a lot of cases */

a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; border: none; outline: none; }

button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: none; padding: 0; }

 

.white-text, .white-text * { color: #fff; }

.kern-neg { letter-spacing: -0.1em /* reduce kerning in special cases with large heading */ }

.kern-pos { letter-spacing: 0.1em }

 

----------------------------

 

Btw: (saw that while writing:) append-top und prepend-bottom have margin instead of padding added. Maybe it would be a good idea to change this to padding and add another two classes for margin: push-top, push-bottom and maybe (but i can´t think of any case they would be needed) pull-top and pull-bottom.

 

That´s it.

 

[da]

> We need this CSS framework to support the addition of padding and
> borders to columns somehow, without getting really hacky... and every
> solution I've seen elsewhere when searching this group doesn't seem to
> fit my need here.

I ended up needing borders this week and looked into two potential
options.

One is to use CSS3's outline. Outline, unlike border, does not take
away from the content width so doesn't disrupt the math logic of
blueprint's span-x when nesting them. We opted not to use this for two
reasons. 1, we're still stuck supporting IE and 2, we wanted rounded
corners. While Firefox does support rounding of outline, it doesn't
crop the background like border rounding does.

The other option, which is what I'm working on, is a variation on what
kaiser is using with the negative margins.

I created a new class to add to any span-x you want to add a border
to:

.span-border {
border: 1px solid red;
margin-left: -1px;
margin-right: 9px;
}

margin-left = width of your border
margin-right = standard gutter width minus the width of your border

The only catch with this in our scenario is that we like to use
'overflow: hidden' + 'width: 100%' to wrap our rows in (allows for
clearing of the span-x). That means any nested span-x bordering the
left or right of the wrapper will loose the border on the outside. To
remedy that, we added a span-border-first and span-border-last to
nudge that particular span-x in/out 2px to account for that. Not
ideal, but works fairly well.

The main benefit is that this still preserves the span-x logic when
nesting.

-DA

[24/7]

About the wrap for the rows: Did you already see the .clear and .clearfix
classes?

-----Ursprüngliche Nachricht-----
Von: bluepr...@googlegroups.com [mailto:bluepr...@googlegroups.com] Im
Auftrag von da
Gesendet: Montag, 15. Februar 2010 03:16
An: Blueprint CSS
Betreff: [BP #3839] Re: Major frustration with borders and padding

-DA

--

[da]

> About the wrap for the rows: Did you already see the .clear and .clearfix
> classes?

Yea. Part of it is habit to do it the way we're doing. I should look
at switching to the formal Blueprint way, I suppose...

-DA

[aurorius]

Hello, sorry for digging an old thread, but this one seems like the best solution for div's border problem, or is there any new update?