prepend-x class in IE

[acng...@gmail.com]

I created a new page based on your framework today, and holy cow, I've
never laid out a page so fast. The framework is extremely friendly to
use. Very nice work.

It just happened that I was basing a re-design of my personal Web site
on a grid very close to the default grid in the BP package. Getting
the layout on the grid was not a problem, but I ran into unexpected
trouble in a couple of places. I'll try to explain as best as I can
here. To see the web page I'm talking about, go to http://www.cyyan.net/home.html

My biggest issue was IE6 rendering one-column divs which start with
the *prepend-x* class. It seems to only happen with paragraph <p>
text.

When I first saw the IE6 rendering issue in #1) above, I immediately
went to the Blueprint homepage and checked in IE6 the following
BluePrint example pages:

- "A demonstration of the grid" (http://bjorkoy.com/blueprint/
test2.html) and
- "Sample website built with BP" (http://bjorkoy.com/blueprint/
test.html)

In IE6, the "A demonstration of the grid" page rendered perfectly,
however there were not any div columns which open up with the
*prepend-
x* class.

The "Sample website built with BP" has a column which opens up with
the *prepend-x* class and the positioning is actually live with an
offset sidebar column.

I think this is an important issue to get worked out. Probably more
important than transparent PNGs. My hypothesis is padding and margins
in IE.

[chrisb]

After experiencing this same issue and having a quick look it looks to
me that the problem is due to IE getting confused when only the
padding-left and padding-right attributes are reset by the append-x/
prepend-x classes. Seems that perhaps by only re-declaring the right
or left margin, the others are perhaps reset to the browser default?

If you change your ~/blueprint/lib/grid.css file to update each of
these classes to the full (short-form) padding declaration, the
problems are resolved -- for me anyway (I'm testing using IE 6.0).

.append-1 { padding-right: 70px; }
.append-2 { padding-right: 140px; }

modified to:

.append-1 { padding: 0 70px 0 0; }
.append-2 { padding: 0 140px 0 0; }

...

.prepend-1 { padding-left: 70px; }
.prepend-2 { padding-left: 140px; }

modified to:

.prepend-1 { padding: 0 0 0 70px; }
.prepend-2 { padding: 0 0 0 140px; }

I have not tested this revision in anything other than IE6.0 at this
stage. Any feedback for compatibility with other browsers would be
appreciated..

On a general note: I'd just like to say that this is a brilliant
framework, can't wait to implement.

Thanks.

On Aug 10, 7:04 am, "acngu...@gmail.com" <acngu...@gmail.com> wrote:
> I created a new page based on your framework today, and holy cow, I've
> never laid out a page so fast. The framework is extremely friendly to
> use. Very nice work.
>
> It just happened that I was basing a re-design of my personal Web site
> on a grid very close to the default grid in the BP package. Getting
> the layout on the grid was not a problem, but I ran into unexpected
> trouble in a couple of places. I'll try to explain as best as I can

> here. To see the web page I'm talking about, go tohttp://www.cyyan.net/home.html

[Olav]

This will be fixed in tomorrow's new release. Thanks for your work. :)

Olav

[acng...@gmail.com]

I tried chrib's solution, with no success.

What worked for me was to explicitly define the widths for the
paragraph (p) class of the div.

#content p{ width:540px;)

What could I do to make sure that the paragraph classes inherit their
parent div's span-class properly in Internet Explorer?