CSS: Problem with 'overflow=auto'

Author Message

Maarten Holland

Thursday 15 April 2004 6:51:23 am

I want to make a part of my page srollable. Therefore I've placed the content of that part in between <div id=scrollcontent> Content here </div>.

In my CSS I've defined scrollcontent as follows:

#scrollcontent
{
width: 735;
height: 430;
background-color: #FFFFFF;
overflow: auto;
}

This gives some problems with other DIV's that I use in my override templates. Some backgroundcolors don't show up, until you move your mouse over them. Some parts that I select with my mouse, stay selected while I select another part and so on.

Does anyone know what can be causing this?

Thank you for your time,

Maarten

Alex Jones

Thursday 15 April 2004 8:00:11 am

Maarten, what browser(s) are these problems showing up in? Can you post the URL of this page? Solving CSS issues tend to require looking at the actual page to find a solution.

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Maarten Holland

Thursday 15 April 2004 11:50:06 am

Unfortunately I can&acute;t post an URL because it&acute;s not on a productionserver yet.

Problem is showing up in IE 6 on Windows. It seems to have something to do with pagelayout.tpl. When I put the DIV in that template (around module.result.content) the problems appears. When I put the DIV around the code in the overridetemplate, the problem dissapears.

Alex Jones

Friday 16 April 2004 6:35:38 am

Hrrrm, it sounds like a cascade problem. Can you cut and paste the following bits of code please?
1. The CSS used to style the page
2. The code output to the browser when you place the div in pagelayout.tpl
3. The code output to the browser when using the override template

This will help tremendously.

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Maarten Holland

Thursday 29 April 2004 12:40:44 am

Hi Alex,

A copy of the site can be visited at example.ezstart.nl. At some pages, the problem also appears when I put the DIV in the override. This happens at the loginpage for example. Strange enough, some other pages don't have this problem when I put the DIV in the override.

I hope you can find the problem. Thank you for your help.

Cheers,

Maarten

Alex Jones

Thursday 29 April 2004 6:45:13 am

Maarten, while I can see the site, I don't have a login, so I cannot see a page that should overflow. Would it be possible to provide a guest login? If you don't want to provide it to the world, you can e-mail me at <i>- removed by Alex -</i>.

A couple of quick notes. IE is known for having issues with <i>overflow: auto</i>. This is due in large part to other elements not having heights set to them as well. You may want to experiment with applying a height via CSS to <i>div#boxgroot-body</i>. Also, I think your debugging efforts are harder as you are mixing table based layouts with CSS based layouts. This makes calculating heights and widths much harder as you have to account for the values in your various table tags alongside the values in your stylesheets. This is complicated even further by the differences in the way each browser interprests the box model (for example the padding value may be added to the total width, or it may be taken as part of the specified width). All in all it gets quite confusing. :(

Hopefully we can figure this out and get you going!

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Alex Jones

Thursday 29 April 2004 6:55:37 am

Also, you should include a Doctype to ensure your site is rendered properly. IE 6 has a strict mode and a quirks mode. Quirks mode provides support for code developed for earlier versions of IE. Some resources:

Fix Your Site With the Right DOCTYPE!: http://www.alistapart.com/articles/doctype/
Quirksmode: http://www.quirksmode.org/
Activating the Right Layout Mode Using the Doctype Declaration: http://www.hut.fi/u/hsivonen/doctype.html

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Maarten Holland

Thursday 29 April 2004 7:15:47 am

Alex,

I've tried to sent you an e-mail with my reply, but the address seems to be incorrect. Could you check it or mail me at maarten [at] ezstart [dot] nl?

Alex Jones

Thursday 29 April 2004 8:26:55 am

Ooops, I made a mistake in my e-mail address, sending the first part of my home address with the latter part of my work address. Duh! Sorry about that. I have sent you an e-mail.

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Powered by eZ Publish™ CMS Open Source Web Content Management. Copyright © 1999-2014 eZ Systems AS (except where otherwise noted). All rights reserved.