Help with arranging search and menus (IE vs FF) (solved)

[dashlock]

Hello,
I just installed version 1.0.8 yesterday morning and worked quite a bit on my new site last night.  I'm fairly new to CSS which is probably my biggest barrier.

I would appreciate any hints or helps to get me unstuck on a few things.  The problems are somewhat related.

My goal is to move the content of www.riveroflifebaptist.com to www.riveroflifebaptist.org.  The .com site was a Dreamweaver home brew CMS that I wrote, and it uses tables.

1.  When I was working on my home Linux system last night, there was not a line between the 2 sections header and leftheader.  Now there is on XP/IE6.  Leftheader was my way of getting that graphic to come down.  I'll include a picture below of how it looks on IE6.

div#header h1 a {
/* you can set your own image here */
  background: #d8dff2 url(images/cms/top.jpg) no-repeat -2px 0px;
  display: block;
  height: 113px;            /* adjust according your image size */
  text-indent: -999em;  /* this hides the text */
  text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#leftheader {
  background: #d8dff2 url(images/cms/left.jpg) no-repeat -2px 0px;
  display: block;
  height: 153px;            /* adjust according your image size */
  text-indent: -999em;  /* this hides the text */
  text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

2.  Can I get the search box placed in the upper right hand corner of the header?

3.  Can I get the menu system placed in the top of the leftheader?

Thanks for any help you can provide.

[dashlock]

update:  I've been playing around and have made some progress.  I decided I want to leave the search box alone.  After looking at the page on a 800x600 system I realized I don't want the search at the top.

I managed to move the menu up.  Now I want to move it to the right so it does not cover up the picture on the left. 

I still have the gap between the sections header and leftheader, but only on IE, not FF.

http://www.riveroflifebaptist.org


I will also attach my stylesheet and template as text files.

[dashlock]

another update...
I'm achieving all of my goals, at least on Firefox.  However on IE I still have 2 problems.

On Firefox, I managed to float the menu to the right.  On IE it stays on the left.

On Firefox, there is a still a gap between the 2 divisions header and leftheader.  (The div leftheader is my own addition)

I'll keep searching the forums and trying things.  Any hints would be appreciated.

Thanks for reading.

[Dr.CSS]

Looks the same in IE 6 on xp and Ff, header that is, but IE has color behind the menu and search is pushed down...

[SimonSchaufi]

why dont you just copy the template and the stylesheets from the old homepage to the new and edit the template so that the content will be dynamically?

[dashlock]

Mark,
Thanks for looking at it.  I keep playing with the code.  I'm starting to learn more about CSS and the quirks it can have with IE.  So I'll probably get there eventually.

I was actually making headway last night with positioning the menu using relative and absolute positioning.  And even using float positioning if I fix the width of the menu.  But I still had that line between header and leftheader divs like you can see in the snapshot above.  So this line is my biggest frustration right now.

The reason the header looks the same now is my latest attempt to fix stuff was to create one big header, and then try to move the menu on to it.  So far this idea is not working either.

Simon,
the old web site was table based, did not use CSS for positioning, and the positioning is what is giving me problems.  So I don't think this will work.

Thanks

David

[Dr.CSS]

Take the style call for the menu_vert out of the html and put it in the style sheet so it can be worked on from this end...

[dashlock]

Not sure I'm following.  Do you mean to move part of this code from the template to the stylesheet?

 
     
   
        Navigation
        {menu template='cssmenu.tpl'}
     
     
     
 

I can actually get the navigation where I want it if I split the header into 2 divs header and leftheader.  I've got the web site back to that now.  But I also have the light blue line dividing the two div's on IE.

Thanks
David

[dashlock]

Well somehow, I've accomplished most of what I set out to do.

I used this site to help me with learning how to position.
http://www.barelyfitz.com/screencast/ht ... sitioning/

This site was also helpful in looking up CSS stuff.
http://www.w3schools.com/css/

I'm not sure how I fixed the blue line problem.  I was playing with positioning of search and the menu, and all of a sudden noticed that the line was gone. 

As far as the search box, I think I'll leave it right where it's at.

There are still a couple of small quirks that I'll keep working on.
1.  The menu bar spills over past the end of the page on IE, looks fine on Firefox.  I could give it a width, but then it cuts it off at an odd spot in firefox, but looks a little better in IE.
2.  In IE, on the right side of the page, the border sometimes has a 1px shift.  I probably caused it somehow.

[Dr.CSS]

Looking good...

The pixel shift has been discussed on the forum search for 3px shift may find it for you, it's a known IE bug...