Hi Bruce

I can't answer your question immediately, due to time constraints. But my first suggestion is to simplify your css to see where things are happening. Here's a snippet of the first few rules:

 

/*global structure elements */
body {
        margin: 0;
        padding: 0;
        color: #333;
        font: 76%/1.5em arial, helvetica, sans-serif;
        background: #e2e3d5;
        height: 100%;
        min-height: 100%;
        text-align:center;
        
}
 
#wrapper_outer {
        width: 769px;
        height: 100%;
        min-height:100%;
        font-size: 1em;
        min-height: 100%;
    margin-left: auto;
        margin-right: auto;
 
}
 
 
 
 
* html>body #wrapper_outer {
        height: auto;
}
 
#top{
padding:0;
margin:0;
background:url(bdr_top.jpg) no-repeat;
}
 
#bottom{
padding:0;
margin:0;
background:url(bdr_bottom.jpg) no-repeat;
}

 

 

 

Can become:

 

Body, div, ul, li, ol, dl, dt, dd, p, table, td, tr, th, tbody, thead, caption {padding:0; margin:0;}

body {color: #333; font: 76%/1.5em arial, helvetica, sans-serif;
        background: #e2e3d5;   height: 100%;  min-height: 100%;text-align:center;}
#wrapper_outer {width: 769px;  height: 100%;  min-height:100%;font-size: 1em;margin:0 auto;}
#top{background:url(bdr_top.jpg) no-repeat 0 0;}
 
#bottom{background:url(bdr_bottom.jpg) no-repeat 0 0;}
 
 
Here's a couple things I saw, repetitive mention of margin:0, padding:0. Declare it once in the top of the page to zero out the browsers. 
Begin adding margin and padding on elements that need it.
#wrapper_outer had min-height:100% twice
 
This is an odd set of filters that show something only to IE then you hide it from IE with the > selector. It's not doing anything.
  * html>body #wrapper_outer {height: auto;}
 
I would suggest combing through your CSS to remove extra elements. I have not used the height/min-height 100% rule very often. I don't know if that could be causing any issues.
 
Ted
 

 

 


From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Bruce Gilbert
Sent: Tuesday, September 27, 2005 2:40 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] a better tsolution than oveflow:auto for Mozilla?

 

that's more or less what I am doing, but

 

take a look at this page in FF

 

 

scroll bars are there, if I take out overflow:auto in CSS on div>#text_area

 

it looks even worse cuz, in FF the div only extends as far as the #right_block_content on some pages.

 

my CSS for #right_block_content div is:

 

#right_content_block_index{/*used for vertical divider on home page*/
float:right;
width:35%;
height:100%;
padding-right:10px;

}

 

here is an example of a page which is messed up in ff w/o the overflow:auto

 

 

 

 

On 9/27/05, Drake, Ted C. <[EMAIL PROTECTED]> wrote:

#wrap{float:left;}

#header {}

#maincontent {float:right; width:49%;}

#sidebar{float:left; width:49%}

#footer {clear:both;}

 

<div id="wrap">

<div id="header></div>

<div id=""maincontent"></div>

<div id="sidebar"></div>

</div>

<div id="footer"></div>

 

 

Is this what you mean?

It's a very basic version of what you are describing. It works for me.

 

Normally, I float the parent for areas where I'm afraid clearing an element will also clear the sidebar. I haven't tried it for the whole page layout.

 

<div id="gallery">

<dl>

<dt>asdfa</dt>

<dd>asdfasdF</dd>

</dl>

 

<dl>

<dt>asdfa</dt>

<dd>asdfasdF</dd>

</dl>

 

<dl>

<dt>asdfa</dt>

<dd>asdfasdF</dd>

</dl>

</div>

 

#gallery {float:left; width:100%;}

#gallery dl {float:left; width:40%; margin:1em;}

 

Any feedback on this folks?

 

Ted

www.tdrake.net

 

 

 

 

 


From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]] On Behalf Of Bruce Gilbert
Sent: Tuesday, September 27, 2005 1:55 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] a better tsolution than oveflow:auto for Mozilla?

 

Thanks Ted,

 

not sure I am understanding you correctly, though. Say you have a parent div you would to extend the length of your content, and within that parent div you have a div at the top that you want to not float, but fit the width of the parent, and below the top child div, you have two more twin dis, one floated left, and one right, each taking up about 50% or half of the parent div. What would be the solution for this? I don't think floating the parent would work in this case, unless I am misunderstanding you.
 

On 9/27/05, Drake, Ted C. < [EMAIL PROTECTED]> wrote:

Hi Bruce

Try floating the content div instead. I've often found this to be the easiest fix. A floated parent will contain its floated children.

 

I've been writing a document for my fellow programmers about nested lists and if write parent/child one more time I think I'm going to change my name to Dr. Seuss.

 

Ted

 




--
::Bruce::

Reply via email to