header seems to "inherit" list width in opera

Hello

In Opera 9 on a page with a list the <h1> element truncates to the size
of the list below it. Doesn't appear to happen with IE6.

Here is page with <h1> and a list

http://members.iinet.net.au/~dbensted/?page=links

Here is page with <h1> and no list

http://members.iinet.net.au/~dbensted/?page=meetthestaff

Pls let me know if I need to give you any more info

Deb

djaneb <djaneb@gmail.com> schreef op Sat, 16 Sep 2006 00:30:00 +0200:

> In Opera 9 on a page with a list the <h1> element truncates to the
size
> of the list below it. Doesn't appear to happen with IE6.
>
> Here is page with <h1> and a list
>
> http://members.iinet.net.au/~dbensted/?page=links
>
> Here is page with <h1> and no list
>
> http://members.iinet.net.au/~dbensted/?page=meetthestaff
>
> Pls let me know if I need to give you any more info

The main part of the page is contained in a div#bodycontent. This div is  
absolutely positioned and has no set width. As far as I know, this means  
the browser calculates its width using the 'shrink to fit' algorithm. In  
other words: this div will be as large as its content dictates.

In the first page you mention, the content just isn't wider than that,  
causing the h1s (which are by default as wide as their container) to be  
rather narrow. In the second page, there is content as large as can fit on  
the screen, which allows the h1s to grow to that size as well.

I'm not sure why you mention that this problem shows on Opera 9. Firefox  
and Internet Explorer 7 seem to do the same.

-- 

FV wrote:
> djaneb <djaneb@gmail.com> schreef op Sat, 16 Sep 2006 00:30:00
+0200:
>
> > In Opera 9 on a page with a list the <h1> element truncates to
the size
> > of the list below it. Doesn't appear to happen with IE6.
> >
> > Here is page with <h1> and a list
> >
> > http://members.iinet.net.au/~dbensted/?page=links
> >
> > Here is page with <h1> and no list
> >
> > http://members.iinet.net.au/~dbensted/?page=meetthestaff
> >
> > Pls let me know if I need to give you any more info
>
> The main part of the page is contained in a div#bodycontent. This div is
> absolutely positioned and has no set width. As far as I know, this means
> the browser calculates its width using the 'shrink to fit' algorithm. In
> other words: this div will be as large as its content dictates.
>
> In the first page you mention, the content just isn't wider than that,
> causing the h1s (which are by default as wide as their container) to be
> rather narrow. In the second page, there is content as large as can fit on
> the screen, which allows the h1s to grow to that size as well.
>
> I'm not sure why you mention that this problem shows on Opera 9. Firefox
> and Internet Explorer 7 seem to do the same.

Thank you. That makes sense. Do you think it would work if I gave the
div#bodycontent a minimum width?

I mentioned IE6. I don't have IE7. I have just checked again and it is
definitely not truncated in IE6. That's why I bothered posting in an
Opera ng. If it had occurred across browsers I would have posted in a
more general group. I can certainly take this somewhere else if it is
not appropriate - I appreciate your comments.

Many thanks

Deb

djaneb <djaneb@gmail.com> schreef op Sun, 17 Sep 2006 07:29:56 +0200:

> Thank you. That makes sense. Do you think it would work if I gave the
> div#bodycontent a minimum width?

I was more thinking of providing a 'right' position as well as a left, so  
it'll automatically adapt to virtually all screen resolutions. E.g.:

#bodycontent {
   left: 200px; right: 0;
}

But I haven't tested this thoroughly so I'm not sure it has no  
side-effects. Min-width might work just as well.

> I mentioned IE6. I don't have IE7. I have just checked again and it is
> definitely not truncated in IE6.

IE6 has some major flaws in its css support. Positioning, floats, the box  
model... some aspects of css are simply broken in IE6. IE7 is a great step  
in the right direction, it seems many pages will be rendered in a more  
standards compliant way with it.

-- 

FV wrote:
> djaneb <djaneb@gmail.com> schreef op Sun, 17 Sep 2006 07:29:56
+0200:
>
> > Thank you. That makes sense. Do you think it would work if I gave the
> > div#bodycontent a minimum width?
>
> I was more thinking of providing a 'right' position as well as a left, so
> it'll automatically adapt to virtually all screen resolutions. E.g.:
>
> #bodycontent {
>    left: 200px; right: 0;
> }
>
> But I haven't tested this thoroughly so I'm not sure it has no
> side-effects. Min-width might work just as well.
>

Yes - this worked - providing a zero margin fixed it on all pages.
Thank you

Deb