Basic CSS Issue w/ Vertical Space

[stephenvoss]

I'm currently redesigning my site and have noticed a weird issue w/
IE6.

Basically, it's adding too much vertical space between elements.

Here's the front page:
http://www.portlandstories.org/test/

It looks good in FF, but in IE the space between the header and the
name, and between the <hr> elements and the nav buttons is huge. I'd
appreciate any pointers on how to tighten this up.

Also, any idea why the horizontal rules would look black (as specified)
in IE, but gray in FF?

thanks is advance,
Stephen

[Spartanicus]

st*********@gmail.com wrote:

http://www.portlandstories.org/test/

It looks good in FF, but in IE the space between the header and the
name, and between the <hr> elements and the nav buttons is huge.
IIRC IE only allows the margins and/or padding of the hr element to be
reduced down to a certain amount, it's not fully styleable.
Also, any idea why the horizontal rules would look black (as specified)
in IE, but gray in FF?

Black here in both.

For better control don't use the hr element, style the border of natural
occurring block elements to create presentational lines, or use
something like a styled div instead of the hr element. If the borders
are structural (dodgy practice), you can nest a hr inside the styled div
and switch it off in css.

Btw, make up your mind about what you are using, your current code mixes
XHTML and HTML syntax, and Transitional is sooooo 1996.

--
Spartanicus

[stephenvoss]

Spartanicus,
Many thanks for the help, I'm updating that code right now.