Aligning search box and label

[aidank]

Hi Guys,

I have placed the breadcrumbs div and search box div on the same line just under my main banner and above the main content area. The breadcrumbs div is on the left hand aide and the search on the right hand side. Both are functioning correctly however the search box and label are not lining up centre aligned with the breadcrumbs. They appear a couple of pixels lower than the breadcrumbs hence doesn't look symmetrically correct. In fact the label and search box are not symmetrically correct either, all three elements are at different heights.

I have read through a lot of old posts but can't find a resolution.

Here is my CSS code:

/* position for the search box */
div#search {
  float: right;
  width: 23em;    /* enough width for the search input box */
  text-align: center;
  padding: 0.6em 1em 0.2em 0;
  margin: 0 1em;
  font-size: 90%;
  align: center;
  }

#m2searchinput{
font-family: Arial, Helvetica, sans-serif, Verdana, Geneva;
font-size: 90%;
padding: 0.2em;
text-align: left;
align: center;
}

#m2searchinput label {
text-align: center;
align: center;
}


div.breadcrumbs {
  float: right;
  padding: 1em 0 1.2em 1.6em; /* CSS short hand rule first value is top then right, bottom and left */
  font-size: 90%;        /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
  margin: 0 1em;        /* css shorthand rule will be opened to be "0 1em 0 1em" */
  /*border-bottom: 1px dotted #000;*/  /*Get rid of bottom border*/
  align: center;
}

div.breadcrumbs span.lastitem {
  font-weight:bold;
}


Here is my template code just incase:

{* Start Search *}
 
        {search}
 
  {* End Search *}


  {* Start Breadcrumbs *}
 
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
 
 
  {* End Breadcrumbs *}

I think I need to edit the "m2searchinput label" but can't seem to be able to find a way to centre the box and label. When I put two breadcrumbs up on the left and right sides for test purposes they both line up so its a matter of getting the search label and box centre aligned.

Any help appreciated.

Aidan

[Dr.CSS]

A link would be good...

Try putting the search after the crumbs...

[aidank]

Hi Mark,

Here is a link to my test site, I am just building a website for my local football team so nothing amazing compared to some of the sites I have seen on this forum 

http://www.naomhmearnog.ie/index.php?page=links

Thanks
Aidan

[Dr.CSS]

Try adding...

padding:0px;margin:0px; to the #m2searchinput label, this is an IE6 problem, it looks fine in Firefox...

[aidank]

Hi Mark,

I added that code in but it still doesn't line up in IE. As you say it is fine in Firefox. I assume we may just have to put this issue down to IE not working correctly?

Thanks

Aidan