Sent by Big John on 29 August 2002 05:05
Brandon Oto wrote:
> http://www.berkeleyhigh.org/
> I believe I've sorted my kludges, solved my glitches,
> and knocked down my bugs in a regular purty fashion,
> but the age-old demon of browser testing is
> whispering in my ear.
It's good that you listened to that sound. The box-model
bug still inhabits your page. :-0
It's in #head. This div does two things; first it holds
the title image, and second its bottom border provides that
thin black line that extends across to the right from the top
of the left nav.
Trouble is it has a 'height', plus padding and that 1px border,
so the line does not end up where it should in IE5.x. Actually,
it would be too high, except that the image is too tall for
the space allowed, thus pushing the line too low. This does
not happen in compliant browsers 'cause they don't stretch
the container if the content is too big.
Luckily there is an easy fix. Your #head should read like so:
#head {
margin: 1px 20px 25px 20px;
height: 92px;
border-bottom: 1px solid #000000;
}
The padding is removed, and is added to the height. A side
effect of this is that the image is now too high, so add
a top padding to .imgwrapper, to push it down a bit.
(Okay, okay, it's not easy; so sue me)
But the line is still a border, and still causes the BM
problem. This 1px error cannot be ignored because the
height of that line is critical, so it must be hacked:
#head {
\height: 93px; /* IE5.x can read this but old browsers can't */
}
#head { /* IE.5.x can't read this, modern ones can */
hei\ght: 92px; /* the escape can go after any letter */
/* except the first six: a,b,c,d,e,f */
}
These two go directly after the first #head rule, and are
equivalent to the Tantek hack, but much easier to remember.
The middle rule feeds 'height: 93px' to IE5.x, and the last
corrects this for good browsers. The first is for old browsers.
I thought of having you reorganize the entire page to
'properly' fix this problem, but you've suffered enough.
There's one other thing. In IE5.x the footer div is not
centered. You do have 'text-align: center' on the footer
div (a hack for IE) but it should go on the element that
encloses the footer div, not the footer div itself. Just
wrap the footer in a div and apply 'text-align: center'
to that div. (whew! that WAS easy!)
HTH
Big John
=====
"What the world needs is a good bug ring"--Big John
<http://users.rraz.net/mc_on_the_rocks/testpage/pie.html>
__________________________________________________
Do You Yahoo!?
Yahoo! Finance - Get real-time stock quotes
http://finance.yahoo.com
