CSS - IE problem

[l e o]

I am designing a website,

http://www.standrewsstamford.org/

http://www.standrewsstamford.org/sermon.html

The above page looks good in Firefox 1.5 but there is a big gap below
the title "Sermon Archives."

Likewise, in IE6, there are more gap than I would want in each page,
between the main- and sub-menu.

CSS:
http://www.standrewsstamford.org/standrews.css

Are there workarounds? Thanx.

 

[Jim Moe]

http://www.standrewsstamford.org/sermon.html

The above page looks good in Firefox 1.5 but there is a big gap below
the title "Sermon Archives."

While you have spec'd padding fairly thoroughly, there are almost no
margin values set besides "auto". This leaves the margin values to the
imagination of the browser. Start by setting margin:0 for the <Hx>
elements, and adjust from there.

- You should be specifying your fonts as %, not pt. Points are for the
printed page. For margins and padding, use ems.
- Using 8 nested div's to create a border is ridiculous.

 

[Beauregard T. Shagnasty]

I am designing a website,

http://www.standrewsstamford.org/

http://www.standrewsstamford.org/sermon.html

The above page looks good in Firefox 1.5 but there is a big gap below
the title "Sermon Archives."

I do not see a gap in Firefox (or Opera), only IE, which is a broken
browser.

Likewise, in IE6, there are more gap than I would want in each page,
between the main- and sub-menu.

The padding between the two blocks is the problem. IE incorrectly puts
it on the outside, so it is shoving the right column downwards. You can
fix it by changing this:
#rightcontent {
margin-left: 224px;
to a larger amount.

But better yet, drop all this exact pixel sizing and use em units, so
that when visitors increase the text size, your whole design doesn't
fall apart.

See this page - about using px or pt for font-sizing, and about Verdana.
http://k75s.home.att.net/fontsize.html

 

[dorayme]

Looks fine in Safari too. I was puzzled about the need for the
float in one of your inline nav lists... I have done similar
without it at one stage or other?

That table of contents bg is too blindingly blue!

I am a little interested in the method of the tab-like nav strip
and I have always struggled myself to make it look good no matter
if the font-sizes are user-made big... eg. there is a little
issue of the "covering" border of the "current" tab not always
covering the main bottom line of the nav bar (the "gap" being a
nice touch to show the current tab is open...). If anyone has any
further thoughts on these constructions, I for one, will be all
er... antenae. Perhaps Beauregard's point about em or % based
dims can help here?

 

[Beauregard T. Shagnasty]

Perhaps Beauregard's point about em or % based dims can help here?

Most likely. When defined with em, the containers will expand along with
the text, thus "keeping everything in order."

 

[dorayme]

Most likely. When defined with em, the containers will expand along with
the text, thus "keeping everything in order."

You are right but it can still be tricky with the tab-like horiz
nav lists to get the borders to behave under a goodly but not
ridiculous range of font sizes. But your reminder was useful to
me... was just in the middle of that sort of thing and it works
to my satisfaction for now...