OOCSS, Italics, IE6 and you.

[Murray]

Because of the way the main content has no width or padding, the IE6
Italics bug becomes more apparent when emphasis wraps onto a second
line.

I'm having to use the following to correct the problem. I haven't had
a good chance to test this I'm just having to cross my fingers. Two
sites launched today and both of them came up with this problem.

i, em {_overflow: visible; zoom:1;}

http://nzcurriculum.tki.org.nz/ is a reskin of an old site where I
have tried implement OOCSS. This is not my best example however as it
got messy toward the end because of tight deadlines and massive
amounts of strange html decisions from the past.

[Murray]

Gah, when I say "main content has no width or padding", I meant that
the content *div*

On Oct 23, 3:16 pm, Murray <murray.nutt...@gmail.com> wrote:
> Because of the way the main content has no width or padding, the IE6
> Italics bug becomes more apparent when emphasis wraps onto a second
> line.
>
> I'm having to use the following to correct the problem. I haven't had
> a good chance to test this I'm just having to cross my fingers. Two
> sites launched today and both of them came up with this problem.
>
> i, em {_overflow: visible; zoom:1;}
>

> http://nzcurriculum.tki.org.nz/is a reskin of an old site where I

[Nicole Sullivan]

Do you mean that the edge of the letters gets cropped off? Can you send us a screenshot or URL.

Thanks,

Nicole

--

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

[Murray]

The page is http://nzcurriculum.tki.org.nz/Archives/Curriculum-project-archives/References

The fix above isn't right... I think it has to be something like:

* html {overflow: visible; zoom1;}

On Oct 23, 3:39 pm, Nicole Sullivan <nic...@stubbornella.org> wrote:
> Do you mean that the edge of the letters gets cropped off? Can you  
> send us a screenshot or URL.
>
> Thanks,
> Nicole
>
> On Oct 22, 2009, at 7:26 PM, Murray wrote:
>
>
>
>
>
> > Gah, when I say "main content has no width or padding", I meant that
> > the content *div*
>
> > On Oct 23, 3:16 pm, Murray <murray.nutt...@gmail.com> wrote:
> >> Because of the way the main content has no width or padding, the IE6
> >> Italics bug becomes more apparent when emphasis wraps onto a second
> >> line.
>
> >> I'm having to use the following to correct the problem. I haven't had
> >> a good chance to test this I'm just having to cross my fingers. Two
> >> sites launched today and both of them came up with this problem.
>
> >> i, em {_overflow: visible; zoom:1;}
>

> >>http://nzcurriculum.tki.org.nz/isa reskin of an old site where I

[Nicole Sullivan]

What version of IE?

[Murray]

IE6.

On Oct 23, 3:51 pm, Nicole Sullivan <nic...@stubbornella.org> wrote:
> What version of IE?
>
> On Oct 22, 2009, at 7:42 PM, Murray wrote:
>
>
>
>
>

> > The page ishttp://nzcurriculum.tki.org.nz/Archives/Curriculum-project-archives/R...

>
> > The fix above isn't right... I think it has to be something like:
>
> > * html {overflow: visible; zoom1;}
>
> > On Oct 23, 3:39 pm, Nicole Sullivan <nic...@stubbornella.org> wrote:
> >> Do you mean that the edge of the letters gets cropped off? Can you
> >> send us a screenshot or URL.
>
> >> Thanks,
> >> Nicole
>
> >> On Oct 22, 2009, at 7:26 PM, Murray wrote:
>
> >>> Gah, when I say "main content has no width or padding", I meant that
> >>> the content *div*
>
> >>> On Oct 23, 3:16 pm, Murray <murray.nutt...@gmail.com> wrote:
> >>>> Because of the way the main content has no width or padding, the  
> >>>> IE6
> >>>> Italics bug becomes more apparent when emphasis wraps onto a second
> >>>> line.
>
> >>>> I'm having to use the following to correct the problem. I haven't  
> >>>> had
> >>>> a good chance to test this I'm just having to cross my fingers. Two
> >>>> sites launched today and both of them came up with this problem.
>
> >>>> i, em {_overflow: visible; zoom:1;}
>

> >>>>http://nzcurriculum.tki.org.nz/isareskin of an old site where I

[Murray]

I will endeavour to post more complete messages in the future. Sorry
everyone!

Here is an article about the bug.

http://www.positioniseverything.net/explorer/italicbug-ie.html

> > >>>>http://nzcurriculum.tki.org.nz/isareskinof an old site where I

[Dan Humphrey]

Murray, It looks really nice - I love the repetition of the shell in the headers.

Is it live? I seem to get a mixture of 2 sites between different pages - some of them being orange with square tabs, or have these pages not been included in the update?

Nice work!

Dan

[Murray Nuttall]

Confusing isn't it? The top tabs are global navigation for all educational sites in New Zealand. The Navigation on the left is for this particular site. There are a lot of pages with bulk text which could do with some attention.

This pages is pretty cool: http://nzcurriculum.tki.org.nz/National-Standards

And this section worked out okay too: http://nzcurriculum.tki.org.nz/Curriculum-resources/NZC-resource-bank


I would have prefered to start this site from scratch but the client didn't want to go through and reload all the content. Over the past 2 years this site has been developed by 5 different front-end developers and 5-6 different programmers. It's a bit messy in the back, but it looks a lot better now.

[Dan Humphrey]

Slightly, I understand better now you've explained though.

The pages you've linked to look very nice - pat yourself on the back and have a beer!

:)

[Murray]

Thanks Dan, I was thinking the same thing I just hope they stocked the
fridge.

On Oct 23, 4:25 pm, Dan Humphrey <danh2...@gmail.com> wrote:
> Slightly, I understand better now you've explained though.
>
> The pages you've linked to look very nice - pat yourself on the back and
> have a beer!
>
> :)
>

> On Fri, Oct 23, 2009 at 2:20 PM, Murray Nuttall <murray.nutt...@gmail.com>wrote:
>
> > Confusing isn't it? The top tabs are global navigation for all educational
> > sites in New Zealand. The Navigation on the left is for this particular
> > site. There are a lot of pages with bulk text which could do with some
> > attention.
>
> > This pages is pretty cool:
> >http://nzcurriculum.tki.org.nz/National-Standards
>
> > And this section worked out okay too:
> >http://nzcurriculum.tki.org.nz/Curriculum-resources/NZC-resource-bank
>
> > I would have prefered to start this site from scratch but the client didn't
> > want to go through and reload all the content. Over the past 2 years this
> > site has been developed by 5 different front-end developers and 5-6
> > different programmers. It's a bit messy in the back, but it looks a lot
> > better now.
>

> > On Fri, Oct 23, 2009 at 4:13 PM, Dan Humphrey <danh2...@gmail.com> wrote:
>
> >> Murray, It looks really nice - I love the repetition of the shell in the
> >> headers.
>
> >> Is it live? I seem to get a mixture of 2 sites between different pages -
> >> some of them being orange with square tabs, or have these pages not been
> >> included in the update?
>
> >> Nice work!
>
> >> Dan
>

> >>> > >>>>http://nzcurriculum.tki.org.nz/isareskinof an old site where I

[Nicole Sullivan]

Murray,

The site looks great, bravo!

It looks like something in your center column is too big. The way I would usually debug this is the following.

1. Add template_debug.css to the page (so you can see what is happening despite crappy IE dev tools.

2. Remove everything from the center column and then add them back in thing by thing until you know what small piece is breaking things. 

3. Debug that piece when you've narrowed it down.

If you think it is the italics, try setting everything in the center column to normal text with an important. If the bug goes away, you are right.

I suspect it is your long link text. IE6 seems to have trouble wrapping really long links. In that case, you have two options.

1. Truncate link text and make sure you don't put anything which is too big in the center column

2. Set a fixed width for the center column (not a tragedy just slightly less flexible)

Cheers,

Nicole

[Nicole Sullivan]

Noticed something else. The right column is also not where it should be... this leads me to believe something has actually gone wrong in either the left col, right col, or breadcrumb trails. 

Even if the center col were too wide, the right column should still be positioned at top right. 

Nicole

On Oct 22, 2009, at 8:26 PM, Murray wrote:

[Nicole Sullivan]

On Oct 22, 2009, at 8:20 PM, Murray Nuttall wrote:

>
> I would have prefered to start this site from scratch but the client
> didn't want to go through and reload all the content. Over the past
> 2 years this site has been developed by 5 different front-end
> developers and 5-6 different programmers. It's a bit messy in the
> back, but it looks a lot better now.
>

Your code looks really nice. Factbox and banner are excellent examples
of how to extend existing objects. I love it that you took the
template and changed the names to be more semantic. Every site has
some amount of mess under the hood, you've done a great job and should
definitely celebrate this.

[Murray Nuttall]

Hi Nicole, that's exactly what I did to debug it and discovered that the problem was with the italic text causing extra width so I have added the * html p {overlfow:visible;zoom:1;} fix for IE6. I'll see how it goes next week in testing.

I would hate to add a set width to #content as this removes the flexibility of the templates that 'overflow: hidden' gives us.

The breadcrumbs and search box are in there own separate container, #site-tools, which allows them to exist on 1,2, and 3 column layouts without much extra programming. Sometimes the breadcrumbs wrap to 2 -3 lines which pushes my #content and #secondary-tools containers to shift down, but this is the expected functionality. I think that might be what you're seeing with the right column shifting.

Thanks Nicole!