[css-d] Another cleanup tip needed

[Kim Brooks Wei]

http://www.thewei.com/sandbox/uajx/about.php

With the help of Gunlaug and the stupendous article he referred me 
to, I've cleaned up my code considerably and have gotten rid of a lot 
of the little buggy issues which were troubling me.

However, I still cannot get my three content boxes to line up with 
each other along a horizontal line. In fact, in several browsers 
including FF and Safari on OSX the center content box shoots right up 
into the header area. I tried separating the header from the rest of 
the content using clear: both but this didn't appear to accomplish 
anything. The center content box belongs to the flow which starts 
with the header. How can I get browsers to recognize that each the 
header and center content areas are distinct, although they are 
connected?  The right and left columns are less problematic and 
render as expected in most browsers.

The remaining IE 5.x issue I'm having is still with my nav buttons in 
the left column. They don't work right in IE 5.1 . It seems to me 
that I have arranged them in a straightforward way and they ought to 
work. It troubles me that they don't, and that I don't know why. 
Should I forget about this or is it worth my time and the time of a 
mentor, to figure this out and fix it?

Best,
Kimi

-- 
Kim Brooks Wei
1.201.475.1854
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Another cleanup tip needed

[Roger Roelofs]

Kimi,

On Jan 17, 2007, at 4:50 PM, Kim Brooks Wei wrote:

> http://www.thewei.com/sandbox/uajx/about.php
>
> However, I still cannot get my three content boxes to line up with
> each other along a horizontal line. In fact, in several browsers
> including FF and Safari on OSX the center content box shoots right up
> into the header area. I tried separating the header from the rest of
> the content using clear: both but this didn't appear to accomplish
> anything. The center content box belongs to the flow which starts
> with the header. How can I get browsers to recognize that each the
> header and center content areas are distinct, although they are
> connected?  The right and left columns are less problematic and
> render as expected in most browsers.

The #bannerbox has a height defined of 94px.  The banner is an 88px  
tall img + 10px padding + 1px border + room for the descenders since  
images are display: inline; by default.  That means the headerbox  
needs to be about 104px in height to contain the banner.  Since  
bannerbox's height is restricted, banner overflows out the bottom  
which makes it look visually taller than it really is.  If you want  
to see what I mean, try adding a 1px border to #bannerbox.

The solutions are to either remove the height from #bannerbox, and  
set enough bottom margin to push centercontent down where you want  
it, or set a large enough height to force centercontent down where  
you want it.

I typically use floats for layout because they adapt well to changes  
in text and window size from one browser to another.  Unfortunately  
you have to add ie/win specific instructions to get around its flawed  
float rendering.

hth

-- 
Roger Roelofs
Datacomp Appraisal Services

-- 
Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/