Column reordering using pull/push on IE 6
12 views
Skip to first unread message
junipllc
Mar 28, 2009, 2:25:14 PM3/28/09
to Blueprint CSS
I just had a blast using BP to lay out a new site, however I am
running into a brick wall...of course it's IE.
For search engine reasons I'm attempting to reorder the columns of my
layout so that it is marked up in the "Content, Left Sidebar, Right
Sidebar" order but displays in the "Left Sidebar, Content, Right
Sidebar" order. It works flawlessly with FF, Opera, Safari, IE7 but
for some reason not IE6. The columns are shifted around aimlessly left
right up and down. Other than the skeleton code, css includes,
doctype, yadda yadda, this is what I'm putting in the body:
---
<div class="container">
<div class="span-14 push-5">content</div>
<div class="span-5 pull-19">left</div>
<div class="span-5 last">right</div>
</div>
---
"left" is moved over to the right several columns, "content" is moved
over to the right margin, and "right" is moved down to the next line
on the left. Playing with the pushes and pulls only tends to aggravate
the IE6 monster into doing unexpected things.
Am I missing something?
Thanks,
Mike
running into a brick wall...of course it's IE.
For search engine reasons I'm attempting to reorder the columns of my
layout so that it is marked up in the "Content, Left Sidebar, Right
Sidebar" order but displays in the "Left Sidebar, Content, Right
Sidebar" order. It works flawlessly with FF, Opera, Safari, IE7 but
for some reason not IE6. The columns are shifted around aimlessly left
right up and down. Other than the skeleton code, css includes,
doctype, yadda yadda, this is what I'm putting in the body:
---
<div class="container">
<div class="span-14 push-5">content</div>
<div class="span-5 pull-19">left</div>
<div class="span-5 last">right</div>
</div>
---
"left" is moved over to the right several columns, "content" is moved
over to the right margin, and "right" is moved down to the next line
on the left. Playing with the pushes and pulls only tends to aggravate
the IE6 monster into doing unexpected things.
Am I missing something?
Thanks,
Mike
speedunk
Mar 28, 2009, 3:48:10 PM3/28/09
to Blueprint CSS
Hi Mike....
The infamous double margin bug creeps it's ugly mug into the picture
again!!! Luckily, it's a simple fix though.
I'm not sure if this is documented in the BP source, but it definitely
should be considered...
Add to the ie.css stylesheet
.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24
{display:inline;}
.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24
{display:inline;}
Fixes the double margin for good :)
Sean K. Stewart
The infamous double margin bug creeps it's ugly mug into the picture
again!!! Luckily, it's a simple fix though.
I'm not sure if this is documented in the BP source, but it definitely
should be considered...
Add to the ie.css stylesheet
.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24
{display:inline;}
.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24
{display:inline;}
Fixes the double margin for good :)
Sean K. Stewart
junipllc
Mar 28, 2009, 7:08:43 PM3/28/09
to Blueprint CSS
Hi Sean,
Thanks so much for your reply, it did the trick. I checked out the
source that I have here and I didn't see anything in particular except
for something relating to ' * html ', not quite sure what it is or if
it's relevant.
<sarcasm>Wow do I love IE!!</sarcasm>
If this issue is, indeed, documented somewhere could somebody point me
to it? I must have missed a wiki somewhere.
Either way, thank you again. I can finally move ahead with my
projects!
Best,
Mike
Thanks so much for your reply, it did the trick. I checked out the
source that I have here and I didn't see anything in particular except
for something relating to ' * html ', not quite sure what it is or if
it's relevant.
<sarcasm>Wow do I love IE!!</sarcasm>
If this issue is, indeed, documented somewhere could somebody point me
to it? I must have missed a wiki somewhere.
Either way, thank you again. I can finally move ahead with my
projects!
Best,
Mike
Graham Evans
Mar 29, 2009, 4:30:19 AM3/29/09
to bluepr...@googlegroups.com
speedunk wrote:
> Hi Mike....
>
> The infamous double margin bug creeps it's ugly mug into the picture
> again!!! Luckily, it's a simple fix though.
> I'm not sure if this is documented in the BP source, but it definitely
> should be considered...
>
> Add to the ie.css stylesheet
> .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24
> {display:inline;}
> .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24
> {display:inline;}
>
> Fixes the double margin for good :)
>
Has anyone found a situation which means this can't be part of the > Hi Mike....
>
> The infamous double margin bug creeps it's ugly mug into the picture
> again!!! Luckily, it's a simple fix though.
> I'm not sure if this is documented in the BP source, but it definitely
> should be considered...
>
> Add to the ie.css stylesheet
> .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24
> {display:inline;}
> .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24
> {display:inline;}
>
> Fixes the double margin for good :)
>
default ie.css ?
Graham
Christian Montoya
Mar 29, 2009, 11:42:10 AM3/29/09
to bluepr...@googlegroups.com
On Sat, Mar 28, 2009 at 2:25 PM, junipllc <juni...@gmail.com> wrote:
>
> I just had a blast using BP to lay out a new site, however I am
> running into a brick wall...of course it's IE.
>
> For search engine reasons I'm attempting to reorder the columns of my
> layout so that it is marked up in the "Content, Left Sidebar, Right
> Sidebar" order but displays in the "Left Sidebar, Content, Right
> Sidebar" order. It works flawlessly with FF, Opera, Safari, IE7 but
> for some reason not IE6. The columns are shifted around aimlessly left
> right up and down. Other than the skeleton code, css includes,
> doctype, yadda yadda, this is what I'm putting in the body:
>
> ---
>
> <div class="container">
> <div class="span-14 push-5">content</div>
> <div class="span-5 pull-19">left</div>
> <div class="span-5 last">right</div>
> </div>
>
> I just had a blast using BP to lay out a new site, however I am
> running into a brick wall...of course it's IE.
>
> For search engine reasons I'm attempting to reorder the columns of my
> layout so that it is marked up in the "Content, Left Sidebar, Right
> Sidebar" order but displays in the "Left Sidebar, Content, Right
> Sidebar" order. It works flawlessly with FF, Opera, Safari, IE7 but
> for some reason not IE6. The columns are shifted around aimlessly left
> right up and down. Other than the skeleton code, css includes,
> doctype, yadda yadda, this is what I'm putting in the body:
>
> ---
>
> <div class="container">
> <div class="span-14 push-5">content</div>
> <div class="span-5 pull-19">left</div>
> <div class="span-5 last">right</div>
> </div>
Not sure if it will solve the problem, but this is how I would have done it:
<div class="container">
<div class="span-19">
<div class="span-14 last reverse">content</div>
<div class="span-5 reverse">left</div>
</div>
<div class="span-5 last">right</div>
</div>
.reverse { float:right; }
--
--
Christian Montoya
mappdev.com :: christianmontoya.net
speedunk
Mar 30, 2009, 8:00:31 PM3/30/09
to Blueprint CSS
Yo Mike....
The * html is a hack to target IE6 or less. I still use it in my IE
specific stylesheets, but I don't think it should be used too much
since it is technically a hack.
The * html is a hack to target IE6 or less. I still use it in my IE
specific stylesheets, but I don't think it should be used too much
since it is technically a hack.
speedunk
Mar 30, 2009, 8:07:18 PM3/30/09
to Blueprint CSS
Hey Christian...
Sweet trick to get the layout to work in IE6. It removes the * html
hack
I'll have to remember that for upcoming projects. Thanks
---
Sean K. Stewart
On Mar 29, 11:42 am, Christian Montoya <siro...@gmail.com> wrote:
Sweet trick to get the layout to work in IE6. It removes the * html
hack
I'll have to remember that for upcoming projects. Thanks
---
Sean K. Stewart
On Mar 29, 11:42 am, Christian Montoya <siro...@gmail.com> wrote:
Jesse Collins
Apr 8, 2009, 10:57:55 PM4/8/09
to Blueprint CSS
Thank you for this post! Just what I was looking for.
> Hi Mike....
>
> The infamous double margin bug creeps it's ugly mug into the picture
> again!!! Luckily, it's a simple fix though.
> I'm not sure if this is documented in the BP source, but it definitely
> should be considered...
>
> Add to theie.css stylesheet
>
> The infamous double margin bug creeps it's ugly mug into the picture
> again!!! Luckily, it's a simple fix though.
> I'm not sure if this is documented in the BP source, but it definitely
> should be considered...
>
> .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24
> {display:inline;}
> .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24
> {display:inline;}
>
> Fixes the double margin for good :)
>
> Sean K. Stewart
>
> On Mar 28, 2:25 pm, junipllc <junip...@gmail.com> wrote:
>
> > I just had a blast using BP to lay out a new site, however I am
> > running into a brick wall...of course it'sIE.
>
> > For search engine reasons I'm attempting to reorder the columns of my
> > layout so that it is marked up in the "Content, Left Sidebar, Right
> > Sidebar" order but displays in the "Left Sidebar, Content, Right
> > Sidebar" order. It works flawlessly with FF, Opera, Safari, IE7 but
> > for some reason not IE6. The columns are shifted around aimlessly left
> > right up and down. Other than the skeleton code, css includes,
> > doctype, yadda yadda, this is what I'm putting in the body:
>
> > ---
>
> > <div class="container">
> > <div class="span-14push-5">content</div>
> {display:inline;}
> .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24
> {display:inline;}
>
> Fixes the double margin for good :)
>
> Sean K. Stewart
>
> On Mar 28, 2:25 pm, junipllc <junip...@gmail.com> wrote:
>
> > I just had a blast using BP to lay out a new site, however I am
> > running into a brick wall...of course it'sIE.
>
> > For search engine reasons I'm attempting to reorder the columns of my
> > layout so that it is marked up in the "Content, Left Sidebar, Right
> > Sidebar" order but displays in the "Left Sidebar, Content, Right
> > Sidebar" order. It works flawlessly with FF, Opera, Safari, IE7 but
> > for some reason not IE6. The columns are shifted around aimlessly left
> > right up and down. Other than the skeleton code, css includes,
> > doctype, yadda yadda, this is what I'm putting in the body:
>
> > ---
>
> > <div class="container">
Reply all
Reply to author
Forward
0 new messages