IE7 display bug

[Stefan Frede]

Hi!

Is anyone having similar problems with IE7 and columns? Problem is that in iE7 the main column is floating over my left column (see attachment).

Here is a live demo: http://www.local.experteer.de:3000/account/signup_l/googleab/lp21
The code is not actual anymore but you can see this IE7 behavior there.

Regards,
Stefan

[Stefan Frede]

Sorry, wrong URL. Here is the right one:
http://www.experteer.de/account/signup_l/googleab/lp21

Stefan

> <IE7.png>

[brad dunbar]

I'm having similar issues with IE7. I'll be working on fixes this
weekend and I'll be sure to update you with what I've got.

-brad

[brad dunbar]

I have the same problem at http://blfp.net, but haven't been able to
fix it quite yet. The tabs are also broken, but I'm working on a fix
for those as well.

[brad dunbar]

Ok, I think I've solved this. The issue is with the following lines:

/* tabs.css */
.tabs .hd li{display:table-cell;_display:inline;vertical-
align:middle;}

/* template.css */
.body, .main{display: table-cell;
*display:block;_position:relative; _left:-3px; _margin-right:
-3px;width:auto; _zoom:1;}

For tabs, IE7 does not support display:table-cell, so _display:inline
needs to be changed to *display:inline to include IE7 as well as IE6.
As for the .body and .main selectors, it appears to be a hasLayout
issue. Changing _zoom:1 to *zoom:1 fixes the issue for my use case.
The amended lines are as follows:

/* tabs.css */
.tabs .hd li{display:table-cell;*display:inline;vertical-
align:middle;}

/* template.css */
.body, .main{display: table-cell;
*display:block;_position:relative; _left:-3px; _margin-right:
-3px;width:auto; *zoom:1;}

I will also send a pull request to Nicole for the commit at
http://github.com/braddunbar/oocss/commit/d3bc9754d525d88962ed47de7cc2fffed4b7eaea.

On Dec 19, 5:28 pm, brad dunbar <dunba...@gmail.com> wrote:
> I have the same problem athttp://blfp.net, but haven't been able to

[Stefan Frede]

Thanks a lot. I tried it and it is also working in my case.

Stefan

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

[Nicole Sullivan]

Nice work!

:)

Nicole

--

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

--

Nicole Sullivan

Object Oriented CSS  http://wiki.github.com/stubbornella/oocss

Smush it  http://smush.it

Website  http://stubbornella.org

Tweet!  http://twitter.com/stubbornella

Book  Even Faster Websites with O'Reilly