Grids and Opera

[Stefano J. Attardi]

As you probably know, grids are currently broken in Opera:

http://grab.by/BMd

I might be the minority here, but as a regular Opera user I couldn't
live with my site not being in the 99% of the sites that Opera
displays correctly.

So I looked for the simplest fix I could find. All I had to do was
remove the float and width properties from the .lastUnit class:

.lastUnit {display: table-cell; *display:block;*zoom:
1;_position:relative; _left:-3px; _margin-right: -3px; }

I don't know why they were there in the first place. I didn't see any
regressions, but I didn't test very thoroughly. If necessary, it's
possible to use a hack to hide those two declarations from Opera only.

I would be really grateful if this could be fixed in the official
repository. I will be able to sleep again, knowing that we're not the
ones to blame for breaking the web in Opera. ;)

Cheers,
Stefano

[Murray Nuttall]

Hello,
Which version of Opera? I am using 10.01 and they are displaying fine.

m.

--

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=.

[Murray Nuttall]

Ah... I'm not really sure how this git thing works, but the parent copy works fine in opera.

I think this might be the line mucking opera up on the latest:

.lastUnit:after{content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";visibility:hidden; clear:both;height:0 !important;display:block;line-height:0;}

m.

On Tue, Nov 17, 2009 at 1:07 PM, Stefano J. Attardi <ste...@attardi.org> wrote:

[Stefano J Attardi]

I'm also using 10.01.

I'm talking about the latest version of OOCSS, the one that uses
display: table-cell instead of overflow: hidden.

Yes, it has some :after stuff, I believe that was added specifically
to fix some problems with Opera not clearing floats with display:
table-cell. It doesn't fix the lastUnit jumping to the following line
though.

Stefano

[Antonio P. P. Almeida]

I can confirm Stefano's findings about the .lastUnit issue. I'm using
Opera 10.01 on GNU/Linux Debian Squeeze built with Qt library 3.3.8b

I have the git repo cloned in my machine and this is the last commit
for grids.css


SHA1: c854deb73daea2bd4a792c97f42d7768d3f12d28
Parent: zoom for IE6
Author: Stubbornella <nic...@stubbornella.org>
Date: Set 26 22:46:57 2009 +0100
Summary: :after to open the last unit w sm content


--- appa

[Antonio P. P. Almeida]

On 17 Nov 2009 01h56 WET, murray....@gmail.com wrote:

[Nicole Sullivan]

I was aware of the opera issue, but the solution I had found has side-effects I'm not happy with. Setting line to display: table-row, and each unit to display table-cell. This fixes individual lines, but they start having weird effects when stacked next to one another. Like a normal table would. I really don't want to add new markup (another wrapper), so that solution won't be good enough.

Removing width auto and float none eliminates the adaptation to sub-pixel rounding errors in Opera. Maybe that is ok if it does its math well and the units always take the space they should.

Here is a commented version of the code so you can see what each piece does:

/* **************** GRIDS ***************** */

/* YUI clearfix ++

*/

.line:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

/*

add generated textual content to push open the last unit to the max

available width. This content is not in the DOM.

*/

.lastUnit:after{content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";visibility:hidden; clear:both;height:0 !important;display:block;line-height:0;}

/* clearfix for IE */

.line{*zoom:1;}

/* make all the little units line up */

.unit{float:left;}

/* full width unit will be 100% width as long as it isn't floated */

.size1of1{float:none;}

/* set other widths */

.size1of2{width:50%;}

.size1of3{width:33.33333%;}

.size2of3{width:66.66666%;}

.size1of4{width:25%;}

.size3of4{width:75%;}

.size1of5{width:20%;}

.size2of5{width:40%;}

.size3of5{width:60%;}

.size4of5{width:80%;}

.lastUnit {

/* 

last unit gets a new formatting context 

(options: overflow hidden and auto, display table-cell, zoom) 

New formatting context resolves subpixel rounding errors

*/

display: table-cell; 

/*

zoom (has layout) gives a new formatting context, 

so IE doesn't need display table cell (and can't understand it)

*/

*display:block;*zoom:1;

/* cancel float so formatting context will have an effect */

float:none;

/* fix IE 3px float bug */

_position:relative; _left:-3px; _margin-right: -3px;

/* 

let the last unit automatically adapt it's width to whatever space is remaining 

overrides sizeXofY classes when they are used on last unit

*/

width:auto;}

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=.

--

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

[Marco M. Jaeger]

Hello Nicole

there seems to be an error in the mod-skin file - one of the comments isn't open/closed correctly.

.simpleExt .inner{border-color:#fff; border-width:4px; /background-color:#e2e2e2;*/}

[Nicole Sullivan]

thanks for catching that, fixed it, just need to commit the change.

N

[Nelson Menezes]

It seems to work if the "display: table-cell" rule is replaced with "overflow:hidden". Tested in FF3.5, Safari 4.0.4, Opera 9.5 and 10, IE 6, 7, and 8, and Chromium 4...


Nelson Menezes
http://fittopage.org

2009/11/17 Nicole Sullivan <nic...@stubbornella.org>

[Kenneth Sundqvist]

> Setting line to display: table-row, and  
> each unit to display table-cell. This fixes individual lines, but they  
> start having weird effects when stacked next to one another.

You can set the line to display: table, and you won't have the column/
cell width syncing problems.

//Kenneth

> >> <stef...@attardi.org>wrote:

[Nicole Sullivan]

On Nov 22, 2009, at 2:30 PM, Kenneth Sundqvist wrote:

Setting line to display: table-row, and  

each unit to display table-cell. This fixes individual lines, but they  

start having weird effects when stacked next to one another.

You can set the line to display: table, and you won't have the column/
cell width syncing problems.

Did you give it a width of 100%? Do you have your solution online somewhere?

N

[Kenneth Sundqvist]

Ah, right, the width.

I have only toyed with the code for a tab control with multiple rows
where the tabs will, or won't, sync in width using display: table-row
or table--but there it wasn't a problem (so far) to have it
shrinkwrap. I don't have any code from that experiment online, sad to
say.

[Nicole Sullivan]

No problem, it won't take long to test it. 

N

[mmj]

Before I'm going to hand out my site to my client I just wanted to
make sure that there is still no fix available for the broken layout
in Opera, right?

thanks

[Nicole Sullivan]

I just committed a fix, which seems to work and have low chance of side effects because it only operates on the :after class. Let me know if it works for you. I tested on Opera 10.X and 9.X

N

[Stefano J Attardi]

On Wed, Nov 25, 2009 at 4:12 PM, Nicole Sullivan
<nic...@stubbornella.org> wrote:
> I just committed a fix, which seems to work and have low chance of side
> effects because it only operates on the :after class. Let me know if it
> works for you. I tested on Opera 10.X and 9.X

The fix works for the grids, yay!

However, there's an issue with template.css. The :after rule on .body
is stretching the page be double (sometimes more) the width of the
browser window size:

http://grab.by/W93

Any idea of what's going on?

Thanks,
Stefano

[Majic3]

I have found that removing

content:
" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
"

content:
" . "

works just fine with opera10.10

http://github.com/stubbornella/oocss/issues/closed#issue/20

[Ludwig Bekic]

hi, this might be related to this issue:

Recently i found out that Opera reads a ". ." (a dot followed by space
followed by a dot) as a word.

That means Opera can't insert linebreaks into a string like ". . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . ." which causes the parent
container to behave strange.

Here's an example http://www.superlooper.at/oocss/dots.html
(screen attached)

Ludwig




2009/12/2 Majic3 <he...@majic3.com>:

> --
>
> 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.
>
>
>

[Stefano J Attardi]

On Thu, Dec 3, 2009 at 5:33 AM, Ludwig Bekic <lbe...@gmail.com> wrote:
> hi, this might be related to this issue:
>
> Recently i found out that Opera reads a ". ." (a dot followed by space
> followed by a dot) as a word.
>
> That means Opera can't insert linebreaks into a string like ". . . . .
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> . . . . . . . . . . . . . . . . . . . . . . ." which causes the parent
> container to behave strange.

That is indeed the source of the problem. Simply replacing the " . . .
" with " x x x " takes care of it.

Thanks!
Stefano

[Nicole Sullivan]

What a crazy bug!

N

Sent from my iPhone

On Dec 3, 2009, at 9:08 AM, Stefano J Attardi <ste...@attardi.org>
wrote:

[Jim Roberts]

That's not a bug that's a feature

Sent from my iPod Touch

On Dec 3, 2009, at 12:27 PM, Nicole Sullivan <nic...@stubbornella.org>
wrote:

[Ludwig Bekic]

I reported the bug here https://bugs.opera.com/wizard/

Ludwig

2009/12/3 Nicole Sullivan <nic...@stubbornella.org>: