How to fix spacing issues between FF & IE?

[wms]

Hi,

I'm using the latest version of CMSMS with no extra modules installed.  I'm working on a redesign for my church website and I'm having quite the time on getting things to look properly in FireFox & IE (haven't tested any other browser yet).

My problem is the TopNav alignment in IE (looks fine in FF) and extra spacing at the bottom of the body left-right border in FF (looks fine in IE).  I also have a left nav that's supposed to display the second level.  I was wondering if there is no second level, is there a way to no show the borders.

Any help would be very very grateful.  I have spent hours and days on this and have come to the end of my limited knowledge of css.

The URL is:  http://www.awchurch.ca/index.php  (If you select the last link in the top nav, you will see the second level links pop up in the left nav).

Thank you in advance for your help on this.

P.S.  If there is anything else I need to send (i.e., template, css) please let me know.

P.P.S.  I'm using simple horizontal and vertical navigation for the menus.

[wms]

Hi,

Just wondering if anyone took a look and would have anything to offer as in the way of advice?

I'm still puzzled on my alignment problems with my topnav and the bottom of my content border.  It looks one way in FF and another in IE?

Thanks in advance.

[kermit]

* html div#topnav {float:left;margin-top:-4.5em;width:100%}
* html div#menu_horiz ul {padding-left:2.25em;}

OR

* html div#topnav {float:left;margin-top:-60px;width:100%}
* html div#menu_horiz ul {padding-left:20px;}

added at the end of your css places the menu in the red bar in ie6 using default text sizes.

but, i would suggest moving the red bar part of the header graphic to it's own file; shrink the header height to match the remaining part of the header; and make the red bar a background of div#topnav instead of messing around with negative margins to get it "inside" of the header space.

[wms]

Thanks for the reply.

What you mentioned worked in IE, but now in FF the topnav text is misaligned to high. 

The topnav image was separate from the header, but things were misaligned.  I tried to make it all one image at top to see if that works.

Any other suggestions why it's different in FF & IE?

Thanks,

[kermit]

What you mentioned worked in IE, but now in FF the topnav text is misaligned to high. 

the * html hack does not target firefox; perhaps you messed with the margin on the menu while trying to fix it for ie?

try:

div#menu_horiz ul {
  /* margin: 0; */
  margin-top: -35px;
  padding-left: 55px;
  /* border-bottom: 1px solid #C0C0C0; */
  /* border-left:  1px solid #C0C0C0; */
  height: 2.2em;
}

which lines it up almost exactly in the same place (in firefox2) as the second (px-based) ie hacks do for ie6.

[wms]

Thank you so much

I went back to your first post and tried again what you said.  I didn't understand at first and had to try it a couple of times.  Your second post made me try the "* html".  I didn't know to use this infront of the div tag.  Is this a common IE hack to always try?

I'll try some like that now for by content border problem.

[wms]

I think the border problem is something to do with my content I copy 'n pasted in.  I'll have to work on that.  Besides that, the site is now coming along.

Thanks for your help Kermit